# kintoneレコード詳細画面の罫線の修飾 **URL:** \ **Category:** kintone 開発相談\ **Created:** [2023 年 8 月 8 日午前 6:21 UTC](https://community.cybozu.dev/t/topic/7957 "2023-08-08T06:21:31Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![masumi.y](https://sea1.discourse-cdn.com/flex015/user_avatar/community.cybozu.dev/masumi.y/32/230_2.png) [@masumi.y](https://community.cybozu.dev/u/masumi.y)\ **Post date:** [2023 年 8 月 8 日午前 6:21 UTC](https://community.cybozu.dev/t/topic/7957/1 "2023-08-08T06:21:31Z")
kintoneレコード詳細画面の罫線の修飾 kintone超初心者です。 kintoneレコード詳細画面の罫線に色付けし太くしたいのですが CSSコードが上手くいきません アドバイスをお願いします。 .recordlist-gaia .grid-row { border: 3px solid #FF0000; } ---
**Author:** ![ko-chan](https://avatars.discourse-cdn.com/v4/letter/k/e68b1a/32.png) [@ko-chan](https://community.cybozu.dev/u/ko-chan)\ **Post date:** [2023 年 8 月 8 日午前 7:00 UTC](https://community.cybozu.dev/t/topic/7957/2 "2023-08-08T07:00:14Z")
吉田さんこんにちは～ そうですね！多分コードにめちゃくちゃ大きな問題ではないですが、情報が少し少ないので判断しづらいです。 ##### こちらの提案として ①CSSコードにどういうエラーが発生したのか知りたいし、確認したほうがいいと思います。 kintone画面の空白のところに右クリックを押し、「検証」を押していただきたいです。 そこにconsole画面を選んでもらうと、赤いエラー文字ができるはずです。 ②あと、ちょうど使えそうな無料プラグインも見つかりましたので、 良ければ参考してみてください！ > **[kintone罫線デザイン変更プラグインを公開！使いどころを紹介します。 | JCS DX推進グループ](https://dx.japacom.co.jp/blogs/1217/)** > > JCSのkintoneプラグインの中でもイチオシである、罫線デザイン変更プラグインの使いどころについてご紹介します！ ---
**Author:** ![masumi.y](https://sea1.discourse-cdn.com/flex015/user_avatar/community.cybozu.dev/masumi.y/32/230_2.png) [@masumi.y](https://community.cybozu.dev/u/masumi.y)\ **Post date:** [2023 年 8 月 8 日午前 7:29 UTC](https://community.cybozu.dev/t/topic/7957/3 "2023-08-08T07:29:27Z")
ありがとうございます。 まだ何が何やら解らない状態です。 早速、やってみます。 ちなみに検証のコンソールにはエラーはありませんでした ---
**Author:** ![gabegabe](https://avatars.discourse-cdn.com/v4/letter/g/ed8c4c/32.png) [@gabegabe](https://community.cybozu.dev/u/gabegabe)\ **Post date:** [2023 年 8 月 9 日午前 12:58 UTC](https://community.cybozu.dev/t/topic/7957/4 "2023-08-09T00:58:31Z")
吉田さんこんにちは！ フィールドにCSSを反映させたい場合についてお答えします。 例えば、HTMLのクラス名が ```javascript
``` だった場合、CSSは ```javascript .label-1234567{ border: 3px solid #FF0000 !important; } ``` のように記述すればいいかと思います。 kintone標準のCSS内で元々定義されているため、それを上書きするために「 **!important** 」を付ける必要があります！ ---
**Author:** ![masumi.y](https://sea1.discourse-cdn.com/flex015/user_avatar/community.cybozu.dev/masumi.y/32/230_2.png) [@masumi.y](https://community.cybozu.dev/u/masumi.y)\ **Post date:** [2023 年 8 月 9 日午前 3:37 UTC](https://community.cybozu.dev/t/topic/7957/5 "2023-08-09T03:37:22Z")
ありがとうございます 大いに苦しんでおります 超初心者すぎて、躓きまくりです ---
**Author:** ![akika](https://avatars.discourse-cdn.com/v4/letter/a/5e9695/32.png) [@akika](https://community.cybozu.dev/u/akika)\ **Post date:** [2023 年 8 月 9 日午前 5:35 UTC](https://community.cybozu.dev/t/topic/7957/6 "2023-08-09T05:35:23Z")
### 罫線のclass の確認方法 JUNさんが記載した方法で検証タブを開きます。 次の画像のように、1の↑をクリックしてから、2にコンソールを当てると、その要素のcalss情報が表示されます。 次の図の場合、クラスは.control-hr-field-gaiaです。 ![スクリーンショット 2023-08-09 14.19.15](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/1X/4b4279dece8720ec17c3d5a809bed6ed5e2ed286.png) ### CSSの記載方法 Gabeさんが記載した通りです。 他のCSSの書き方は、ネットで調べたら情報がいっぱい出てきます。 ### 注意点（重要！） 次のページの「 kintone で使われている id や class 属性」に記載している通り、 各要素に付与されている id や class 属性の値は、予告なく変更されます。 id や classを使ったカスタマイズはお勧めしません。 [kintone コーディングガイドライン](https://cybozu.dev/ja/kintone/docs/guideline/coding-guideline/) ---
**Author:** ![masumi.y](https://sea1.discourse-cdn.com/flex015/user_avatar/community.cybozu.dev/masumi.y/32/230_2.png) [@masumi.y](https://community.cybozu.dev/u/masumi.y)\ **Post date:** [2023 年 8 月 9 日午前 8:49 UTC](https://community.cybozu.dev/t/topic/7957/7 "2023-08-09T08:49:38Z")
ありがとうございます。 大変、勉強になりました。 ---
**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/1X/d5c841c3c5a6cb66eed514001c1b45147c9e1f4f.png) [@system](https://community.cybozu.dev/u/system)\ **Post date:** [2023 年 9 月 22 日午前 6:41 UTC](https://community.cybozu.dev/t/topic/7957/8 "2023-09-22T06:41:28Z")
このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。