スタイルシートの記述方法(1)
【style要素を使って記述する方法】
HTMLファイル中に、style要素(<style>~</style>というタグ)を使って、スタイルシートをまとめて記述する方法があります。
この方法で指定すると、「そのページ内全体で有効」なスタイルになります。
◆記述場所
HTMLソース内で記述する場所は次の通りです。
<html> <head>
<title>……</title>
<style type="text/css">
ここにスタイルを列挙
</style>
</head> <body>
本文
</body> </html>
HTMLファイル中には、先頭付近に <head>~</head> で囲まれた部分(head要素)が存在します。 ここには、ページタイトルや文字コードの記述など、本文としては表示されない様々な情報が記述されています。
このhead要素の中に、スタイルシートもまとめて記述します。
◆記述詳細
具体的には、次のように記述します。
<style type="text/css"> p { font-size: smaller; color: blue; } h1 { color: maroon; font-weight: normal; } h2 { color: darkblue; font-weight: normal; } </style>
開始タグ <style type="text/css"> と、終了タグ </style> を記述して、その中に、スタイルを記述していきます。スタイルはいくつ記述しても構いません。全部まとめてこの中に記述します。
(補足) スタイルの記述
今回の記事は、スタイルシートの記述場所を解説するのが目的ですので、スタイルそのものの記述方法に関しては述べません。
以下に、簡単にだけ触れておきます。
スタイルは、次のように記述します。
セレクタ { プロパティ : 値 ; }
実際に例を書いてみると、次のようになります。
div { font-size : 12pt ; }
上記の例は、『div要素(<div>~</div>で囲まれた部分)の font-size(文字サイズ)を 12pt で表示する』という指定になります。
「セレクタ」とは簡単に言えば「タグの名前」です。「どの要素に適用するのか」ということを指定します。
「プロパティ」は簡単に言えば「スタイルの種類」です。「文字サイズ」や「余白」など様々な種類が存在します。
「値」は、種類に対して「どのような指定を行うか」を指定します。例えば「16ポイント」や「20ピクセル」などです。
それでは、次の方法を見ていきましょう。