ブログ運営は記事を書くだけではなく、自分好みのデザインに作り上げていく楽しさもあります。
Naifix でもちょっとおしゃれなデザインにする CSS などをご紹介していますが、利用中のテーマやテンプレートによってはコードをコピペするだけではうまく反映されないことも。
その原因のひとつに CSS の優先順位が挙げられます。「サンプルどおりの結果にならない！」「CSS がうまく反映されない！」というときはたいていがコレ。
数回にわけて解説していきますが、本日はCSS の記述場所による優先順位を見ていきましょう。
CSS の基本
CSS は Cascading Style Sheets の略で、Web サイトのデザインを指定する言語です。
このスタイルシートは HTML と組み合わせて使うもので、複数箇所に記述でき、さらに指定方法が何パータンかあります。ということは、どこかでバッティング（競合）する可能性が出てくるわけです。
「あっちでは “文字を赤くする” という指定がされているのに、こっちでは “文字を青くする” という指定がある…」なんて。
残念ながら（？）文字が都合よく紫になるわけではありません。
どちらのスタイルを反映するのか優先順位をもとにブラウザが判定して、赤か青の装飾をしてくれます。
基本的な HTML のタグはこちらを参考に
CSSはどこに書けばよいのか
スタイルシートが書けるのは以下の 3 ヶ所です。
- HTML タグ内
- <head> ～ </head> 内
- 外部スタイルシート
それでは、このように span で囲まれた文字を赤くするにはそれぞれどのような記述となるのか見てみましょう。
文字を <span> 赤く </span> する
文字を赤くする
HTMLタグに直接指定する（インライン）
個別に指定したい場合、HTML タグにスタイル属性として記述するのが最も簡単な方法です。
文字を<span style="color: red;">赤く</span>する
複数箇所あるならそのつど指定しなければなりませんし、「HTML は文章構造を定義するもので、見た目の指定は分離する」という基本ルールがあるので、厳密に言うとあまりよろしくない記述です。
そういえば、もう使う人はいないと思いますが、昔はこんな感じで指定していました。
<font color="red">赤い</font>
今のところこの指定でも文字が赤くなるのですが、非推奨なので使うのはオススメしません。やがて完全に廃止されると思います。
head内に記述する
つづいて、HTML の <head> 内にスタイルを記述する方法です。
<head>
<style type="text/css">
span {color: red;}
</style>
</head>
HTML は基本形のまま。
文字を<span>赤く</span>する
<head> 内にこの記述があるページでは、<span> で囲まれた文字がすべて赤くなります。ページごとに指定を切り替えたい時は便利ですね。
ちなみに WordPress の場合、簡単なカスタマイズをすることで記事ごとの CSS を <head> 内に出力することができます。
グラデーションのような複雑なスタイルを紹介するとき、タグに直接指定するのはかなり大変です。この方法を知っておけばかなり楽になりますよ！
参考WordPressで記事ごとに個別のCSSを設定する方法3選
また、最近は「ファーストビューに関わるものを <head> に記述すると良い」と言われています。表示速度を限界まで高めたいのであれば、ぜひチャレンジしてみてください。けっこうメンドーですが…
外部スタイルシートに記述する
最後は style.css のようなファイルをつくり、そこに記述していく一般的な方法です。
<head> で外部スタイルシートを読み込みます。
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
style.css 内にスタイルを書いておきます。
span {color: red;}
外部スタイルシートを読み込む全ページで共通のスタイルが反映されるので、個別に変更したいときは ID やクラスを駆使して切り分ける必要があります。
HTML に触れることなく外部スタイルシートだけでデザインが調整できる、というのがメリットですね。
CSSを書く場所でかわる優先順位
以上紹介した 3 ヶ所には、紹介した順番どおり『 HTMLタグ ＞ head ＞ 外部スタイルシート』 という優先順位が定められています。
さて、問題です。
もし <span> にこんな指定がされていたら文字は何色になるでしょうか。
| 記述場所 | 指定文字色 |
|---|---|
| HTML タグ | 赤 |
| <head> 内 | 黄 |
| 外部スタイルシート | 青 |
正解はもちろん「赤」。
外部スタイルシートのように全体に関わるものは力が弱く、HTML タグのように個別に関わるものは力が強い。そんなイメージで良いと思います。
ただ、この力関係を逆転させるような記述もあるのがややこしいところ。追々勉強していきましょう。
まとめ
今日おさえておくべきポイントは 1 点。
- スタイルシートをどこに書くかで優先順位が変わる
外部スタイルシートですべて指定しておき、そのページ・その部分でしか使わないスタイルは <head> や HTML タグ内で改めて指定する、というのが一般的な使い方ですね。
何でもかんでも HTML タグに突っ込んでしまうと、後からの編集が大変になるので気をつけましょう。
次回は、外部スタイルシートに記述することを前提に「id と class の優先順位」を解説します。
それでは、また。