CSS の役割

一つの CSS ファイルで、サイトのすべてのページのデザインを一度に変えられます。1996年十二月に W3C が CSS レベル1を公開したとき、これが CSS を使う一番の理由でした。

構造は HTML、見た目は CSS

HTML は、ページの各部分が何であるか（見出し、リスト、フォームなど）を示します。CSS（Cascading Style Sheets の略）は、それらの部分がどう見えるべきか、つまり色、フォント、大きさ、余白、画面上の位置を指定します。この二つを分けておくと、実用上の利点があります。スタイルシートを一つ編集するだけでサイト全体の見た目を変えられますし、同じ HTML をスマートフォン、大きなモニター、紙でそれぞれ違う見た目にできます。また、読み手が文字を大きくするなど自分のスタイルを適用しても、ページが崩れません。

ホーコン・ウィウム・リーは1994年十月に CERN で CSS の開発を始め、1995年にベルト・ボスが加わりました。W3C は1996年十二月17日に CSS レベル1を勧告として公開しました。1998年五月には CSS 2 が続きました。それ以降、CSS は Color、Selectors、Flexbox、Grid などのモジュールに分けられ、W3C の CSS ワーキンググループがそれぞれのペースで開発しています。CSS4 という一つの仕様はありません。ワーキンググループは、どのモジュールが安定しているかをまとめたスナップショットを公開しています。

ルールの形

スタイルシートはルールの集まりです。各ルールは、どの要素に適用するかを示すセレクターで始まり、そのあとに波かっこで囲んだ宣言ブロックが続きます。ブロックの中の宣言は、プロパティ、コロン、値、セミコロンの順に書きます。上のルールでは、h1 がすべてのレベル1の見出しを選び、二つの宣言でその見出しを青く、高さ32ピクセルにしています。ルールの中の空白や改行は結果に影響しないので、読みやすいように宣言を一行に一つずつ書く人がほとんどです。

ブラウザーは、つづりを間違えたプロパティや意味をなさない値など、理解できない宣言に出会うと、その宣言一つだけを飛ばして次の宣言に進みます。これはわざとそうなっています。古いブラウザーを壊さずに CSS の新しい機能を追加できるからです。その反面、セミコロンが一つ抜けているだけで、次の宣言が知らないうちに消えてしまうことがあります。二つの宣言がつながって、一つの無効な宣言になってしまうからです。スタイルが適用されないときは、まず記号を確かめましょう。コメントは /* like this */ のように書きます。

CSS を追加する三つの方法

<!-- 1. External stylesheet: one file for the whole site -->
<link rel="stylesheet" href="styles.css">

<!-- 2. Internal stylesheet: rules for this page only -->
<style>
  p { line-height: 1.5; }
</style>

<!-- 3. Inline style: one element only -->
<p style="color: green;">Fresh today</p>

<head> から <link rel="stylesheet"> で読み込む外部スタイルシートは、実際のサイトでよく使われる方法です。すべてのページで共有でき、ブラウザーは一度ダウンロードしたものをキャッシュに保存しておきます。<style> 要素には一つのページのためのルールを書きます。このコースの課題ではこの方法を使います。style 属性は一つの要素に宣言を適用します。ちょっと試すには便利ですが、同じ見た目をすべての要素にくり返し書く必要があるので、管理が大変です。

ブラウザーにはもともとスタイルがある

CSS がまったくないページにも、ある程度のスタイルがついています。見出しは大きな太字、リンクは青で下線つき、リストは字下げされています。これはブラウザーの既定のスタイルシートから来ていて、ユーザーエージェントスタイルシートと呼ばれます。自分で書いたルールは、その上に重ねて適用されます。HTML コースのパン屋さんのページが CSS なしでも読めたのはこのためで、よいスタイルシートが必要なところだけを変えるのもこのためです。