<style>タグによるスタイル適用
<head>要素に、<style>タグを使用してスタイルを定義する方法を紹介します。この方法では、ページに存在する同名のタグ全てにスタイルを適用することができます。
<style>タグを使用してスタイルを適用する方法は、HTMLとXHTMLでは記述方法が異なります。
HTMLで<style>タグを使用する場合の入力例です。HTML4.01による例です。
style_html.html
<!DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
<!--
h2 { color: blue; background: yellow }
p { color: red }
-->
</style>
<title>HTMLでの<style>タグの例</title>
</head>
<body>
<h2>青文字タイトル</h2>
<p>赤文字
</p>
<h2>これも青文字タイトル</h2>
<p>赤文字
</p>
<h2>さらに青文字タイトル</h2>
<div>
この要素には何も指定していません。
</div>
</body>
</html>
XHTMLで<style>タグを使用する場合は次のようになります。XHTML1.0による例です。
style_xhtml.html
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/TR/xhtml1" xml:lang="ja" lang="ja">
<head>
<style type="text/css">
h2 { color: blue; background: yellow }
p { color: red }
</style>
<title>XHTMLでの<style>タグの例</title>
</head>
<body>
<h2>青文字タイトル</h2>
<p>赤文字
</p>
<h2>これも青文字タイトル</h2>
<p>赤文字
</p>
<h2>さらに青文字タイトル</h2>
<div>
この要素には何も指定していません。
</div>
</body>
</html>
上の2つの例では、全ての<h2>要素にスタイルが適用され、前景色（文字色）が青、背景色が黄色になり、全ての<p>要素は赤い前景色（文字色）になります。
<style>タグの記述
<style>タグは、<head>要素内に記述します。属性にはどのようなスタイルシートを適用するのか指定するtype属性を記述し、値には「text/css」を指定します。スタイルシートには、他にもJavaScriptによるものなどがあるので、このtype属性は記述するようにしたほうが良いでしょう。
<style>要素の記述
スタイルの定義は、<style>と</style>の間に定義します。HTMLとXHTMLで記述方法が異なるのはこの部分です。
スタイルに対応していないブラウザへの対処
HTMLの場合、<style>要素の記述には、まず、<style>の直後に「<!--」、</style>の直前に「-->」を記述します。このようにコメントで囲むのは、スタイルに対応していないブラウザに対する処置です。
スタイルに対応していない（古い）ブラウザは、コメントで囲まれた部分を純粋にコメントとして扱うため、コメント部分を表示するなどの処理をしません。一方、スタイルに対応している新しいブラウザは、<style>要素内のコメントをスタイル記述のためのマークとして扱うため、定義されたスタイルを読み込み、それをページに適用します。つまり、コメントを記述しておけば、スタイルに対応していないブラウザで、スタイルを定義した箇所のテキストがそのまま表示されてしまうなどのトラブルを防ぐことができます。
一方、XHTMLの場合は、「<!--」と「-->」は純粋にコメントとして扱われることになっているため、記述する必要はありません。スタイルが適用されなくなってしまいます。
スタイルの定義
<style>（HTMLの場合はコメントも）でネストされる形でスタイルを定義します。スタイルを適用したいタグを「<」と「>」なしで記述し、「{」と「}」の間にプロパティとその値を記述します。プロパティとその値の記述方法は、前ページのstyle属性の値の記述方法と同じです。
スタイルの定義方法については、後のページで詳しく紹介します。
<style>タグによったスタイル適用の使用用途
<style>タグを使用し、スタイルを定義していく方法は、そのページに存在するタグに対してのみ有効です。他の個々のページでスタイルを適用するには、ページごとに<style>タグを使用し、スタイルを定義しなければなりません。
また、<style>タグを使用する方法は、HTMLとXHTMLでは記述方法が異なります。
<style>タグによるスタイルの定義は、1つのページだけをメールに添付するといった用途や、学習のために限られるでしょう。
まとめ
- ページの同じタグ全てにスタイルを適用するには、<style>タグを使用
- HTMLの場合、スタイルの定義はコメントで囲む（古いブラウザへの対処）
<style>タグ
style属性
ページの先頭
2010 Webデザインレッスン