CSS とは何か

ブラウザーの既定のスタイル

HTML によるコンテンツの構造化モジュールでは、HTML とは何か、そして文書をマークアップするためにどのように使用されるかについて説明しました。こうした文書はウェブブラウザーで表示できます。見出しは通常のテキストよりも大きく表示され、段落は改行され、段落間に空間が確保されます。リンクは色付きで下線が引かれ、他のテキストと判別できるようになっています。

ここで見えているのは、ブラウザーの既定のスタイルです。これは、ページの作成者が明示的なスタイルを指定していない場合でも、ページが読みやすいように、ブラウザーが HTML に適用するとても基本的なスタイルです。これらのスタイルは、ブラウザーに含まれる既定の CSS スタイルシートで定義されています。これらは HTML とは関係がありません。

もしすべてのウェブサイトがそれと同じように見えていたら、ウェブはつまらない場所になってしまいます。これが、 CSS について学ぶ必要がある理由です。

CSS は何のためのものか

CSS を使用すると、 HTML 要素がブラウザー上でどのように見えるかを正確に制御でき、好きなデザインやレイアウトで文書をユーザーに表示することができます。

• 文書とは通常、マークアップ言語を用いて構造化されたテキストファイルであり、最も一般的なのは HTML です（これらは「HTML 文書」と呼ばれます）。SVG や XML など、他のマークアップ言語で記述された文書にも遭遇する可能性があります。HTML 文書はウェブページのコンテンツを含み、その構造を規定します。
• 文書をユーザーに表現するということは、閲覧者が利用できる形に変換するということです。ブラウザーは、Firefox、Chrome、Edge などで、例えばコンピューター画面、プロジェクター、モバイル端末、プリンターなど、視覚的に文書を表現するように設計されています。ウェブの文脈では、これは一般的に「レンダリング」と呼ばれます。ウェブページがレンダリングされるプロセスについては、ブラウザーがウェブサイトを読み込む仕組みで概要を解説しました。

CSSは、ウェブページの見た目や操作感に関連する多くの目的に使用できます。例を示します。

• テキストの装飾。例えば、見出しやリンクの色やサイズの変更。
• レイアウトの作成。たとえばグリッドレイアウトや段組みレイアウトなど。
• アニメーションなどの特殊効果。

CSS 言語は、関連する機能を含む「モジュール」に分類されています。例えば、 MDN のリファレンスページで「背景と境界」モジュールを参照すると、その目的や含まれるプロパティや機能について知ることができます。モジュールページでは、技術仕様を定義する仕様書へのリンクも含まれています。

CSS の構文の基本

CSSはルールベースの言語です。つまり、ウェブページ上の特定の要素または要素グループに適用すべきスタイルのグループを指定することで、ルールを定義します。

例えば、ページのメインの見出しを大きな赤いテキストにするというスタイルを適用することができます。次のコードは、これを実現するとてもシンプルな CSS ルールを示しています。

h1 {
  color: red;
  font-size: 2.5em;
}

• 上記の例では、CSS ルールはセレクターで始まっています。これにより、スタイルを適用する HTML 要素が選択されます。この場合、レベル 1 の見出し（<h1>）にスタイルを適用します。
• それから一組の中括弧 ({ }) があります。
• 中括弧には 1 つまたは複数の宣言が含まれており、プロパティと値のペアという形で表されます。コロンの前にはプロパティ（例えば、上記の例では color）を指定し、コロンの後にはプロパティの値を指定します（red は color プロパティに設定する値です）。
• この例には、 2 つの宣言があります。 1 つは color 、もう 1 つは font-size です。

それぞれの CSS プロパティごとに、許容される値は異なります。上記の例では、 color プロパティがあり、さまざまな色の値を取ることができます。また、 font-size プロパティもあります。このプロパティでは、さまざまなサイズの単位を値として取ることができます。

CSS スタイルシートには、このようなルールが他にもたくさん格納されており、次から次へと書かれています。

h1 {
  color: red;
  font-size: 2.5em;
}

p {
  color: aqua;
  padding: 5px;
  background: midnightblue;
}

いくつかの値はすぐに調べられますが、他にも調べていく必要があるものもあります。MDNで個々のプロパティページでは、プロパティとその値をすばやく調べるのに役立ちます。

どのように CSS は HTML に適用されるのか

ブラウザーがウェブサイトを読み込む仕組みで説明したように、ウェブページにアクセスすると、ブラウザーはまずウェブページの内容を含む HTML 文書を送信され、それを DOM ツリーに変換します。

その後、ウェブページ内で見つかった CSS ルール（HTML に直接挿入されているもの、または参照されている外部 .css ファイル内のもの）は、適用される要素（セレクターで指定される）に基づいて異なる「バケツ」に分類されます。CSS ルールは DOM ツリーに適用され、レンダリングツリーが生成されます。このレンダリングツリーはブラウザーウィンドウに描画されます。

例を見ていきましょう。まず、CSS を適用できる HTML スニペットを定義します。

<h1>CSS は素晴らしい</h1>

<p>テキストのスタイルを設定できます。</p>

<p>また、レイアウトや特殊効果を生成することができます。</p>

そして、前回の節から繰り返している CSS です。

h1 {
  color: red;
  font-size: 2.5em;
}

p {
  color: aqua;
  padding: 5px;
  background: midnightblue;
}

この CSS は次のことをします。

• ページ上のすべての <h1> 要素を選択し、そのテキストを赤色に色付けし、デフォルトサイズより大きくします。この例の HTML には <h1> が 1 つしかないため、その要素のみにスタイル設定が適用されます。
• ページ上のすべての <p> 要素を選択し、独自のテキストと背景色、およびテキスト周囲の余白を適用します。この例の HTML には 2 つの <p> 要素があり、両方にスタイル設定が適用されます。

CSS が HTML に適用されると、レンダリングされた出力は次のようになります。

CSS をいじってみよう

上記の例を試してみてください。そのためには、右上の "Play" ボタンを押して、MDN Playground エディターで読み込んでください。

以下のことをやってみてください。

1. 既存の2つの段落のすぐ下にもう 1 つの段落を追加し、2 つ目となる CSS ルールが新しい段落に自動的に適用される様子を確認してください。
2. <h1> の下のどこか、例えば段落の 1 つ後に <h2> の見出しを追加してください。
3. CSS に新しいルールを追加して、<h2> 要素の色を変えてみましょう。h1 ルールのコピーを作成し、セレクターを h2 に変更し、例えば color の値を red から purple などに変更します。
4. 冒険心がある場合、MDN の CSS リファレンスで新しい CSS プロパティや値を見ていき、ルールに追加してみてください。

CSS の基本をさらに練習するには、Scrimba ^{MDN 学習パートナー} のまず CSS を書いてみよう！（英語）をご覧ください。このスクリムでは、基本的な CSS 構文の便利な概要が説明されており、CSS 宣言の記述をさらに練習できるインタラクティブな課題が提供されています。

まとめ

CSS とは何か、その仕組みについてある程度理解できたところで、次は実際に CSS を書く練習をしながら、構文についてさらに詳しく説明していきましょう。

• Overview: CSS によるスタイル設定の基本
• 次のページ