We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

CSS (Cascading Style Sheets) を利用すると、すばらしい外見のウェブページを作成できますが、その裏側ではどのように動作しているのでしょう?この記事は、CSS とは何か、ウェブブラウザーが HTML を Document Object Model (DOM) に切り替える方法、CSS が DOM のパーツに適用される方法、とても基本的な文法例、実際に CSS をウェブページ内に含める方法を説明します。

前提条件: 基本的なコンピューターリテラシー、基本的なソフトウェアのインストールファイル操作 の基本的な知識、HTML の基本(Introduction to HTML の学習)。
目的:

CSS とは何か、どのように動作するかを基礎的なレベルで学ぶ。

CSS とは何か?

前述した通り、CSS は文書がユーザーにどう表示されるかを指定する言語です — スタイル、レイアウトなど。

文書 は、普通は マークアップ言語 を使用したテキストファイルです — HTML が最も一般的なマークアップ言語ですが、SVGXML のような他のマークアップ言語に出くわしたこともあるでしょう。

ユーザーに対してドキュメントを 表示 することは、閲覧者に対して利用できる形式に変換することを意味します。FirefoxChromeInternet Explorer のような ブラウザー は、文書を視覚的に、例えば、コンピューターの画面、プロジェクターやプリンター上に表示するよう設計されています。

CSS はどのように HTML に作用するか?

ウェブブラウザーは、CSS 規則 を文書に適用して、表示され方に作用します。CSS 規則は、以下の形式です:

  • プロパティ のセットで、HTML コンテンツが表示される方法を更新するための値を持ちます。例えば、親要素の 50% の幅で、背景を赤にする
  • セレクター、プロパティの値を更新して適用したい要素を 選択 (セレクト) します。例えば、HTML 文書内のすべての段落に CSS を適用する

CSS 規則のセットは、スタイルシート 内でウェブページの見た目を決定します。次の記事ので、CSS の文法がどのようになっているかについて詳しく学べます — CSS 文法

CSS の簡単な例

上述の説明は、意味を持っているかもしれませんし、持っていないかもしれません。簡単な例を使って明確にしましょう。まず、<h1><p> が含まれる単純な HTML 文書を使います (スタイルシートは <link> 要素を使用して HTML に適用されていることに注意してください):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

2 つの規則だけが含まれたとても簡単な CSS の例を見てみましょう:

h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}

一つ目の規則は、h1 セレクターで始まり、<h1> 要素にプロパティの値が適用されることを意味します。規則内には 3 つのプロパティと値が含まれます (それぞれのプロパティ/値のペアは 宣言 と呼ばれます):

  1. 一つ目のペアで、テキストの色を青に設定します。
  2. 二つ目は、背景色を黄色に設定します。
  3. 三つ目は、1 ピクセルの幅、実線 (点線、破線などではない)、黒色の枠線を引きます。

二つ目の規則は、p セレクターで始まり、<p> 要素にプロパティの値が適用されることを意味します。1 つのプロパティと値が含まれ、テキストの色を赤に設定します。

ウェブブラウザーでは、上のコードで以下の出力が生成されます:

A simple webpage containing a header of Hello World, and a paragraph that says This is my first CSS example

これはそれほどきれいではありませんが、少なくとも CSS がどのように動作するかの考え方がわかります。

実習: 初めての CSS 記述

では、自分で CSS を少し書いてみましょう。以下の「入力」領域を使い、編集可能な例で行いましょう。上の例で見たものに似たやり方で、簡単な HTML と、CSS プロパティを使用します。簡単な宣言を CSS に追加して、HTML のスタイリングをしてください。

入力を間違えた場合、リセット ボタンを使用して、いつでもリセットできます。行き詰った場合は、答えを見る ボタンを押して、解答を確認してください。

CSS は実際はどのように機能しているのか

ブラウザーが文書を表示する際、文書内のコンテンツとスタイル情報とを組み合わせる必要があります。ブラウザーは二段階でこの処理を行います。

  1. ブラウザーは HTMLCSSDOM (Document Object Model) へと変換します。できた DOM はコンピューターのメモリー内に文書として記録されます。この DOM は文書のコンテンツとスタイル両方の情報を含んでいます。
  2. ブラウザーが DOM の中身を表示します。

