シリーズ第14回は、CSSのカスケードと詳細度についてです。ここを理解しておけば、CSSがうまく当たらないという時の原因究明が飛躍的に早くなります。ただ、この概念は複雑ですべてを説明したり理解するのは大変です。この記事では、ここだけおさえておけばほぼほぼOK！という点だけに絞って、かんたん解説します。
カスケードとは？
かんたんに言えば、CSSのスタイル適用の順序です。
後書き優先
基本的には、記述の後書きが優先されます。例えば、同じh1要素に対して以下のようにCSSでスタイルを記述したとします。
h1に対してcolorが3つ指定されています。この場合、一番最後に書かれているgreenが優先されるというわけです。後書き優先です。しかし、順序を決定する要素はそれだけではありません。
前回も少し出てきましたが、ブラウザがデフォルトでスタイルをあてていることがあります。これはuser agent stylesheetと呼ばれ、開発者ツールでも確認できます。このデフォルトのスタイルと自分（作成者：auther）が書いたCSSが重複することがあります。そういった場合、どのスタイルを優先するのか順位を決めているのがカスケードの概念です。
カスケード順
カスケードは複雑で理解するのが難しいです。でも、これまでのプログラミング講座で考えてきた通り、最初は基本的なことを知っていればOKです。分からない時に調べていけば、だんだん理解が深まります。
MDNでCSSのカスケードを調べると、カスケード順の表があります。
この表もすべてを説明するのは難しいですが、左側に1～8までの数字があります。数字が大きくなれば、それだけカスケード順が上がり、優先して適用されます。
覚えておきたいのは、このうち1と3です。先程も触れたユーザーエージェント（ブラウザのデフォルト）て指定されているスタイルがあっても、作成者（デベロッパーである自分）が書いたスタイルのほうが優先されます。
ちなみに、2のユーザーは、ブラウザのユーザーのことです。ブラウザ上やブラウザの拡張機能でスタイルを指定することが含まれます。ただ、作成者のほうがカスケード順で優先されるので、それほど気にすることはありません。
- ユーザーエージェント（ブラウザのデフォルト）
- ユーザー（ブラウザのユーザー）
- 作成者（デベロッパーである自分）
という順番で優先されることが分かっていればOKです。
重要度の欄に、!important と書かれています。優先順位の5～7の部分です。これは、推奨されていない方法ですが、!important でスタイルを指定すると normalよりも優先されるということです。最終手段的な書き方で多用してはならない方法ですので、ここで覚える必要はありません。そんな説明もあったな…くらいで記憶に留めておけば大丈夫です。
簡単にまとめてみると、最初からユーザーエージェントでスタイルが指定されていても、作成者である自分がスタイルを後書きすれば、そのスタイルが優先されるととらえておけばOKです。裏を返せば、自分がスタイルを指定していないのに意図しないスタイルが適用されている場合、ユーザーエージェントを疑ってみると良いでしょう。これは前回の講座で解説した点です。
しかし、スタイルの適用順位に影響するのはカスケードだけではありません。次に説明する詳細度が関係してきます。
詳細度とは？
これは、 複数のスタイルが指定された場合の優先度のことです。実際にどのスタイルを適用するかをブラウザが判断するための決まりです。例えば、同じ要素に複数のセレクタでスタイルが指定されている場合、どのスタイルを優先するのかを決定するランク付けのようなものです。
詳細度の順位
覚えておきたいのは、以下の順位です。
- idセレクター
- classセレクター
- 要素型セレクター
id ＞ class > 要素 の順で、idが一番スコアが高く優先されるということです。
MDNのカスケードと継承を解説したページには、次のようなランキングの表があります。
ちょっと分かりにくい表かもしれませんが、簡単にランキングすると以下のようになります。
1点：要素セレクター（h1）
10点：classセレクター
100点：idセレクター
1000点：インラインスタイル（style）
スコアが高い順に優先されて適用されるということです。
例で説明します。
HTML：
h1要素にidとclassが付けられています。これにスタイルをあてます。
CSS：
カスケードの時に説明した通り、基本的には後書きが優先されるので、h1がgreenになるように思えるかもしれません。しかし、詳細度を加味して適用されるスタイルが決定します。
詳細度の順位では、idセレクターが一番スコアが高く（100点）で優先されます。そのため、このファイルを読み込むと、ブラウザ上ではidセレクターで指定されているblueが優先されます。h1の「プログラミング講座」は青色になるということです。
ちなみに、スコア表の一番下に「スタイルなし、要素のstyle属性にルールがある」が1000点になっています。つまり、HTMLへインラインでスタイルを記述するのが詳細度では一番高いランクになります。コードの可読性も関係するので多用しないかもしれませんが、覚えておくと良いですね。
スタイルのリセットの裏技
いろいろなスタイルが指定されているところを一度リセットしたい、ということがよくあります。その場合に使うのが、次のプロパティと値です。
all: unset;
特定のセレクターにプロパティとして、all: unset; を指定すると、スタイルのリセットが可能です。時々使うテクニックですので、覚えておくと便利ですね。
まとめ
シリーズ記事 初心者もできる！プログラミング基礎講座【第14回】はいかがでしたか。今回は、CSSのカスケードと詳細度についてかんたん解説してきました。
基礎的なことだけでしたが、これが分かっているとスタイルがうまく当たらない場合に何が原因なのか見極めやすくなります。
では、次回もお楽しみに！