CSSとは

css

CSSとは

CSSはWebページのレイアウトを装飾するために作られた言語で、Cascading Style Sheetsの頭文字を取って「CSS」と名づけられました。 ウェブページを作る際はHTMLで文章構造を、レイアウトや装飾をCSSで定義することが推奨されています。 CSSを理解するため、まずはカスケーディングとスタイルシートについて学びましょう。

カスケーディングとは

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

スタイルの継承

以下のHTMLはdiv要素の中にp要素を記述しています。
CSSではdiv要素の文字色を青に指定していますが、p要素には特に言及していません。この場合どうなるでしょうか?

HTML

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

CSS

div{color:blue;}

p要素の文字色は指定されていませんが、HTMLにてp要素はdiv要素の子要素として記述されているので親要素から子要素にスタイルが継承されます。 なのでこの場合は文字色は青になります。

collision1

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

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

カスケーディング

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

HTML

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

CSS

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

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

collision2

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

スタイルシートとは

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

スタイルシート言語でHTMLを装飾できるのはCSSだけで、スタイルシートといえばほぼCSSの事を指しています。しかし厳密にはCSSはスタイルシート(言語)の1つでしかありません。

CSS誕生の経緯

HTMLが誕生してからしばらくの間、レイアウトの設定や装飾も全てHTMLで行っていました。しかしウェブやブラウザの発展に伴ってサイトデザインが多様化・ソースの複雑化が起こりHTML文書の文書構造が崩れるようになりました。 もともとHTMLは文書構造を記述するための言語なので、この状況は好ましくありません。

そこで誕生したのがCSSです。 レイアウトや装飾をCSSで記述する事により、HTMLは文書構造の記述に専念することができるようになったのです。担当を分けた事でソースがシンプルになり、可読性や保守性の向上ひいてはコンピュータの解釈のブレを小さくする事が可能になりました。

また同じCSSであれば同じレイアウトでWebページを表示できるのもポイントです。公開されている優れたCSSを自サイトに適用すれば、簡単に優れたデザインのサイトを作る事ができます。ウェブサイトの文書構造とレイアウトの分業なども簡単にできるようになりました。

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

アマルウェブ HOME