scoped属性

style要素のscoped属性は、スタイルの適用範囲を限定する任意属性。

ブラウザ対応

構文

<style scoped>
	スタイル情報
</style>

scoped属性に値を指定する必要はない。

要点

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

サンプルコード

<!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>

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

サンプル

HTMLソースコード

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

実際の表示

別窓で表示。

サンプルについて

上記サンプルは、scoped属性に対応しているブラウザであれば、article要素内にだけ、スタイル情報を適用する。