DOMとは

DOM は木のような構造 (ツリー構造) となっています。マークアップ言語内のそれぞれの要素や属性、テキスト位置はそのツリー構造内で DOMノード を形成します。DOM ノードは他の DOM ノードとの関係性で定義されます。ある要素は子ノードの親ノードに当たり、子ノードは更に子ノードを持ちます。

DOM は CSS と文書のコンテンツを組み合わされてできるものなので、DOM について理解することは、CSS をデザイン、デバッグ、保守する助けとなります。

DOM の表現

説明の前にまずは例を見て DOM と CSS がどう作用しあうのか見てみましょう。

以下の HTML コードの例を考えます:

<p>
  Let's use:
  <span>Cascading</span>
  <span>Style</span>
  <span>Sheets</span>
</p>

DOM の中では、<p> 要素は親となります。その子達はテキストノードと <span> 要素です。SPAN ノードはその子となっているテキストノードの親でもあります。

P
├─ "Let's use:"
├─ SPAN
|  └─ "Cascading"
├─ SPAN
|  └─ "Style"
└─ SPAN
   └─ "Sheets"

これが上記の HTML コードのブラウザーによる解釈です。ブラウザーは上記の DOM ツリーを生成後、それを表示します。

DOM に CSS を適用する

文書の装飾のため CSS を追加したとしましょう。利用する HTML コードは先ほどと同様です。

<p>
  Let's use:
  <span>Cascading</span>
  <span>Style</span>
  <span>Sheets</span>
</p>

ここに次の CSS を適用します。

span {
  border: 1px solid black;
  background-color: lime;
}

ブラウザーは HTML を解析して DOM を作り、その後 CSS を解析します。CSS 内で span セレクターに対する装飾が設定されており、この設定が HTML コード内の 3 つの span 要素それぞれに適用されます。結果は以下のようになります。

CSS を HTML に適用する方法

CSS を HTML 文書に適用する方法は 3 つあります。ここでは、それぞれに対して簡単に確認ていきます。

外部スタイルシート

既にこの記事内で 外部スタイルシート を見ていますが、名前については確認していません。外部スタイルシートは .css 拡張子が付いた HTML 文書とは別のファイルのことを言います。これを HTML の <link> 要素で参照します。以下は HTML ファイルの例です:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

参照される CSS ファイルはこちらです:

h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}

この方法は、一つのスタイルシートを複数の HTML 文書へと利用でき、CSS の変更が必要なときも一つの場所だけを変えれば良いため、最も良い方法です。

内部スタイルシート

内部スタイルシート は外部ファイルを利用せず、文書内の HTML head 内の <style> 要素内に CSS を配置します。HTML コードは次のようになります:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <style>
      h1 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }

      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

この方法は例えば CMS (コンテンツ管理システム)を利用していて外部スタイルシートを編集できない場合などに有効です。しかし、この方法はすべてのページに同じ CSS を利用するようなウェブサイトだと一つの変更のためにすべてのファイルを変更する必要が出てくるため、外部スタイルシートに比べて有用性は高くありません。

インラインスタイル

インラインスタイル は一つの要素の style 属性内に記述され、その一つの要素のみに適用される CSS の宣言方法です:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
  </head>
  <body>
    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>
    <p style="color:red;">This is my first CSS example</p>
  </body>
</html>

この方法は、本当に必要がない限り使わないで下さい。この方法はコードの保守性が非常に低く (文書ごとに同じ情報を複数回変更しなくてならないかもしれません)、加えて装飾に使う CSS と情報表示のための HTML が混在してしまいます。それによって CSS が非常に読みづらく理解しづらいものになります。その HTML 文書の編集を行うすべての人にとって分かりやすいよう異なる目的を持つコードは分けるようにしましょう。

インラインスタイルの使用に頼らなくてはならない唯一の場合は、作業環境が本当に制限されているときのみです (CMS が HTML 本体の編集のみを許可する場合など)。

次に行うことは?

ここでは、CSS がどう動作するかの基本やブラウザーがそれをどのように扱うかを理解できたでしょう。次は、CSS syntax について学びましょう。

このモジュールの文書

 

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, dskmori, hiro1107
最終更新者: mfuji09,