スタイルシートの使い方
スタイルシートの使い方。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>で囲まれた段落の文字色は変わらない。
上の二つの方法で１つのHTMLファイルのデザインをコントロールできる。ただし、上の二つの方法だとスタイルシートの便利さは半減してしまう。HTMLファイル中に入力したCSSは、そのページだけに効果がある。例えば、あなたのホームページが全部で50ページあったとする。後からデザインを変更したい時に、50ページ全てのCSSを手直ししなくてはいけない。とても不便だ。
そこで、ぜひ使っていきたいのが外部スタイルシート。これを使わないと、スタイルシートを使う意味がないというくらい便利な仕組みなので、普段から外部スタイルシートを使うようにしたい。
