# Kintoneのレコード詳細画面と編集画面にて、CSSを書いてデザインを変更したい

**URL:** <https://community.cybozu.dev/t/topic/1169>\
**Category:** kintone 開発相談\
**Created:** [2022 年 11 月 18 日午前 7:04 UTC](https://community.cybozu.dev/t/topic/1169 "2022-11-18T07:04:01Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account117](https://avatars.discourse-cdn.com/v4/letter/l/8edcca/32.png) [@Legacy\_Account117](https://community.cybozu.dev/u/Legacy_Account117)\
**Post date:** [2022 年 11 月 18 日午前 7:04 UTC](https://community.cybozu.dev/t/topic/1169/1 "2022-11-18T07:04:01Z")

</div>

お世話になっております。

Kintoneのレコード詳細画面と編集画面にて、CSSを書いてデザインを変更したいです。  
Kintone フォームのラベル、テキストボックスにIDもしくはclassを付加する方法を教えてください。  
サンプルプログラムがあれば、教えていただきますと幸いです。  
以下の理由でcssに使うためIDとclassの付加をしたいです。  
＞＞Kintoneの定期的にアップデートの作業により、kintone のクラス名やID名の名前が変更さ＞＞れてしまう可能性があります。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1177](https://avatars.discourse-cdn.com/v4/letter/l/77aa72/32.png) [@Legacy\_Account1177](https://community.cybozu.dev/u/Legacy_Account1177)\
**Post date:** [2022 年 11 月 20 日午前 12:45 UTC](https://community.cybozu.dev/t/topic/1169/2 "2022-11-20T00:45:33Z")

</div>

アップデート後も保証されている方法はないかと思います。

強いていえばkintone.app.record.getFieldElement(fieldCode)でフィールドの要素が取得できるので、こちらにclassList.addする方法がありますが、詳細画面（detail.show）しか使えないので、cssによる装飾を特定のフィールドに行う場合、フィールドに割り振られている番号（field-xxxxxxx等）を使った方法しかなく、アップデートでこの仕様でなくなった場合はそれに合わせて変更するしかありません。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account117](https://avatars.discourse-cdn.com/v4/letter/l/8edcca/32.png) [@Legacy\_Account117](https://community.cybozu.dev/u/Legacy_Account117)\
**Post date:** [2022 年 11 月 21 日午前 2:01 UTC](https://community.cybozu.dev/t/topic/1169/3 "2022-11-21T02:01:18Z")

</div>

[mls-hashimoto](https://community.cybozu.dev/hc/ja/profiles/385013133091-mls-hashimoto)様

ご回答ありがとうございます。

classList.addする方法が詳細画面（detail.show）しか使えないというお話がありましたので、  
編集画面（edit.show）にも使えないということでしょうか？

編集画面にCSSデザインを書きたいので、やり方法がありますか？

ご教示いただきますと幸いです。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1177](https://avatars.discourse-cdn.com/v4/letter/l/77aa72/32.png) [@Legacy\_Account1177](https://community.cybozu.dev/u/Legacy_Account1177)\
**Post date:** [2022 年 11 月 21 日午前 2:16 UTC](https://community.cybozu.dev/t/topic/1169/4 "2022-11-21T02:16:21Z")

</div>

ポー さま

その通りです。[こちら](https://developer.cybozu.io/hc/ja/articles/201942014-%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E8%A9%B3%E7%B4%B0%E6%83%85%E5%A0%B1%E5%8F%96%E5%BE%97#step3) に記載がありますが、レコード詳細画面またはレコード一覧画面（index.showの場合kintone.app.getFieldElementsで配列の取得）でしか使えません。

create.showやedit.showで使う場合、フィールドに割り振られている番号（Chromeであればフィールドの上で右クリック→検証を選択すれば「field-xxxxxxx」と記載されています）のクラス名を使う必要がありますが、こちらが「アップデートにより変更される可能性のあるもの」です。

ラベルの装飾を変える場合は「label-xxxxxx」で、フィールドの入力欄の場合は「value-xxxxxxx」の子要素にあたるinput要素を指定すれば良いかと思います。

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/1X/d5c841c3c5a6cb66eed514001c1b45147c9e1f4f.png) [@system](https://community.cybozu.dev/u/system)\
**Post date:** [2023 年 10 月 18 日午前 6:53 UTC](https://community.cybozu.dev/t/topic/1169/5 "2023-10-18T06:53:38Z")

</div>

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。
