CSSの優先順位とは？CSSカスタマイズがうまくいかないときに確認したい基礎知識！

CSS（スタイルシート）を編集しているときに、書き足したCSSがなぜか適用されなくて困ってしまう……こんなトラブルは、個人サイト運営あるあるではないでしょうか。

CSSが適用されない理由にはさまざまありますが、そのほとんどがCSSの優先順位が間違っていることが原因で起こります。つまり、CSSの優先順位さえ正しく理解すれば、CSSをサクサク編集できるということです。

この記事では、CSS初心者向けに、CSSの優先順位についてわかりやすく解説します。

【初心者向け】CSS編集の基本を覚えてサイトのデザインを自分好みにアレンジしよう

CSSを編集することができれば、テンプレートから作ったサイトでもオリジナリティをもたせることができます。この記事では、CSSに触れたことがない、けれどサイトにもっとオリジナリティを持たせたい！という方向けに、CSSの編集方法を紹介します。覚えるのはそれほど難しくありません。ぜひ挑戦してみて下さい！

CSSの変更がブラウザで反映されないときにチェックすべきこと

CSSを変更したのに、サイトに上手く反映されないときにチェックすべき項目を紹介します。（１）ブラウザにキャッシュが残っていないか、（２）CSSの文法は正しいか、（３）CSSの優先度は正しいか、（４）レスポンシブ対応の記述になっていないか。具体的なチェック方法に加え、必殺技ツールも紹介しています。

CSSの基本ルールをおさらいしよう

まずは、CSSの基本的なルールをおさらいしましょう。

CSSでは、スタイル（デザイン）を適用したいセレクタ（要素）を指定する

CSS（スタイルシート）では、「どのHTML要素にデザイン（CSS記述）を当てるか」を指定する必要があります。そのときに使うのがセレクタと呼ばれるものです。

たとえば、次のようなコードがあるとします。

p {
color: red;
}

この例ではpがセレクタです。つまり「すべての<p>タグの文字を赤くする」という指定になります。

セレクタには、HTMLタグそのもの（タグセレクタ）のほかに、クラス名.exampleやID名#example、特定の条件a:hoverなどに合わせたものもあります。

CSSを書く場所もいろいろある

HTMLテンプレートでは基本的に、style.cssのような名前の外部ファイルにCSSを記述し、それをHTMLファイルに読み込ませる形でスタイルを適用します。

その他にも、CSSを記述、適用する方法はあります。

• HTMLファイル内に、style属性として書き込む（インラインスタイル）
• HTMLファイル内に、<style>タグとして書き込む
• CSSファイルを読み込む（style.cssなどの外部ファイル。前述した一般的な方法）

CSSの優先順位の基本ルール

優先度が同じ場合は、下に書いたものが優先される

最初に覚えておくべきことは、CSSでは、優先度の同じ指示があった場合には下に書いたものが優先されるということです。例えば、以下のような記述があったとしましょう。

p { color:red; }
p { color:blue; }

この場合は、pという同じセレクタに対して異なる指示が書かれていますが、下段のcolor:blue;が優先されます。

セレクタの優先度は、ID＞クラス、属性、疑似クラス＞タグセレクタ

セレクタ指定の優先度は、以下の通り。

• ID指定が最も優先度が高い
• クラス、属性、疑似クラスが次に優先度が高い
• タグセレクタは優先度が低い

つまり、以下のような記述がある場合は……どうなるでしょうか？　考えてみてください。

p { color:red; }
p.abc { color:green; }
p#xyz { color:blue; }

この場合は、以下のような処理になります。

• クラスやIDを持たないp要素は、color:red;
• abcクラスを持つp要素は、color:green;
• ID「xyz」を持つp要素は、color:blue;
• abcクラスと、ID「xyz」の両方を持つp要素は、color:blue;

インラインスタイルはID指定よりも優先される

セレクタ指定で最強のID指定ですが、インラインスタイルはID指定よりも優先されます。インラインスタイルというのは、HTML記述において、以下のような記述のことです。

<p id="xyz" style="color:pink;">ここの文字色はpinkになります</p>

pタグの中にstyle="color:pink;"と書かれていて、HTML記述の中で直接スタイルが指定されていますね。この場合、IDセレクタにcolorが指定されていても無視されて、インラインスタイルが優先されます。

!importantをつけると全てに優先される

インラインスタイルよりもさらに優先されるのが、!importantを使用した場合です。例えば、以下のような記述がある場合を考えます。

p#xyz { color:blue !important; }

<p id="xyz" style="color:pink;">ここの文字色はpinkになります</p>

p要素に対して、ID指定とインラインスタイルが指示されています。これだけなら、インラインスタイルであるcolor:pink;が優先されますが、CSSで!importantが記述されているため、実際にはp#xyzに対して指示されたcolor:blue;が適用されます。

この場合はどっちが優先される？

では、以下のような場合は、どちらの記述が優先されるでしょうか？　考えてみましょう。

• .box と div.box
• p と header p
• div.box と div.box.red
• div.box.red と div.box#blue

ちなみに、正解は以下の通りです。

• .boxよりもdiv.boxが優先される（ただのboxクラスより、boxクラスのついたdiv要素という指定の方が詳細だから）
• pよりもheader pが優先される（ただのpよりも、header要素の中のpという指定の方が詳細だから）
• div.boxよりもdiv.box.redが優先される（複数のクラスを持つdiv要素まで絞られるから）
• div.box.redよりもdiv.box#blueが優先される（クラスセレクタよりもIDセレクタのほうが優先されるから）

どうしてもCSSの書き方が分からない場合は……

ここまででCSSの優先順位を見て勉強してきたけど、どうしても作業中のCSSが適用されなくて困ってる！　そんなときにはデベロッパーツールを使ってみましょう。

【動画・画像あり】HTMLテンプレートカスタマイズに不可欠！デベロッパーツールの使い方を解説！

CSSを編集してサイトをカスタマイズしたいけど、どういじればいいの？思うようにカスタマイズできない……。デベロッパーツールを使えば一発解決！ブラウザからCSSの編集・プレビューをすることができる、Web制作者にとっては心強いツールです。この記事ではデベロッパーツールの使いかたを画像付きで解説します。

なんだか難しそうに見えるかもしれませんが、デベロッパーツールを使いこなせるようになれば、「ここのデザインを変えたいけど、どうCSSを編集したらいいのか分からない……」という場面はほぼなくなります！　CSS編集を頑張りたい方には必要不可欠のツールです。ぜひ触ってみてください。

この記事を書いた人

ガタガタ

このサイトと、このサイトの掲載記事のほとんどと、このサイトで配布しているプログラムやテンプレートのすべてを作った人。絵を描いたり、文章を書いたりして暮らしています。

• 
•