HTML

この記事では、HTML文書の中にCSSを書き、ページ全体または指定した範囲の見た目を整えるstyle要素の役割と基本を説明します。

style 要素

　style要素の中にスタイルを記述する事で、そのスタイルをドキュメント全体、または、style要素が含まれている領域のみに適用する事ができます。style要素の中に記述されたスタイル情報は、ブラウザ上に表示されません。

style 要素の概要

カテゴリー

メタデータ・コンテンツ

scoped属性がある場合：フロー・コンテンツ

コンテンツ･モデル

type属性に依存します。

利用可能な場所

scoped属性がない場合：メタデータ・コンテンツが期待される場所、または、head要素の中の noscript要素の中。

scoped属性がある場合：フロー・コンテンツが期待される場所。ただし、style要素と要素間ホワイトスペース以外のフロー・コンテンツより前でなければいけません。

タグの省略

不可。開始タグと終了タグの両方が必要。

要素固有の属性

type

スタイリング言語の MIMEタイプを指定します。

media

スタイルを適用するメディアを表すキーワードを指定します。

scoped

この属性を指定すると、指定のスタイル情報が、該当の style要素の親要素とその子要素だけに適用されるようになります。この属性を指定しなければ、指定のスタイルは、ドキュメント全体に適用されることになります。

標準的なスタイル

style {
	display: none;
}

type 属性

　type属性は、スタイリング言語の MIMEタイプを表します。

　指定がなければ、その MIMEタイプは "text/css" となります。そのため、通常、Webページで使われているスタイルシートの場合は、style要素に type属性を入れる必要はありません。

media 属性

　media属性は、style要素の中に記述されたスタイル情報を、どのメディアに適用するかを表します。

<style media="screen">
<!-- スクリーンだけに適用されます -->
 :
 :
 :
</style>

<style media="print">
<!-- 印刷時のみ適用されます -->
 :
 :
 :
 </style>

　media属性が省略された場合は、media属性に "all" が指定されているものとして処理されることになっています。

scoped 属性

　scoped属性は論理属性です。もし scoped属性が存在すれば、style要素の親要素の中にあるコンテンツだけに、style要素の中に記述されたスタイル情報が適用されます。

<p>段落です。<!-- この段落にはスタイルは適用されません。 --></p>

<div>
	<style scoped="scoped">
		p { color: blue; }
	</style>
<p>段落です。<!-- この段落にはスタイルが適用されます。 --></p>
</div>

　scoped属性を使う場合、その style要素は、フロー・コンテンツが期待される場所にしかマークアップできません。例えば、div要素の中などです。p要素のように、そのコンテンツ・モデルがフロー・コンテンツを認めていない要素の中では、scoped属性をセットした style要素を使う事ができませんので、注意してください。

　なお、scoped属性が指定されていない style要素は、head要素の中でしか利用する事ができませんので、注意してください。

　scoped属性は HTML5で新たに導入されたものです。2009年10月現在で scoped属性をサポートしたブラウザはありません。