CSS（Cascading Style Sheets）の仕組みをマスターしよう1
CSSとは何か？
CSSとはCascading Style Sheets（カス―ディングスタイルシート）の頭文字を取った略語です。
このカスケードというのは直訳すると「階段状に連続する滝」となりますが、CSSの頭につくカス―ディングとはインターネット用語で「あらかじめ決められた優先ルールによって一番高い優先度指定が1つだけ有効になる仕組み」を意味しています。
ちょっと難しい解釈ですが、順を追って説明しましょうね。
CSSはデザイン命令ファイル
ホームページを構成する言語HTMLにはたくさんのタグが記述され、構成されています。
基本的には大枠にあたる<body></body>（bodyタグ）の中に、
<h1></h1>など大きな見出しとなるタグがあり、
さらに<p></p>など各段落タグが並ぶ事によってそのホームページの表示内容が決定されています。
実際のホームページは上記のように単純なものではなく、画像や箇条書きなどもふんだんに使われ、いくつものエリア・セクションや部分的な設定がついた複雑な構成になっている場合がほとんどです。
Style Sheets（スタイルシート）とは、その構成の各部分において文字の大きさや色などのあらゆるデザイン的な命令を明記したものになります。
本文中の記載から専用別ファイルへ移動
ホームページの初期はその装飾命令をこの本文中に直接書いて制御していましたが、その分記述量が多くなり読込に時間も掛かっていました。
例えば段落を示す<p></p>（pタグ）がそのページ中に100回出てくるとしましょう。そしてそれらのすべてに対し色をグレーに設定するとしますね。
前までは100個出てくるpタグのすべてに対し「色はグレー」という設定を掛けねばなりませんでした。
これは時間も掛かりますし、反映漏れなどもあって手間が掛かる作業でした。
それを何とか簡略・一括管理できないかという意図から考案されたのがスタイルシートです。
HTMLファイルの上部にstyle.cssなどの名前でスタイルシートファイル（CSSファイル）が読み込まれる事で、HTMLを表示する際、CSSに記述されているそれぞれの装飾ルールが反映されます。
実際の読込例（<head>タグ内に必ず記述します。）
<link rel="stylesheet" type="text/css" href="css/style.css">
実際にCSSファイル設定してみよう まずは本流から
このCSSファイルに、まずは「pタグは全て色はグレー」という命令を記載しておきます。
p{ color: #99999; }
そうするとそのCSSファイルが読み込まれている限りpタグの段落文章は全て色がグレーになるのです。
デザイン指定で一括変更
CSSファイルに一つ命令を書く事により、全てに反映されるので情報量が少なくて済みますし、何よりHTML中に色指定の箇所がなくなります。
コードがスッキリしてファイル容量的にも軽い状態になり、大変便利になります。
更新の際もCSSファイルの色部分を変更すれば1発で全てのpタグの色が変わります。これがCSSファイルの最大のメリットです。
「優先度の一番高い命令が一つだけ選択され反映される」仕組みを理解する
CSSファイルにはそういったデザイン・装飾指定が一括で反映されるよう制御できる事がわかりましたが、CSSファイルの一番のポイントは「その優先度の一番高い命令が一つだけ選択され反映される」という部分ですね。
ここをもっとわかりやすく先ほどのpタグを例にとって説明していきましょう。
CSSはスタイルシートという名前ですので、その文章スタイルを制御するファイルという意味だと推測できますが、それに「カスケ―ディング」とついている事にきちんとした意味があります。
本流のルールと支流のルール
先ほどpタグは全て色はグレーというルールを書きましたが、これがこの時点で一番優先度の高いルールになります。滝を使って説明するならば本流となる大きな流れのルールです。
それに対し、1か所だけ色を赤くしたいpタグ部分があったとしましょう。その場合例えば
p.red{ color: #ff0000; }
などの色指定をCSSファイルに追加記述します。それにより「.red」と指定されたpタグは文字の色が赤に変わります。複数個所で設定されていればその個所は全て赤くなります。これが滝の流れで言いますと支流になります。
<p class="red">文字</p>
本流は色がグレーですが支流は赤になるというルールであり、支流の方が本流よりも優先されます。「.red」が付いているところは赤にするのが優先ルールでそれ以外は全てグレーというルールで全体へ反映されていくのです。
これが優先ルールの一番高い指定が一つ反映されるという意味です（逆に言えばpタグの文字の色はグレーか赤にしか表示されないという事も意味しています。）
もう少し滝の流れを複雑にしてみよう。絡み合うルールを整理する
特定条件（エリア内）のルール
ホームページの記述の中で一部この箇所だけは文字の色を青くしたいという事になったとします。その一部の箇所を区画タグ<div></div>（divタグ）で囲う事にしたとしましょう（ここでdivタグで囲う箇所は複数あるとします）。
そのdivタグの中に書いてある文章pタグについては色を青にしますので
div p{ color: #3300ff; }
という感じで設定を掛ける事になります。
<div><p>文字</p></div>
これにより、支流（色赤）・中流（色青）・本流（色グレー）の3つのルールが設定されたことになります。支流←中流←本流ですから、「.red」と指示がしてあるところは赤、divタグで囲ってある箇所の文字は青、何も指定がなければグレー、という優先順位が付くのです。
【画像】
ポイント：支流←中流←本流の順。「滝の流れが小さくなればなるほどそのルールが優先される」と考えて頂いてOKです。
カスケ―ディングシステム応用編
それでは上記を踏まえた応用編です。
上記のdivタグの中に「.red」で指定されていたpタグがあった場合、その文字色は何色になるでしょう？
<div><p class="red">文字</p></div>
正解は「赤」です。それは中流「divタグの中の指定」よりも支流「.red」で指定してある箇所の方が優先であるためです。
優先1：「.red」等の個別指定
優先2：「divタグ」などのエリア指定
優先3：「pタグ」における基本指定
この順に優先ルールが反映されている事になります。この場合はCSSに記述する順番は関係ありません。それぞれの記述はどの順番で上から記述していってもルールは変更されません。
優先ルールの落とし穴に注意しよう
記述する順番は関係ないと言いましたが、実は例外もたくさんありますのでここでは一つだけ挙げておきましょう。
同じ優先度なら記述の順番が重要
もしあなたが本流pタグの色指定グレーの事を忘れていて、後からpタグの色を「緑」したいと思いCSSファイルの下の方に下記のように記述したとしましょう。
p{ color: #336633; }
この場合本流となる基本設定「グレー」と「グリーン」は同じ優先順位扱いになりますので、その場合「記述の順番」が優先度を決定します。
p{ color: #99999; }…最初に上の方に「グレー」として記載していた箇所
p{ color: #336633; }…後から下の方に「緑」として記載しまった箇所
「グレー」の指定をしたあと下に「緑」を書いた場合、答えとしては下に書いた「緑」の設定が優先されるので、文字は緑になります。同レベルの優先度の設定がある場合は後から書いた方（下に書いた方）が優先されるのです。
CSSファイルは上から順々に命令を書いていくので、その処理も上から順々におこなっていきます。
その処理の過程で、本流を流れている「グレー」のルール設定を、後から書いた本流「緑」の設定が上書きしていく事になります。
ここでポイントなるのは、中流エリア指定のdivタグ内や支流個別設定「.red」の赤の指定はきちんと反映されるという点です。
エリア指定や個別設定は基本設定よりも優先されるので、後から「緑」と指定されてもその影響を受けません。この優先順位のルールをきちんとマスターする事がCSSファイルを自在に操るキーとなります。
今回のCSS記述をまとめておきます。
p{ color: #99999; }…本流（基本指定）
div p{ color: #3300ff; }…中流（エリア指定）
p.red{ color: #ff0000; }…支流（個別指定）
p{ color: #336633; }…本流（基本指定：優先はこちら）
まずは【支流】←次に【中流】←最後に【本流】の順に優先される
このカスケ―ディングの仕組みが理解できれば、ホームページのデザインや配色を効率的に管理できるようになりますし、やがては他人が書いたCSSファイルであってもどの部分を更新すれば良いのか、というのが自然にわかるようにもなってきます。
自分がCSSファイルを一から作る仕事だけではなく、既に作ってあるホームページの管理を担当するとなった場合、他の業者が書いたCSSファイルを書き換えていく仕事も出てきますので、CSSファイルの見方を覚える事は将来的にもとても重要な部分だと思います。
