【入門編】インラインスタイルの優先度 – CSS実践ガイド

こんにちは。CSSの世界へようこそ。
日々、画面の中で思い通りに色が塗れなかったり、配置がズレたりして「CSS、なんて気難しいやつなんだ！」と頭を抱えていませんか？その気持ち、痛いほどよくわかります。私も駆け出しの頃は、CSSの優先順位という「見えないルール」に何度も裏切られてきました。

今日は、そんな数あるルールのなかでも、「最強の権力者」であるインラインスタイルについてお話しします。これを知っておくだけで、CSSの迷宮から抜け出すヒントが見えてくるはずですよ。

—

まず、Webページのデザインを決めるには、大きく分けて2つの方法があります。

1. CSSファイルで管理する方法： 外部から「君は青色だよ」と指示を出す（クラスやIDなど）
2. HTMLに直接書く方法： 要素のすぐ隣に「君は赤色だよ」と書き込む（インラインスタイル）

この2番目、`style=”…”` とHTMLタグの中に直接書くスタイルが、実はCSSの世界では「最強」なんです。

これを「学校の校則」に例えてみましょう。

どちらが優先されるか、もうお分かりですよね？全校生徒へのルールよりも、今まさに目の前で下された「直接の命令」の方が、その子にとっては絶対的なのです。

どんなに素晴らしいCSSファイルを作っても、HTMLに直接書かれたスタイルには勝てません。これが、初心者が最初にぶつかる「CSSが効かない！」という壁の正体です。

—

まずは、このコードを見てみてください。CSSで「文字を青くする」と書いているのに、インラインスタイルが邪魔をして青くならない例です。

私はCSSファイルじゃなくて、直接「赤」と言われたから赤くなるよ！

ご覧の通り、`.my-text` クラスには `blue` を指定しているのに、画面上の文字は無情にも `red` になってしまいます。CSSファイル側でいくら `!important` を使って足掻こうとしても、インラインスタイルを消さない限り、この「赤」の呪縛からは逃れられません。

—

「じゃあ、全部インラインスタイルで書けば最強じゃないか！」と思うかもしれませんが、それは絶対にNGです。

なぜなら、後から修正するのが地獄だからです。もし100ページあるサイトの全部の色を後から変えたくなったとき、1つずつHTMLを開いて書き換えるなんて、想像するだけで恐ろしいですよね？

CSSの基本原則は、「見た目のルールは一箇所（CSSファイル）にまとめる」こと。インラインスタイルは、あくまで「どうしてもこの一箇所だけ、例外的に見た目を変えたい」という時のための、最後の切り札として取っておくのがプロの流儀です。

—

ここまで読んで「なんだか難しそう…」と感じた方も安心してください。

現場のプロでも、急いでいる時に「あれ？なんで色が変わらないの？」と焦って、調べたらインラインスタイルが原因だった…なんてことは日常茶飯事です。CSSは、「なぜ思い通りにならないのか」を突き止めるプロセスそのものが、一番の勉強になります。

もし色が変わらなくて悩んだら、まず「HTMLタグの中に直接 `style` って書いてないかな？」と探してみてください。その一歩が、あなたを脱・初心者へと導く大きなステップになります。

CSSは、あなたの思いを画面に映し出すための素晴らしいツールです。焦らず、少しずつ仲良くなっていきましょうね。またいつでも聞きに来てください。応援しています！