13. スタイルの指定(ドキュメントの視覚表現の記述方法)

一般に，情報を的確に伝達するために視覚表現を工夫する必要がある。文書の論理構造と内容という HTML ファイルの内容から，赤色，アンダーライン，センタリングなどの視覚表現を分離しておくことは理に適っている。文書の論理構造と内容からなる HTML ファイルと視覚表現を記述した スタイルシートを用意して説得力のある文書を作成すべきである。

スタイルシートは文書の一貫性を保ち，メンテナンス性を向上させる役割もある。

Web ブラウザに実装されているスタイルシートは，カスケードスタイルシート (cascade style sheet)と呼ばれる。これは複数の箇所でスタイルを指定することができるという特徴を持っている。

具体的な設定としては，例えば p 要素(パラグラフ)を青にしたければ，

p { color : blue }

などとする。

こうしておけば，パラグラフの色全体を青にすることができる (このページのソースも参考にせよ)。

スタイルを指定するには実際には 3 種類の方法がある。

<head>要素内の<style>要素に書く方法
スタイルシートを別ファイルにして読み込む方法
インラインの style 属性で指定する方法

13.1. <head>要素内の<style>要素に書く方法

head 要素内に，以下のように書き加えると，p 要素内が青になる。

<head>
  <style type="text/css">
<!--
    p  {color: blue}
-->
  </style>
...

ここで，最初の p をセレクタ（Selector）と呼び，続く { } で囲まれた内容を宣言（Declaration）と呼ぶ。宣言の中にはプロパティとその値をコロン（:）で区切って記述する。セレクタは，あるスタイルを適用する対象（要素タイプなど）を示す。プロパティは定義するスタイルの性質（色、大きさなど）に相当する。

プロパティと値のペアはセミコロン（;）で区切って複数記述することができる。複数行にわたってもよい。

13.2. スタイルシートを別ファイルにして読み込む方法

もっとも汎用性が高いのは、外部ファイルにスタイルを記述し，それを読み込む方法である。スタイル定義ファイルは，「セレクタ」と「宣言」を必要なだけ列挙したテキストファイルであり，カスケードスタイルシートファイルは ".css" という拡張子が用いられることが多い。

スタイルを設定した外部ファイル(.css ファイル)は， head 要素の中の link 要素を用いて読み込む。以下に例を示す。

  <link rel="stylesheet" href="common.css" type="text/css" />

ファイル "common.css" にスタイルを定義した場合，上の例のように link 要素を記述する（空要素なので、 />で閉じる必要がある）。スタイルシートの実現方法は CSS だけでなく複数あるので， type 属性によって利用するタイプを指定しておかなければならない。

サイト全体の共通スタイルを定義したスタイルファイルを用意し，全ての HTML ファイルからそのファイルを参照するようにしておけば，サイト全体の表現を簡単に統一できる。さらにスタイル定義ファイルを変更するだけでサイト全ての表現を一度に変更することが可能になり，メンテナンスの効率が向上することになる。

このページで使っているカスケードスタイルファイルはここに置いてある。

13.3. インラインの style 属性で指定する方法

<p style="color:blue">インラインの style 属性である段落を青字にする方法</p>

とすれば，

インラインの style 属性である段落を青字にする方法

のようになる。