【CSS】タグに「style」で書式を指定しているのに反映されずに苦労した件

CSSで書式が調整されているブログに記事を載せました。
ここではないところで、各種の調整は誰か別の人が行ったようです。
当然のことながら、背景色や文字の大きさなどがCSSで指定されています。

記事の投稿に際して、一部の背景色を標準ではないものに変更したかったのですが、コード指定がうまくいかずに苦労したという話です。
うまくいかなかった要素は2つあったのですが、どちらも理解不足が原因だと思います。
忘れないように記録を残します。

困ったこと
試したこと
原因
解決策
まとめ

困ったこと

記事を投稿したブログでは、ulに対して背景色をCSSで指定していました。
今回の文脈では、リストの背景は「なし」にしたかったので、ulタグにstyleでCSSを書いて、見た目を調整しようとしたのです。

具体的には以下のような感じです。

<ul style="background-color: #fff;">
  <li>・・・</li>
    ・・・（略）・・・
  <li>・・・</li>
</ul>

CSSは、タグに指定する「style」オプションが最優先という認識でした。
そのため、上記のような指定を入れたのですが、背景色が白くなりませんでした。。

試したこと

原因追及のために、いくつか指定を変えてみたり、ソースを調べてみたりしました。

すべて初期化！

コードの指定だけで分からないかと、やや横着な考えでいくつか指定を変えてみました。

有益だった指定は、「all: initial;」だと思います。
これは効きました。

<ul style="all: initial;">
  <li>・・・</li>
    ・・・（略）・・・
  <li>・・・</li>
</ul>

効いたのですが、効き過ぎでしたｗ
当然のことながら、marginやpaddingや文字色まで変わってしまって、かなり浮いた存在に。。ｗ

ソースを見た

ダメだろうなとは思いながらも、ソースを見てみました。

右クリック → ページのソースを表示

分かっていたことですが、CSSはlinkで複数指定されていて、力ずくで対象部分を見つけることは非常に困難な様相でした。。
特に他人が調整してドキュメントもないものなので、何が何だか分かりませんでした。

王道のデベロッパーツール（Chrome）

あまり使ったことがなかったツールに頼りました！
ブラウザはChromeです。

ツールの起動方法は、

F12

もしくは

画面右上の3つの点（メニュー） → その他のツール → デベロッパーツール

です。

対象ページを表示した状態で、確認したい部分で右クリックして「検証」で起動するのが最も効率がよいと思います。

これで、肝心の指定部分を見つけられました。
書かれているCSSを見て、原因もすぐに分かりました！

原因

原因は「!important」指定でした。
以下のような感じで書かれていました。

xxxxxx ul {
    backgroud-color: #cccccc !important;
    ・・・（略）・・・
}

そこまでリストの背景が重要だとは思えないのですが、こうだったのです。

解決策

原因が分かったので対策をしてみたのですが、一筋縄ではいきませんでした。。
問題点は「2つの要素」だったのです。

1つは、タグのstyleにも!importantを指定することで対策しました。

<ul style="background-color: #fff !important;">
  <li>・・・</li>
    ・・・（略）・・・
  <li>・・・</li>
</ul>

ただしこれでは解決できませんでした。
色コードの指定方法にも問題があったのです。

3文字指定は、ルールとしては問題ないのですが、!important指定との相性があるようです。

<ul style="background-color: #ffffff !important;">
  <li>・・・</li>
    ・・・（略）・・・
  <li>・・・</li>
</ul>

詳しく調べていないので何とも分かっていませんが、実際の環境ではこれで解決しました。
親の指定方法に寄り添う必要があるのでしょうか。。

ちなみに、bodyの背景色が白だからこういう指定になっています。
今回の目的は、リストの背景色を「なし」にすることです。
後から考えて、より正しい指定は色を「initial」にすることだと気づきました。

<ul style="background-color: #initial !important;">
  <li>・・・</li>
    ・・・（略）・・・
  <li>・・・</li>
</ul>

上記を今回の最終形態とします。

まとめ

今回も、ちょっとしたことでけっこうな時間を要してしまいました。
人間はこうやって賢くなっていくのでしょうかｗ

そもそも、タグにstyleでCSSを指定しようとしている時点で優先度の問題で、!important指定を考慮しなかったことに大きな問題がありました。
認識漏れに注意します。

別の収穫として、Chromeのデベロッパーツールを活用できた点があります。
開発から離れて、あまりソースをじっくり見ることがなくなっていました。「原理な機能が備わっているらしい」程度の認識しかなく、具体的な使い方はよく分かっていませんでした。実際に使ってみると、たしかにとても便利です！
いつもソースを見てしまっているので、これからはツールを活用していこうと思います。