style要素

style要素は、ドキュメントにスタイル情報を埋め込む要素。

カテゴリー メタデータ・コンテンツ。 scoped属性が存在する場合、フロー・コンテンツ。
コンテキスト scoped属性が存在しない場合、メタデータ・コンテンツを内包できる要素内、もしくは、head要素が親要素であるnoscript要素内で使用できる。
scoped属性が存在する場合、フロー・コンテンツを内包できる要素内で使用する。ただし、要素間の空白や、style要素以外の、他のフロー・コンテンツより前に配置しなければならない。トランスペアレント・コンテンツ・モデルの要素の子要素としては配置できない。
コンテンツ・モデル type属性に指定した値により異なる。
属性 グローバル属性。
media属性、type属性、scoped属性。
style要素におけるtitle属性は、特別な意味を持つ。
ブラウザ対応

要点

  • style要素は、ドキュメントにスタイル情報を埋め込む要素である。
  • スタイル情報を、ドキュメント全体に対し適用するには、scoped属性を指定せずに、head要素内に配置する。
  • スタイル情報を、特定の範囲に適用するには、scoped属性を指定し、body要素の子孫要素として、適用したい範囲を括る要素内に配置する。ただし、適用範囲において、要素間の空白や、style要素以外の、他のフロー・コンテンツより前に配置する。
  • style要素におけるtitle属性は、特別な意味を持つ。

属性

任意属性

属性 説明
media属性 スタイルを適用するメディア/デバイスを指定する属性。
type属性 スタイルシートのMIMEタイプを指定する属性。
scoped属性 スタイルの適用範囲を限定する属性。

グローバル属性

属性 説明
title属性 style要素においては、スタイルシートのグループ名という特別な意味を持つ。

サンプルコード

ドキュメント全体に対し適用

スタイル情報を、ドキュメント全体に対し適用するには、scoped属性を指定せずに、head要素内に配置する。

全メディアに対し適用

スタイル情報を、全メディアに対し適用するには、media属性を指定しない、もしくは、media属性にallを指定する。

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<style>
		スタイル情報
		</style>
		<title>サンプルコード</title>
	</head>
	<body>
	</body>
</html>

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<style media="all">
		スタイル情報
		</style>
		<title>サンプルコード</title>
	</head>
	<body>
	</body>
</html>
印刷だけに適用

スタイル情報を、プリンター・デバイスに対してだけ適用するには、media属性にprintを指定する。

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<style media="print">
		スタイル情報
		</style>
		<title>サンプルコード</title>
	</head>
	<body>
	</body>
</html>

特定の範囲に適用

スタイル情報を、特定の範囲に適用するには、scoped属性を指定し、body要素の子孫要素として、適用したい範囲を括る要素内に配置する。ただし、適用範囲において、要素間の空白や、style要素以外の、他のフロー・コンテンツより前に配置する。

article要素内、及び、全メディアに対し適用

スタイル情報を、全メディアに対し適用するには、media属性を指定しない、もしくは、media属性にallを指定する。

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<title>サンプルコード</title>
	</head>
	<body>
		<h1>見出し[h1]</h1>
		<article>
			<style scoped>
			スタイル情報
			</style>
			<h2>見出し[H2]</h2>
			<p>記事セクション。</p>
		</article> 
	</body>
</html>

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<title>サンプルコード</title>
	</head>
	<body>
		<h1>見出し[h1]</h1>
		<article>
			<style media="all" scoped>
			スタイル情報
			</style>
			<h2>見出し[H2]</h2>
			<p>記事セクション。</p>
		</article> 
	</body>
</html>

これらのサンプルコードは、article要素内にスタイル情報を適用する。

article要素内、及び、印刷だけに適用

スタイル情報を、プリンター・デバイスに対してだけ適用するには、media属性にprintを指定する。

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<title>サンプルコード</title>
	</head>
	<body>
		<h1>見出し[h1]</h1>
		<article>
			<style media="print" scoped>
			スタイル情報
			</style>
			<h2>見出し[H2]</h2>
			<p>記事セクション。</p>
		</article> 
	</body>
</html>

このサンプルコードは、article要素内、及び、プリンター・デバイスに対してだけ、スタイル情報を適用する。

サンプル

HTMLソースコード

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<style>
			body {
				background-color: #ffea76;
				text-align: center;
			}
			article {
				padding: 1em;
				color: #f00;
				background-color: #e0ff95;
			}
		</style>
		<title>style要素のサンプル・ドキュメント</title>
	</head>
	<body>
		<h1>見出し[h1]</h1>
		<article>
			<h2>見出し[H2]</h2>
			<p>記事セクション。</p>
		</article> 
	</body>
</html>

実際の表示

別窓で表示。