since: 21st/May/2002; Last Modified: 10th/Dec./2006
外部スタイルシートは、 HTML 文書とは別に保存されており、複数の HTML 文書に適用出来ます。外部スタイルシートを読み込んだ HTML 文書内で、当該文書だけに適用したいスタイルがあれば、当該 HTML ソース中に記述します。その為には、 head 要素内に style 要素を記述します。
たとえば、「ほとんどのスタイルは、他の HTML 文書と共有する外部スタイルシート通りだけれども、ほんの一部分だけは当該文書独自のスタイルを指定したい」と言う場合に有効です。
全てのページに適用させたいものは外部スタイルシートに記述し、該当のページだけに適用させたいものは style 要素に記述します。
head 要素内に次のような style 要素を挿入します。外部スタイルシートと併用する場合は、 link 要素よりも後ろに書く必要があります。
<style type="text/css">
h2 { background: #ffd }
h3 { margin-left: 5% }
</style>
上の style 要素を挿入した head 要素は次のようになっています。
<head> <title>源氏物語 第一帖 桐壺 第一段</title> <link rel="stylesheet" href="./atomic.css" type="text/css" media="screen" /> <style type="text/css"> h2 { background: #ffd } h3 { margin-left: 5% } </style> </head>
外部スタイルシートを読み込まない場合は、 link 要素と xml-stylesheet 処理命令は不要です。
<head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="content-style-type" content="text/css"> <title>源氏物語 第一帖 桐壺 第一段</title> <link rel="stylesheet" href="./atomic.css" type="text/css" media="screen"> <style type="text/css"> <!-- h2 { background: #ffd } h3 { margin-left: 5% } --> </style> </head>
外部スタイルシートを読み込まない場合は、 link 要素は不要です。
上記の head 要素を持つ HTML 文書をブラウザで表示すると、外部スタイルシートによるスタイルが、 style 要素によって上書きされている事が分かります。外部スタイルシートでは、段落の背景色が水色ですが、 style 要素では段落の背景色を灰色に指定しています。
前節で作成した sampleApply1.html の head 要素を、上記の head 要素に置き換えて、 sampleApply2.html として保存してください。ブラウザで開いて表示を確認してください。
|
|
| 図：style 要素を指定した例 |
style 要素は HTML 文書の head 要素に記述しますので、本文の body 要素とは分離されています。しかし、ファイルも分離して外部タイルシートにしたほうがメンテナンス効率は高まります。外部スタイルシートを使った方が望ましいでしょう。
たとえば、複数の HTML 文書で読み込む外部スタイルシートを atomic.css として、当該 HTML 文書だけで読み込む外部スタイルシートを sampleApply21.css と命名したとします。 style 要素に記述していたスタイル宣言は sampleApply21.css に記述します。
このとき、次のように head 要素の link 要素を二つ書けば、上のサンプルが再現されます。
<head> <title>源氏物語 第一帖 桐壺 第一段</title> <link rel="stylesheet" href="./atomic.css" type="text/css" media="screen" /> <link rel="stylesheet" href="./sampleApply21.css" type="text/css" media="screen" /> </head>
<head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="content-style-type" content="text/css"> <title>源氏物語 第一帖 桐壺 第一段</title> <link rel="stylesheet" href="./atomic.css" type="text/css" media="screen"> <link rel="stylesheet" href="./sampleApply21.css" type="text/css" media="screen"> </head>
sampleApply2.html の head 要素を上記のものに書き換えて、ファイル名を sampleApply21.html にして保存してください。
同時に、ファイル名を sampleApply21.css として、次の内容を記述して保存してください：
h2 { background: #ffd }
h3 { margin-left: 5% }
sampleApply21.html をブラウザで開くと、 style 要素と同様の効果が得られている事が確認できます。