スタイルシート概論

スタイルシート利用の利点
ひとつのページ内に同じ書式を適用する場合
スタイルシートとはwebページ(ホームページ)の装飾に使われるものである。
もちろんタグの属性を使っても装飾は出来るのだが、
たとえば次のような場面を思い浮かべてほしい。


１番目
２番目
３番目
おわり


～ソース～

<table bgcolor="red">
<tr><td bgcolor="white" align="center" width="200">１番目</td></tr>
<tr><td bgcolor="white" align="center" width="200">２番目</td></tr>
<tr><td bgcolor="white" align="center" width="200">３番目</td></tr>
<tr><td bgcolor="white" align="center" width="200">おわり</td></tr>
</table>


現在表全体の背景色が「赤」、マスの背景色が「白」、幅が「200(ピクセル)」
となっている。ここで思い直してマスの背景を「水色」、幅を「150(ピクセル)」にしたいとき、
ソース内の「white」「200」をすべて変更しなければならない。

今回は４行、８箇所を書き換えるだけでよいのだが、
これが数十行・数百行となったときのことを考えると
手間も大変なものになり、ファイル自体の容量も大きくなって
読み込みにも時間がかかってしまう。

そこで登場するのが「スタイルシート」である。
スタイルシートとは、ページの中から「書式情報」だけを抜き出して、
それを<head>～</head>内に記述し、それを本文のほうに引用しようというものである。

少々説明だけではわかりにくいので例を挙げよう。


１番目
２番目
３番目
おわり


～ソース～
・書式情報（<head>～</head>内に記述）

<style type="text/css">
<!--
.masu{background-color:white;text-align:center;width:200;}
-->
</style>

・本文（<body>～</body>内に記述）


<table bgcolor="red">
<tr><td class="masu">１番目</td></tr>
<tr><td class="masu">２番目</td></tr>
<tr><td class="masu">３番目</td></tr>
<tr><td class="masu">おわり</td></tr>
</table>

表示結果はまったく同じなのだが、本文の部分を見ると
タグの属性を使って装飾したときに比べてだいぶすっきりしたのが
おわかりいただけるだろうか?

まずは<head>～</head>内の書式情報の部分で
「背景色：白、文字配置：中央揃え、マスの幅：200（ピクセル）」という書式に
「.masu」という名前を付けている。
スタイルシートでは設定した書式に対して自由に名前をつけることができるが、
その際には書式名の前に「.」を入れなければならない。
もちろん書式名は半角英数でしかつけることができない。

そしてこの書式を引用するときは、タグの属性である「class」を使い、
「class="書式名"」とすることで設定した書式を適用できる。

この方法を使えば、書式を変更するときには<head>～</head>内の
書式情報の部分だけを変更すれば
ページ内すべての「class="masu"」と記述した部分に反映されるため、
同じ書式を適用したい場所が何十箇所・何百箇所あろうとも
まったく問題ない。

複数のページに同じ書式を適用する場合
自分のホームページを作るとき、１ページで完成、ということはあまりない。
やはり２ページ３ページと複数ページにわたるのが普通だろう。
その際にすべてのページのデザインを統一したい、
と思うのは至極当然の欲求だろう。

先ほど挙げた方法を使えば同じページ内であればデザインを統一することができる。
しかし複数ページにわたる場合はページごと<head>～</head>内に
書式情報（スタイルシート）を記述しなければならない。
だが、スタイルシートの「書式情報だけを別に抜き出す」という特性を考えると、
スタイルシート自体をひとつのファイルとして独立させ、
すべてのページにおいてこのスタイルシートファイルを引用する、
ということができるのではないだろうか?

結論から言ってしまうとこの「別ファイルからスタイルシートを読み込む」
という方法は存在する。
複数ページに同じレイアウトを適用したいときなどによく使われている。
しかし、別ファイルにスタイルシートを分離することによって
デザインの統一が容易になるという利点がある反面、
分離したことによってひとつのファイル内に書き込んだ場合と比べて
若干の時間差が生じるため、読み込みに時間がかかる
複雑な書式が反映されない場合がある、という欠点もある。

手順

メモ帳を起動して書式情報を書き込む
例：.masu{background-color:white;text-align:center;width:200;}

書式情報を書き込んだものを保存する（ファイル名は半角英数でてきとーにつけることができる）
ただし、ファイル名の最後に「.css」とつけ、ファイルの種類は「すべてのファイル」で保存

書式情報を適用するページの<head>～</head>内に次のように記述
<link rel="styleseet" type="text/css" href="手順２でつけたファイル名.css">
戻る