内容とスタイルを分離して管理するCSS
実際にホームページを作りだすと分かりますが、文字の大きさや色などはページごとに指定してやらなければならないためとても面倒です。各ページに置く一番大きい見出し（タイトル）の大きさや色は共通にする場合が多いでしょうし、中くらいの見出し、小さめの見出しも、各ページで大きさや色を統一したい場合が少なくありません。そんなとき、CSS（スタイルシート）を使うと、簡単に統一することができます。
見出しの大きさは、HTMLに6種類が用意されています。ページのトップタイトルとも言える大見出し（そのページ最大のタイトル）を <h1>というタグで示し、そこから<h6>までの6種類があります。<h2>は副題、<h3>は中見出しというように、大きさにメリハリを付けるとページ内容を把握しやすくなります。
<h1>から<h6>までの見出しはもともとHTMLで指定できるものですが、これをCSSで細かく指定することもできます。例えば、<h1>のサイズを32ポイントにして、色は赤、背景に色を付けるなどの指定ができます。こうした設定により、HTML内で<h1>○○</h1> と記すだけで、これらの属性を瞬時にあてることができます。
ただ、文字の大きさをポイントで示すのは、一部ブラウザでズレが生じる場合があるとの話もあり、ポイントではなく「em」や「rem」がよく使われています（remは古いブラウザでは問題が起きる可能性もありますので注意が必要ですが）。
「em」はアルファベットの「M」の高さを基準にするもので「文字一つの大きさ」を表しています（タグの<em>とは無関係です。タグの方は「強調」として文字を斜めにします）。ブラウザ側で特に指定しなければ、一般に基本の文字の大きさが16ポイントとなり「1em」がこの大きさになります。「1.5em」では、16ポイントの1.5倍、つまり24ポイントになります。ただ「em」は、要素を入れ子にしていくと相対的に大きさが変わります。入れ子状態になると、同じ2emでも大きさが違ってしまうのです。それを避けるために「rem」が使われる例も少なくありません。
とまあ、言葉で説明しても分かりにくいですから、以下に実例を挙げてみます。文字サイズは、分かりやすいようにポイントにしてあります。
- h1 {
- font-size: 32px;
- font-weight: bold;
- color: #990000;
- }
- h2 {
- font-size: 24px;
- font-weight: bold;
- color: #990000;
- }
- h3 {
- font-size: 20px;
- font-weight: bold;
- color: #990000;
- }
- h4 {
- font-size: 16px;
- font-weight: bold;
- color: #990000;
- }
上記の<h1>から<h4>までの設定のうち、「font-size」が文字の大きさ、「font-weight」は文字の太さで「bold」は「太字」です。「color」は文字の色で「#990000」は黒みがかった赤色です。
この設定による文字の実際の見え方は以下の通りです。
これが<h1>の文字です。
これが<h2>の文字です。
これが<h3>の文字です。
これが<h4>の文字です。
では具体的にこうしたCSSはどう扱ったらいいのでしょうか。
CSSの設置方法は、三つあると考えていいでしょう。一つは、文字などに直接記す方法、二つ目は、HTMLの上部にある<head>にまとめて記す方法、そして三つ目は、CSSをまとめた別ファイルを作り、それをHTMLに取り込む方法です。実際には三つ目の「ファイルを取り込む方法」がよく使われますが、部分的にちょっとだけスタイル当てるときには、一つ目や二つ目の方法をとる場合もあります。
CSS設定方法「その１」直接記す
以下のように記します。これで文字が赤くなります。<p>○○</p>は段落を示すタグです。
【HTML】
<p style="color: #FF0000;">赤い文字</p>
【実際の見え方】
赤い文字
CSS設定方法「その２」headに記す
以下のようにHTMLのヘッダ<head>○○</head>内にスタイルを記します。これで文字が赤くなります。
【HTML】
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>このページのタイトル</title>
<style>
.text-red {
color: #FF0000;
}
</style>
</head>
<body>
<p class="text-red">赤い文字 </p>
</body>
</html>
【実際の見え方】
赤い文字
CSS設定方法「その３」別ファイルに記して取り込む
以下の【CSS】にある緑の文字部分を別ファイル「styleda.css」に保存して、それをHTMLのヘッダ<head>○○</head>内に取り込みます。これで文字が赤くなります。
【CSS】別ファイル（styleda.css）にする。
.text-red {
color: #FF0000;
}
【HTML】
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>このページのタイトル</title>
<link href="styleda.css" rel="stylesheet" type="text/css">
</head>
<body>
<p class="text-red">赤い文字 </p>
</body>
</html>
【実際の見え方】
赤い文字
CSSは、Cascading Style Sheetsの頭文字。直訳すれば「縦につながった形態をまとめた板」とでもいったところでしょうか。ホームページのサイト内には、複数のページが存在します。これらのページを横につなげるのがリンクであるのなら、スタイルシートは縦割りで「文字の大きさ」とか「背景の色」とか「文字を囲む枠」などを一括で設定するものだと言えます。
CSSでレイアウト
CSSは文字の大きさや色を指定するだけのものではありません。レイアウトも作り上げることができます。CSSの定義を使って、画面上の配置を作れます。たとえば今ご覧のページは、最上部の「編集って何よ!?」の文字がある部分と、その下の本文部分、さらに最下部にメニューとCopyrightが書いてある部分の三つに分かれています。これらをCSSの「ボックス」とよばれる機能で切り分けているわけです。同じことは前のページでお話ししたtableでも実現できますが（このサイトも以前はtableでレイアウトをしていました）、CSSを外部ファイルに書いて取り込む形を使ってレイアウトすると、上記のようなレイアウト情報を一括管理できるわけですから、HTMLに取り込んだCSSファイルを変更すれば、全ページのスタイルを一括で修正することができます。スタイルシートの良さはここにあります。スタイル（文字の大きさ、色、背景色、レイアウトの形などなど）を本文と分けることで、書かれている内容とスタイル（見た目）を別管理できる便利さがあることから、今、とても普及しています。
※スタイルシートは、ホームページ制作特有の用語ではありません。印刷物を作る際にも使われます。要はスタイルだけ別に保存しておいて内容と切り離しておくと、スタイルを変更するだけで、内容が掲載された各ページをいじらなくても、文字の大きさや色、レイアウトの形などを一括変更（一括管理）ができるもの、という理解でいいでしょう。