スタート!CSS入門

セレクタの詳細度

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
様々なセレクタでスタイルを指定していると、スタイルが競合して意図通りに適用されないことがあります。セレクタの詳細度を理解すれば、そのような事態に陥ることはないでしょう。
講師:
08:35

字幕

このレッスンではセレクタの詳細度について紹介します。様々なセレクタでスタイルを指定しているとスタイルが競合して意図通りに適用されないことがあります。セレクタの詳細度について理解しておくとそのような事態に陥ることもないでしょう。CSS のセレクタには要素名のみを指定する方法やID,クラスなどを使って汎用的に指定する方法セレクタ同士を組み合わせる方法など様々な指定方法があります。ここでは一つの要素に対して複数の方法でセレクタを用意しそれぞれで別々のスタイルを適用してみましょう。画面は HTML5 をベースに簡単なウェブページを記述しウェブブラウザで表示した状態です。CSS によってスタイルも設定されています。二つの見出しには山吹色が指定されています。この HTML の編集画面を開きます。先ほどの二つの見出しはそれぞれ h1 とh2 でマークアップされておりいずれも title クラスが設定されています。また、 h1 にだけcourse-title という ID が設定されています。この違いを覚えておいてください。CSS の記述を確認してみましょう。編集画面を開きます。先ほどの title クラスに対して文字色として山吹色が指定されています。 ここでh 要素だけに対して違う文字色を指定してみましょう。グレーを指定してみます。結果をウェブブラウザで確認してみましょう。グレーを指定したはずですが文字色は山吹色のままです。CSS には後から書かれたスタイルの方が優先されるというルールがありますので先ほどの書き方では一番最後に h1 要素に対して書いたグレーが適用されるように思われますが実際には一番最初に title クラスに対して書いた山吹色が適用されています。これがセレクタの詳細度による挙動です。CSS のセレクタにはそれぞれのセレクタで指定したスタイルが競合したときに詳細度の高いセレクタのスタイルを優先的に適用するというルールがあります。詳細度については後程詳しく説明します。もう一度 CSS の編集画面に戻り別の記述を加えてみましょう。HTML 側では h1 要素にだけcourse-title という ID が設定されていました。今度はこの course-title というID に対してスタイルを適用してみましょう。文字色を紫色にするという指定を加えます。記述する場所は先ほどと違ってtitle クラスより前にしてみましょう。結果をウェブブラウザで確認します。 今度は指定の順番が先にも関わらず新しく追加したスタイルが適用されました。このようにそれぞれのセレクタで指定したスタイルが競合したときにはスタイルの詳細度にしたがって適用順が決められます。詳細度の計算は四つのルールに従って求められます。まず、 CSS が HTML のスタイル属性で定義されている場合はa=1 とします。次にセレクタに含まれるID の数を b とします。ID の数が1つであれば b=1三つであれば b=3 となります。次にセレクタに含まれるクラス、疑似クラス属性セレクタの数を c とします。クラス、疑似クラス属性セレクタそれぞれを合計した数が c になります。最後にセレクタに含まれる要素と疑似要素の数を d とします。要素と疑似要素の数を合計した数が d となります。以上で求められる値をa b c d と連結したものが詳細度となります。なお、この計算方法は現在一般にもっとも普及しているCSS2.1 に基ずくもので他のバージョンでは若干異なることに注意してください。計算の結果この詳細度の値が大きいほど優先してスタイルが適用されることになります。例えば、 HTML のスタイル属性に直接 CSS を記述した場合はa=1 となりb c d いずれの数がいくらあったとしてもa の方が詳細度が高いことになりこの中ではもっとも優先して適用されます。 先ほどの例で確認してみましょう。h1 の見出し部分には上から順にID セレクタクラスセレクタHTML の要素をそれぞれ使ってスタイルが定義されています。合計三つのスタイルが競合していることになります。このときセレクタの詳細度は上から順にd=1c=1d=1 となります。詳細度は a b c d の順で優先順位が高くなりますのでb=1 と計算されるID セレクタの詳細度が一番高いことになりそこで指定しているスタイル、つまり紫色の文字色が優先されて表示されているということがわかります。CSS を書いていて指定した順番通りにスタイルが適用されない場合はこのセレクタの詳細度についてチェックしてみるとよいでしょうまとめです。このレッスンでは複数のセレクタでスタイルを指定したときに考慮されるセレクタの詳細度について学びました。

スタート!CSS入門

CSSはWebページに視覚的な表現、つまりスタイルを与えるための言語です。HTMLと組み合わせることで、より自由なデザインをウェブ上で実現できます。このコースでは初めてCSSに触れる方でも体系的な理解が得られるように、Web標準としての仕様の成り立ちからさまざまな文法、ボックスモデルなどの基本概念まで幅広い内容を解説します。

5時間21分 (71 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2014年11月25日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。