スタイルシートの使い方

せんせい

スタイルシートの使い方。HTMLとは書き方が違うので、ここでポイントを押さえておいてほしい。

このページには、とても大切なことが書かれている。これからスタイルシートを使う上で必ず必要になる知識なので、最後まで読んでおいてほしい。

スタイルシートを使うための準備

スタイルシートを使うには、HTMLファイルの<head></head>の間で次のように宣言する。

<META http-equiv="Content-Style-Type" content="text/css">

この宣言文は「このHTMLファイルはCSSというスタイルシート言語を使います」という意味。忘れずに宣言しておこう。

CSS基礎の基礎

「文字色を青色にする」と指定する場合、必要なのは「青色」という色の値と「文字色を指定する」という命令文だ。次のように指定する。

color: blue

「color」は文字色を指定する命令文。この命令文をプロパティと呼ぶ。CSSには「色を指定」「幅を指定」「文字の指定」など、たくさんのプロパティがある。

次に、どこの文字を青色にするのかを指定する。指定方法は、次の通り。

セレクタ部分に割り当てたい要素やクラス名・ID名を入力。 
セレクタ { color: blue }

例)HTMLの<p>で囲まれた段落の中を青文字にする。
p { color: blue }

例)<p class="contents">のようにクラス名をつけた要素の中身を青文字に。
.contents { color: blue }

例)<p id="menu">のようにID名をつけた要素の中身を青文字に。
#menu { color: blue }

どこにCSSを入力する?

まず<head></head>の間に次のように入力する。

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

こうすると、そのHTMLファイルの中の<p>で囲まれた段落は、全て青文字になる。また、次のように<body></body>の中で個別に指定することもできる。

<p style="color: blue">文章</p>
この<p>で囲まれた段落の文字は青くなる。他の<p>で囲まれた段落の文字色は変わらない。

上の二つの方法で1つのHTMLファイルのデザインをコントロールできる。ただし、上の二つの方法だとスタイルシートの便利さは半減してしまう。HTMLファイル中に入力したCSSは、そのページだけに効果がある。例えば、あなたのホームページが全部で50ページあったとする。後からデザインを変更したい時に、50ページ全てのCSSを手直ししなくてはいけない。とても不便だ。

そこで、ぜひ使っていきたいのが外部スタイルシート。これを使わないと、スタイルシートを使う意味がないというくらい便利な仕組みなので、普段から外部スタイルシートを使うようにしたい。