CSSとは

CSSとは

CSSはWebページのレイアウトを装飾するために作られた言語で、Cascading Style Sheetsの頭文字を取って「CSS」と名づけられました。

ウェブページを作る際はHTMLで文章構造を、レイアウトや装飾をCSSで定義することが推奨されています。 CSSを理解するため、まずはスタイルシートとカスケーディングが何なのかを知っておきましょう。

スタイルシートとは

スタイルシートとは文章のレイアウトや装飾を制御する仕組みの事で、このような機能の言語をスタイルシート言語と言います。

厳密にはCSSはスタイルシート（言語）の１つでしかありませんが、スタイルシート言語でHTMLを装飾できるのはCSSだけです。 そんな事情でスタイルシートはほぼCSSの事を指しています。

CSS誕生の経緯

HTMLが誕生してからしばらくの間、レイアウトの設定や装飾も全てHTMLで行っていました。 しかしウェブやブラウザの発展に伴ってサイトデザインが多様化し、それに伴ってHTMLソースの複雑化が起こり文書構造が崩れるようになりました。

もともとHTMLは文書構造を記述するための言語であり、デザインまで記述するような作りになっていません。 そこで誕生したのがCSSです。

HTMLはあくまで文書構造を記述する言語として位置づけ、レイアウトや装飾はCSSで記述するようルール決めをしました。 担当を分けた事でソースがシンプルになり、可読性や保守性が向上し、またコンピュータの解釈のブレを小さくする事が可能になりました。

こうしてCSSはWebサイトのレイアウト・装飾を司る言語として、確固たる地位を築いたのです。

CSSの特徴

カスケーディング

１つのHTML要素に対して複数のCSSを指定する事ができ、また上流で宣言された内容は下流にも継承されます。 しかし同じ要素に競合する宣言があった場合は優先順位の高い方のみ適用されます。 この仕様をCascade（階段状の滝）に例え、カスケーディングといいます。

スタイルの継承

以下のHTMLはdiv要素の中にp要素を記述しています。
CSSではdiv要素の文字色を青に指定していますが、p要素には特に言及していません。

この場合に文字の色がどうなるか見てみましょう。

lt;div><p>単一プロパティ</p></div>

iv{color:blue;}

HTMLでは親要素から子要素にスタイルが継承されます。 p要素自体にスタイルを指定していなくても、親要素のdivにしている文字色を引き継ぎ、p要素の文字色は青になります。

付け加えればp要素がdiv要素の子要素でなかった場合、文字は青くなりません。 またdiv要素内の文字はp要素だろうがa要素だろうが青くなります。

このように親要素で指定されたスタイルが子要素にも継承される概念をスタイルの継承といいます。

先ほどのソースにCSSでp要素を赤くする指定を追加しました。 「div要素内の文字を青く」と「文字を赤く」が競合してしまいます。 この時文字の色はどうなるのでしょうか？

lt;div><p>プロパティ衝突</p></div>

iv{color:blue;}
p{color:red;}

プロパティが衝突した場合、優先順位によりで適用するスタイルが決定されます。 この場合は親要素よりも子要素の方が優先順位が高いため、p要素に指定した赤が優先されます。

このように上流からスタイルを継承しつつも下流で指定すればそちらを優先する仕組みを階段状の滝に例えて「カスケーディング」と呼びます。