スタイルシート(CSS)ついては覚えたつもりなのに、うまく反映されない場合があります。原因の多くは優先順位を考慮していないからです。今回はCSSの優先順位を具体例も示して共有します。
このブログは内容がどんどん難しくなる、とか言われましたのでたまには基本に戻ってみようと思います。ちょうど最近読んだHTML5、CSS3関連の書籍にも詳しい説明がありましたので紹介します。
ゆめぴょんです。こんちはっ(^^)/
このブログ「ゆめぴょんの知恵」はWordPressというブログ・システム（CMSともいう）を使って作成しています。無料ブログの多くもWordPressを使ってるらしいです。
WordPressや無料ブログでは「テーマ」「デザイン」「スキン」などで見栄えを変更することが容易です。しかし細かい部分のデザインは自分でスタイルシート(CSS)を書いていくしかありません。
そしてCSSを更新してみるのですが、いつも優先順位を考慮するのを忘れてしまいます。また他人の作ったテーマなどを修正する場合も、このCSSの優先順位がネックになって、なかなか思い通りに更新できません。
最近はSCSS (SASS) などを使うと楽に開発できますが、最後にはCSSに変換されるため、細かい修正はCSSで行うこともあります。だから基本をおさらいしても損はないでしょう。
CSSを設定する者による優先順位
「CSSを設定する者」には大きく3者がいます。
- 制作者（ブログ・サイトの作成者）
- ユーザー（ブログ・サイトを閲覧する人）
- ブラウザのデフォルト
制作者とは例えばこのブログの場合は私「ゆめぴょん」です。ユーザーのCSSは利用者は少ないですが、フォントの種類や大きさにこだわりのある人は設定している場合があるようです。
ブラウザのデフォルトは、Chrome、Firefox、IEなどだけでなく、iPhoneのSafariやAndroid Browserなど、ブラウザの種類によって違います。この違いを吸収するためにCSSの初期化やノーマライズ化が必要です。いつか記事にしたいと思います。
CSS（スタイルシート）の優先順位
優先度の高い順番に並べます。上で説明したCSS設定者を明記します。
- （ユーザー）!important
- （制作者）!important
- （制作者）スタイルシート
- （ユーザー）スタイルシート
- （ブラウザのデフォルト）スタイルシート
どんな状況であっても「!important」は常に優先されます。具体的には下のように記述します。ただ!importantは拡張性、表示速度、視認性の面などから、なるべく使わない方が良いです。テスト用では便利です。
制作者スタイルシートの優先順位
上のリストはざっくりした優先順位です。3〜5のスタイルシートの中には更なる細かい優先度が設定されています。ここでは「3」の制作者CSSの詳細順位のみ示しますが、ユーザー、ブラウザの中も同じ順位設定です。
- HTMLのstyle属性に直接記述
- idセレクタ（例：#abc）
- classセレクタ（例：.xyz）。属性セレクタ、擬似クラスセレクタ
- 要素（タイプ）セレクタ（p、spanなど）
- 全称セレクタ（*）
優先度の高い順番に並べました。「3」の属性・擬似クラスセレクタについてはここでは説明しませんが、順位的にはこの位置です。2〜4については、さらに次のようなルールがあります。
- 同様のセレクタが含まれるなら、設定数の多い方を優先
- 同様のセレクタが含まれ設定数も同じなら、後に書いた方が優先
私がスタイルシートでよくする失敗に「後ろに書いたから優先されるかな」というやつ。後ろが優先されるのは、ここまで条件がそろわないとダメなんですね。
CSSの優先順位の具体例
まずどんなidやclassが設定されていても、style属性の内容が優先されます
[html]
<style type="text/css">
#abc { color: yellow; }
.xyz { color: orange; }
</style>
<p id="abc" class="xyz" style="color:red;">ここの色は「赤(red)」になります。</p>
[/html]
次のように設定していると、上から優先度が高いです。すなわち、id > class > タイプ（要素） > 全称。書く順番は全く関係しません。後に書いても先に書いても、idセレクタが最優先です。
[css]
#abc{ color: blue; } /* idセレクタ */
.xyz{ color: red; } /* classセレクタ */
p { color: black; } /* タイプセレクタ */
* { color: white; } /* 全称セレクタ */
[/css]
次のような場合はどうでしょうか。まずclassセレクタは1つずつです。タイプセレクタ(p)が1つ含まれている上の方が設定数が多いので優先されます。
[css highlight=”1″]
p.xyz { color: orange; }
.xyz{ color: red; }
[/css]
これはclassセレクタもタイプセレクタ(p)も1つずつで同数です。そういう場合は、後で定義された方（下）が優先されます。
[css highlight=”2″]
p.xyz { color: orange; }
p.xyz{ color: red; }
[/css]
最後にこれはどうでしょうか。タイプセレクタが多いのは3行目です。しかしidセレクタが含まれているので、1行目が最優先です。
[css highlight=”1″]
#abc { color: blue; }
.xyz{ color: red; }
p.xyz { color: orange; }
[/css]
まとめ：今日のゆめぴょんの知恵
こうやってあらためてスタイルシートを考えてみると複雑ですね。仕事などで複数人で開発する場合には、最初のルール作りがとても重要です。
CSSを使ってブログ記事を魅力的にデザインする方法です。興味ある方は読んでみてください。
ゆめぴょんでした。ちゃおっ！
