ホームページ制作の兵法

ホームページ制作の兵法

マークアップエンジニアによるHTML,CSSなどサイト制作の基礎知識

指定したCSSが適用されないときにチェックするCSSの優先順位の4つの要素

指定したCSSが適用されないときにチェックするCSSの優先順位の4つの要素

覚える理由

後から書いたCSSが適用されない原因のひとつだからです。

更に、CSSの優先順位を把握することで運営のし易いサイト設計をするためにCSSの優先順位を学びます。

 

 

f:id:site100:20170427061759j:plain

 

CSSの優先順位に影響する要素

1. 誰の指定か

2. 詳細度

3. 指定の順序

4. important

 

1. 誰の指定か

ブラウザーのデフォルトのスタイルと閲覧者が設定出来るスタイルと製作者によるスタイルがあるので何が影響しているのか注意します。

 

2. 詳細度

セレクタの書き方により優先順位が変わります。

CSSの優先順位<></h1></div>

この時、

div#header h1 > #header h1 > di.header h1 > .header h1 > div h1 > h1 > *

の順で優先度が変化します。この優先度は指定の順序にかかわりません。

 

3. 指定の順序

原則として、よりタグに近く、より後から読み込まれたスタイルが優先されます。

 HTMLファイルのヘッダーに記述する外部から読み込むCSS
それより後に、styleタグを使って記述するCSS。更にbody内のタグに直接記述するCSSの優先度は以下の通りです。

タグに直接記述(最優先) > ヘッドのstyleタグに記述 > 外部から読み込む

このように、タグに近いスタイルが反映されます。
ただし、IDやクラス名を追加したり、要素名を追加することで、先に読み込まれたスタイルが反映されます。

 

4. important命令

指定の順序を覆すことのできる魔法の言葉

 

制御しやすい、運用しやすいプロパティの指定を目指すため

セレクタに強い指定をしないこと!
CSSでプロパティに値を設定するとき、idでプロパティを選んだらどうなるか。
後に記述するとき、クラス名ではオーバーライドが出来ないため、id指定が多くなります。
それを!importantで上書きしたら、以降!importantでしかプロパティを選べなくなります。
なるべく最小限の上書きをしましょう。

スタイルが当たらない 優先順位を検証する 親要素から指定? クラス名?
必ずしも後に記述したものが適用されるわけではない

・開発者モードで邪魔している指定を把握→継承は表示されないので親要素やスタイルシートもチェック

適用されない理由
記述ミス、記述より強い指定で邪魔されている、

原因がわかったら、より強い状態で書き込む(スタイルを制御すること)

反映されたかチェック

 

まとめ


ポイントは要素の状態を知ることが重要
形が違う、動きがちがう → どこから、何の指示があるのか?
打ち消せない指定は存在しない!原因を追究しよう!

 チェックポイントは4つ。

1. 誰の指定か

2. 詳細度

3. 指定の順序

4. important

そして、検証モードを使いこなそう!