since: 21st/May/2002; Last Modified: 22nd/May/2002
外部スタイルシートは、 HTML 文書とは別に保存されており、複数の HTML 文書に適用出来ます。外部スタイルシートを読み込んだ HTML 文書内で、当該文書だけに適用したいスタイルがあれば、当該 HTML ソース中に記述します。その為には、 head 要素内に style 要素を記述します。
たとえば、「ほとんどのスタイルは、他の HTML 文書と共有する外部スタイルシート通りだけれども、ほんの一部分だけは当該文書独自のスタイルを指定したい」と言う場合に有効です。
style 要素の記述は、 XHTML も HTML も変わりません。但し、スタイルシートを利用するときは必ず記述する meta 要素だけは、タグの末尾が異なります。
いずれにせよ、 head 要素内に次のような style 要素を挿入します。外部スタイルシートと併用する場合は、 link 要素よりも後ろに書く必要があります。
<style type="text/css">
p { background: #ddd }
</style>
上の style 要素を挿入した head 要素は次のようになっています。
<head> <meta http-equiv="content-type" content="application/xhtml+xml; 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" /> <?xml-stylesheet href="./atomic.css" type="text/css" media="screen" ?> <style type="text/css"> p { background: #ddd } </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"> p { background: #ddd } </style> </head>
外部スタイルシートを読み込まない場合は、 link 要素は不要です。
上記の head 要素を持つ HTML 文書をブラウザで表示すると、外部スタイルシートによるスタイルが、 style 要素によって上書きされている事が分かります。外部スタイルシートでは、段落の背景色が水色ですが、 style 要素では段落の背景色を灰色に指定しています。
前節で作成した sampleApply1.html の head 要素を、上記の head 要素に置き換えて、 sampleApply2.html として保存してください。ブラウザで開いて表示を確認してください。
|
|
| 図：style 要素を指定した例 |
style 要素は HTML 文書の head 要素に記述しますので、本文の body 要素とは分離されています。しかし、ファイルも分離して外部タイルシートにしたほうがメンテナンス効率は高まります。また、最低限度読み込むべき HTML 文書のバイトサイズは小さい方が望ましい事もあります。それほど優先順位が高いわけではないのですが、外部スタイルシートを使った方が望ましいでしょう。
たとえば、複数の HTML 文書で読み込む外部スタイルシートを atomic.css として、当該 HTML 文書だけで読み込む外部スタイルシートを sampleApply21.css と命名したとします。 style 要素に記述していたスタイル宣言は sampleApply21.css に記述します。
このとき、次のように head 要素の link 要素を二つ書けば、上のサンプルが再現されます。
<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" /> <?xml-stylesheet href="./atomic.css" type="text/css" media="screen" ?> <link rel="stylesheet" href="./sampleApply21.css" type="text/css" media="screen" /> <?xml-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 として、次の内容を記述して保存してください：
p { background: #ccc }
sampleApply21.html をブラウザで開くと、 style 要素度同様の効果が得られている事が確認できます。