# 一覧表示の際に項目名に背景色をつけたい

**URL:** <https://community.cybozu.dev/t/topic/2812>\
**Category:** kintone 開発相談\
**Created:** [2018 年 1 月 24 日午後 2:44 UTC](https://community.cybozu.dev/t/topic/2812 "2018-01-24T14:44:06Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account1792](https://avatars.discourse-cdn.com/v4/letter/l/b5ac83/32.png) [@Legacy\_Account1792](https://community.cybozu.dev/u/Legacy_Account1792)\
**Post date:** [2018 年 1 月 24 日午後 2:44 UTC](https://community.cybozu.dev/t/topic/2812/1 "2018-01-24T14:44:06Z")

</div>

一覧表示の際に、項目数が多いので、背景色をつけたいのですが、その場合CSSで記載するのかと思いますが、具体的な書き方が分からず、アドバイスいただけないでしょうか。

下記のように、開催日と作成者を黄色、共有事項は水色、議論や相談事項と報告をピンクの背景色にしたいです。

```
background-color: #FF9999;
上記のような記載かと思いますが、クラス名などが分からず…
全文としてはどのように記述すれば良いでしょうか。

```

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1740](https://avatars.discourse-cdn.com/v4/letter/l/ed8c4c/32.png) [@Legacy\_Account1740](https://community.cybozu.dev/u/Legacy_Account1740)\
**Post date:** [2018 年 1 月 25 日午前 12:28 UTC](https://community.cybozu.dev/t/topic/2812/2 "2018-01-25T00:28:11Z")

</div>

maru様

お世話になっております。 cstapの江田と申します。

[nth-child](http://www.htmq.com/selector/nth-child.shtml)という疑似クラスを用いるとうまく指定できるかと思います。

```
th:nth-child(2),td:nth-child(2),th:nth-child(3),td:nth-child(3){background-color:#FFFF99;}th:nth-child(4),td:nth-child(4){background-color:#9999FF;}th:nth-child(5),td:nth-child(5),th:nth-child(6),td:nth-child(6){background-color:#FF9999;}

```

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1792](https://avatars.discourse-cdn.com/v4/letter/l/b5ac83/32.png) [@Legacy\_Account1792](https://community.cybozu.dev/u/Legacy_Account1792)\
**Post date:** [2018 年 1 月 25 日午後 1:51 UTC](https://community.cybozu.dev/t/topic/2812/3 "2018-01-25T13:51:58Z")

</div>

江田様

こちら[nth-child](http://www.htmq.com/selector/nth-child.shtml)という疑似クラスに関して教えていただきありがとうございます。

早速設定してみたところ、レコードに登録してあるデータのほうも色が変わってしまうようでした。

また、一覧が複数ある場合には、列の数が異なるため、設定したい色とは異なる色が反映されてしまいました。

もし可能でしたら、下記をご教授いただけないでしょうか？

①項目名の箇所のみ対応するにはどのように記述すればよいでしょうか？

DOMで指定となるのでしょうか？その場合のクラスは、ディベロッパーツールで確認するかと思いますが、

以下のコードだと色が反映されませんでした。

こちらは記述が何か間違っているのでしょうか？

\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*

recordlist-header-cell-gaia label-5520057 recordlist-header-sortable-gaia recordlist-sort-desc-gaia  
recordlist-header-cell-gaia label-5520065 recordlist-header-sortable-gaia recordlist-sort-desc-gaia  
recordlist-header-cell-gaia label-5520083 recordlist-header-sortable-gaia{  
background-color: #7FFFD4;  
}

\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*

ディベロッパーツール上でElementのところに「background-color: #7FFFD4;」を入れると画面上はうまく反映が

できていたのですが、もしかしたらクラス名が違うのか、あるいは記述の仕方が違うのかがわかりませんでした。

アドバイスいただけると幸いです。

よろしくお願いいたします。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1740](https://avatars.discourse-cdn.com/v4/letter/l/ed8c4c/32.png) [@Legacy\_Account1740](https://community.cybozu.dev/u/Legacy_Account1740)\
**Post date:** [2018 年 1 月 26 日午前 12:10 UTC](https://community.cybozu.dev/t/topic/2812/4 "2018-01-26T00:10:52Z")

</div>

maru様

お世話になっております。 cstapの江田です。

項目名の箇所のみ対応する場合は、単純にtdの指定してを外して以下のようになります。

```
th:nth-child(2),th:nth-child(3){background-color:#FFFF99;}th:nth-child(4){background-color:#9999FF;}th:nth-child(5),th:nth-child(6){background-color:#FF9999;}

```

複数の一覧に対応させるのであれば、JavaScriptで書いてしまった方が楽そうですね。

```
(function(){"use strict";kintone.events.on("app.record.index.show",function(event){varcolors={"開催日":"#FFFF99","作成者":"#FFFF99","共有事項":"#9999FF","議論や相談事項":"#FF9999","報告":"#FF9999",};[].forEach.call(document.getElementsByClassName("recordlist-header-cell-gaia"),function(th){varcolumn=th.getElementsByClassName("recordlist-header-label-gaia")[0];if(column)th.style.background=colors[column.innerText];});returnevent;});})();

```

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1792](https://avatars.discourse-cdn.com/v4/letter/l/b5ac83/32.png) [@Legacy\_Account1792](https://community.cybozu.dev/u/Legacy_Account1792)\
**Post date:** [2018 年 1 月 26 日午後 1:41 UTC](https://community.cybozu.dev/t/topic/2812/5 "2018-01-26T13:41:05Z")

</div>

江田様

お世話になります。

こちらJavaScriptの方法をアドバイスいただきましてありがとうございます!!

一覧ごとに項目の列番号が違ったので、こちらのJavascriptの方法を教えていただき、無事にやりたいことができました。

ありがとうございます。

引き続き、勉強続けていきます。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1792](https://avatars.discourse-cdn.com/v4/letter/l/b5ac83/32.png) [@Legacy\_Account1792](https://community.cybozu.dev/u/Legacy_Account1792)\
**Post date:** [2018 年 1 月 27 日午前 1:50 UTC](https://community.cybozu.dev/t/topic/2812/6 "2018-01-27T01:50:30Z")

</div>

江田様  
もしお分かりでしたらご教授いただきたいのですが、上記の画面上での色付けはJSにて設定できました。  
これをエクセルでダウンロードした際にも同様の色がついた状態で書き出しをするのは、キントーンの仕様上無理なのでしょうか？  
あるいは、カスタマイズすれば可能な範囲なのでしょうか？  
もし後者の場合は、どのように対処すべきすか？  
初心者なので難易度が高ければ諦めようと思いますが、そもそも仕様上不可なのかどうかは今後のためにも知りたく…。

お分かりの範囲で構いませんので教えていただけないでしょうか。  
よろしくお願いいたします。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1740](https://avatars.discourse-cdn.com/v4/letter/l/ed8c4c/32.png) [@Legacy\_Account1740](https://community.cybozu.dev/u/Legacy_Account1740)\
**Post date:** [2018 年 1 月 29 日午前 8:56 UTC](https://community.cybozu.dev/t/topic/2812/7 "2018-01-29T08:56:49Z")

</div>

Maru様

お世話になっております。  
cstapの江田です。

不可能ではありませんが、レコードの取得やエクセル出力のコードを書かなければいけないので、上記のコードと比べれば難易度は高いです。

「JavaScript エクセル出力」などで検索すれば、色々と出てくるので調べてみると良いと思います。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1792](https://avatars.discourse-cdn.com/v4/letter/l/b5ac83/32.png) [@Legacy\_Account1792](https://community.cybozu.dev/u/Legacy_Account1792)\
**Post date:** [2018 年 2 月 3 日午前 5:55 UTC](https://community.cybozu.dev/t/topic/2812/8 "2018-02-03T05:55:31Z")

</div>

江田様  
こちら教えてくださりありがとうございます。  
もう少しJSも勉強した後でまたチャレンジしてみます！  
ありがとうございました。

---

<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:** [2025 年 8 月 28 日午前 2:12 UTC](https://community.cybozu.dev/t/topic/2812/9 "2025-08-28T02:12:17Z")

</div>

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