# cssでの行の色指定について **URL:** \ **Category:** kintone 開発相談\ **Created:** [2021 年 12 月 8 日午前 1:32 UTC](https://community.cybozu.dev/t/topic/5534 "2021-12-08T01:32:09Z")\ **Posts on this page:** 5\ **Page:** 1
**Author:** ![Legacy\_Account409](https://avatars.discourse-cdn.com/v4/letter/l/9d8465/32.png) [@Legacy\_Account409](https://community.cybozu.dev/u/Legacy_Account409)\ **Post date:** [2021 年 12 月 8 日午前 1:32 UTC](https://community.cybozu.dev/t/topic/5534/1 "2021-12-08T01:32:09Z")
以前「[一覧画面の列固定をすると、スクロールした列の内容が透けて見える](https://community.cybozu.dev/hc/ja/community/posts/4410735416857-%E4%B8%80%E8%A6%A7%E7%94%BB%E9%9D%A2%E3%81%AE%E5%88%97%E5%9B%BA%E5%AE%9A%E3%82%92%E3%81%99%E3%82%8B%E3%81%A8-%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB%E3%81%97%E3%81%9F%E5%88%97%E3%81%AE%E5%86%85%E5%AE%B9%E3%81%8C%E9%80%8F%E3%81%91%E3%81%A6%E8%A6%8B%E3%81%88%E3%82%8B)」という投稿をさせていただきましたが、解決していない状況です。 「kintone」APIのサポート対象外ではあるものの、kintoneのテクニカルサポートの担当者の方より以下のヒントをいただいたのでこれから設定をしようと考えています。   **「お知らせいただいた情報を元に、弊社にて動作確認を行ったところ、お知らせの CSS を設定した場合、JavaScript カスタマイズを設定しなくても、スクロール時に列が透ける事象を確認いたしました。** **上記事象について、弊社にてお調べしたところ、CSS では、position プロパティに “sticky” を設定して要素を固定した場合、該当要素に背景色を設定していない状態では、別の要素が重なった際に、要素が重なって表示されるようです。** **CSS で固定した要素に背景色を設定していない状態で、元の要素と表示が重なったことで、スクロールした列の内容が透けて見えている状況と存じます。** **なお、上記事象につきましては、固定する要素に背景色を設定することで、別の要素と重なっても、スクロールした列の内容を透けさせずに、固定した要素を表示させることが可能なようです。** **   ※ お知らせのように CSSファイルで「background-color: #ffe44d;」を設定した場合、固定した要素にも背景色が設定されているため、重なった要素が透けて表示されないと存じます。** **そのため、固定する要素の background-color プロパティに、JavaScript で設定している背景色と同じ値を設定することで、ご希望の表示を行うことが可能と考えられます。」**   行ごとに完了状況を確認するため、Javascriptで行の色変更を行っているのですが、cssでも状況に応じての色変更をできるものなのでしょうか。 ご存じの方ご教授いただければ幸いです。よろしくお願いいたします。 ---
**Author:** ![Legacy\_Account2476](https://avatars.discourse-cdn.com/v4/letter/l/c0e974/32.png) [@Legacy\_Account2476](https://community.cybozu.dev/u/Legacy_Account2476)\ **Post date:** [2021 年 12 月 9 日午前 1:10 UTC](https://community.cybozu.dev/t/topic/5534/2 "2021-12-09T01:10:49Z")
kobaharu 様   こんにちは。 elStatus[i].parentNode で tr 要素にスタイルを適用するのではなく、td 要素にひとつひとつに適用したら解消されるかと思います。 例えばの変更例だけお伝えします。 ``` let a = elStatus[i].parentNode.cells; for (let j = 0; a.length > j; j++) a[j].style.backgroundColor = bgColor; ``` ただ上記の方法だと header 要素に適用されないので header はどうするのかだとかその他調整しなければいけない箇所が出てくると思います。 そちらは、ご自身で解消できるかと思いますので考え方だけ理解して頂ければ幸いでございます。 ---
**Author:** ![Legacy\_Account409](https://avatars.discourse-cdn.com/v4/letter/l/9d8465/32.png) [@Legacy\_Account409](https://community.cybozu.dev/u/Legacy_Account409)\ **Post date:** [2021 年 12 月 13 日午前 2:10 UTC](https://community.cybozu.dev/t/topic/5534/3 "2021-12-13T02:10:39Z")
新屋 育男 様 コメントありがとうございました。 おっしゃる通り、スタイルの適用の方法を変更したらうまくいきました。 ヘッダーについてですが、私だけの力では理解不足で解消できず…。 cssでヘッダーの色のみ変更することは可能なのでしょうか？ご存じでしたら教えていただければ幸いです。 よろしくお願いいたします。   ---
**Author:** ![Legacy\_Account2476](https://avatars.discourse-cdn.com/v4/letter/l/c0e974/32.png) [@Legacy\_Account2476](https://community.cybozu.dev/u/Legacy_Account2476)\ **Post date:** [2021 年 12 月 13 日午前 4:52 UTC](https://community.cybozu.dev/t/topic/5534/4 "2021-12-13T04:52:40Z")
kobaharu 様 こんにちは。 \>cssでヘッダーの色のみ変更することは可能なのでしょうか？ 可能です。 tableheader の th 要素 class へ css に色を宛てるだけで解消すると思います。 それも大変そうでしたら、 th 要素に css で色を宛てるだけでもとりあえず想定通りになるかと思います。 ``` th {background-color: #fff;} ``` ご確認を宜しくお願い致します。 ---
**Author:** ![Legacy\_Account409](https://avatars.discourse-cdn.com/v4/letter/l/9d8465/32.png) [@Legacy\_Account409](https://community.cybozu.dev/u/Legacy_Account409)\ **Post date:** [2021 年 12 月 13 日午前 5:52 UTC](https://community.cybozu.dev/t/topic/5534/5 "2021-12-13T05:52:58Z")
新屋 育男 様 うまくいきました。感謝です。ありがとうございます。