- オススメCSS解説本
- CSSのメリット
- 利用手順
- HTMLとCSSの関係
- スタイル設定
- 継承
- カスケード
- 疑似クラスと疑似要素
- マージンとパディング
- 数値単位
- メニュー作成
- コンテンツ作成
- タイトル作成
カスケードについて どの指定を適用するかの優先順位
カスケードってなぁに？？
適用されるスタイルの出所は、３つあります。（つまり、３種類のスタイルシートがある、ということです。）
１）HTML作成者によるスタイル設定（文書作成者の通常宣言）
２）利用者（ユーザー）がUA（ブラウザ等）にスタイルを設定（ユーザーの通常宣言）
３）UA（ブラウザー等）の初期設定（デフォルトの通常宣言）
これらの優先順位は、 １） ＞ ２） ＞ ３） となっています。優先順位の高い設定は、低い設定を上書きします。しかし、優先順位が付いていても、これら３つのスタイルシート間でスタイルの衝突が起こったり、また、同じスタイルシート内で衝突が起こることも多々あります。その時に、どのスタイルを適用するのか、優先順位を決める処理を、｢カスケード処理｣と言います。｢カスケード処理｣には、順序があります。
■ カスケード処理の順序
① 出所による優先順位を決める
② 詳細度による優先順位を決める
③ 位置による優先順位を決める
この順番で処理されます。それぞれの処理を以下で詳しく説明します。
① 出所による優先順位を決める ： !important に注意
出所による優先順位は、step1の冒頭でも記したように、
文書作成者の通常宣言＞ユーザーの通常宣言＞デフォルトの通常宣言
と、なります。ここで注意すべきは、｢!important｣です。これを使うと、優先順位が変わります。ユーザーのアクセスビリティ向上のために作られたものですが、作成者側が、ある宣言をほかの規則集合の一段上に置いておく意味でも使用出来ます。
さて、｢!important｣を使うと、どのような順位になるのか、下記に説明します。
ユーザ定義の最重要宣言＞文書作成者の最重要宣言＞文書作成者の通常宣言＞ユーザの通常宣言＞デフォルトの通常宣言
と、なります。つまり、作成者は、どう足掻いてもユーザーの設定には、勝てないのです。
② 詳細度による優先順位を決める
それぞれのスタイル指定されたセレクタの詳細度（重み）を計算し、その値が大きいものが優先されます。詳細度は、下記式で求められます。
｢詳細度｣＝（ID属性の数）*100+（クラス属性の数）*10+（要素名の数）*1
上記式に当てはめて、いくつか例を挙げます。
● li { } について ： 1=0*100+0*10+1*1 詳細度は｢１｣
● ul li { } について ： 2=0*100+0*10+2*1 詳細度は｢2｣
● ul #test { } について ： 101=1*100+0*10+1*1 詳細度は｢101｣
● ul li#test { } について ： 102=1*100+0*10+2*1 詳細度は｢102｣
● #test { } について ： 100=1*100+0*10+0*1 詳細度は｢100｣
● ul ．test { } について ： 11=0*100+1*10+1*1 詳細度は｢11｣
● ul li．test { } について ： 12=0*100+1*10+2*1 詳細度は｢12｣
● ．test { } について ： 10=0*100+1*10+0*1 詳細度は｢10｣
※style属性（HTML内でタグに直接スタイル指定）によるスタイル指定は詳細度｢100｣になります。
③ 位置による優先順位を決める ： @import に注意
優先度が同じものは、後にくるものが優先されます。
<head>
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="Stylesheet" href="common.css" type="text/css">
<title>CSSを利用する</title>
<style type="text/css">
<!--
@import url "css/style.css";
h1 {
color : blue
}
-->
</style>
</head>
<body>
<h1>headline is blue</h1>
<p style="color : yellow">while the paragraph is green.</p>
</body>
上記、赤字スタイルの優先順位
color : yellow ＞ color : blue ＞ css/style.css ＞ common.css
つまり、
開始タグのstyle属性＞style要素＞＠import規則＞外部スタイルシート（link rel=・・・）
という優先順位になります。ここで注意すべきは、｢@import ｣です。
ここからは、｢@import ｣されたCSSファイル内での解説になります。
以前、解説した『HTMLでCSSを使おう！ HTMLとCSSの関係 step4』を思いだしてください。 ⇒こちら
そこでの解説は、スタイルが指定されたCSSファイル（ common.css／contents.css／base.css ）を、１つのファイル（ style.css ）に｢@import ｣で記述し、HTML上でそのCSSファイル（ style.css ）を呼び起こすという話でした。それでは、下記のCSSフォルダ内、赤字に注目してください。
この場合、フォントサイズ１２pxかフォントサイズ１８pxか、どちらが優先されるのかが問題です。結論から言うと、１２pxが優先されます。HTML上に記述されるstyle.cssファイル内での優先度は、@importもpに設定されたスタイルも同じとなり、結果として、後に記述したpに設定されたスタイルが優先されるのです。