（10）スタイルシートとは

　実際にホームページを作りだすと分かりますが、文字の大きさや色などはページごとに指定してやらなければならないためとても面倒です。各ページに置く一番大きい見出し（タイトル）の大きさや色は共通にする場合が多いでしょうし、中くらいの見出し、小さめの見出しも、各ページで大きさや色を統一したい場合が少なくありません。そんなとき、CSS（スタイルシート）を使うと、簡単に統一することができます。

　上記の見出し「（10）スタイルシートとは」の文字は、<h2>というタグで囲まれています。

　　<h2>（10）スタイルシートとは</h2>

　<h○>は見出しを設定するためのタグですが、これの大きさ等を別のファイルに保存しておきます。例えば以下のような形です。

<h1>は32ポイントの文字で太字にする。
<h2>は24ポイントの文字で太字にする。
<h3>は20ポイントの文字で太字にする。
<h4>は15ポイントの文字で太字にする。

　こうしておけば、一番大きな文字<h1>をあとで30ポイントにすることも、40ポイントにすることもできます。<h1>の大きさや太さなどは別のファイルに保存してありますから、そちらを変えれば、あなたのホームページ上で<h1>と指定した文字をすべて一気に変更することができます。

　こうした形を実現するのがCSS（スタイルシート）です。

　上記の<h1>から<h4>までの設定は、実際にはスタイルシートのファイル内で、以下のように記述されます。「font-size」が文字の大きさ、「font-weight」は文字の太さ、「color」は文字の色です。

h1 {
font-size: 32px;
font-weight: bolder;
color: #333333;
}
h2 {
font-size: 24px;
font-weight: bolder;
color: #333333;
}
h3 {
font-size: 20px;
font-weight: bold;
color: #333333;
}
h4 {
font-size: 15px;
font-weight: bold;
color: #333333;
}

　この設定に沿った文字は以下の通りです。

　これが<h1>の文字です。

　これが<h2>の文字です。

　これが<h3>の文字です。

　これが<h4>の文字です。

　CSSは、Cascading Style Sheetsの頭文字。直訳すれば「縦につながった形態をまとめた板」とでもいったところでしょうか。ホームページはリンクで構成しますので、サイトとして複数のページが存在します。これらを横につなげるのがリンクであるのなら、スタイルシートは縦割りで「文字の大きさ」とか「背景の色」とか「文字を囲む枠」などを一括で設定するものだと言えます。

CSSでレイアウト

　CSSは文字の大きさや色を指定するだけのものではありません。レイアウトも作り上げることができます。CSSの定義を使って、画面上の配置を作れます。たとえば今ご覧のページは、最上部の「編集って何よ!?」の文字がある部分と、その左下の本文部分、その右のメニュー部分、さらに最下部に「Copyright」が書いてある部分の四つに分かれています。これらをCSSの「ボックス」とよばれる機能で切り分けているわけです。同じことは前のページでお話ししたテーブルでも実現できますが（このサイトも以前はテーブルでレイアウトをしていました）、CSSを使ってレイアウトすると、上記のようなレイアウト情報が別ファイルに記述され、一括管理されているわけですから、そのファイルをいじれば、全ページを一括で修正することができます。スタイルシートの良さはここにあります。スタイル（文字の大きさ、色、背景色、レイアウトの形などなど）を本文と分けることで、書かれている内容とスタイル（見た目）を別管理できる便利さがあることから、今、とても普及しています。

※スタイルをページ内（HTMLの中）に直接書き込むこともできます。ただしこれをやると、上記のような一括での変更はできません。

※スタイルシートという言葉は、ホームページ制作特有の用語ではありません。印刷物を作る際にも使われます。要はスタイルだけ別に保存しておいて内容と切り離し、スタイルを変更するだけで内容部分をいじらなくても一括変更（一括管理）ができるもの、という理解でいいでしょう。