<style scoped></style>

更新日
仕様 未定義
分類 フロー・コンテンツ
利用場所 フロー・コンテンツが置ける場所（親要素内の先頭）
内容 スタイルシートのコード

★この属性は廃止されました★　参考情報としてこのページはしばらく残しておきます。

  • この属性はHTML5で追加される予定でしたが、最終的には廃止となりました。

style要素に scoped を指定すると、特定の範囲内にのみスタイルを適用させることができます。

この属性が指定されたstyle要素は、body要素内で使用します。


<style scoped>

ここにスタイルシートを記述します

</style>
属性 値
廃止属性（この属性は定義されていません）
scoped ［×］特定範囲への適用 （scoped） 値は省略可能

scoped属性を指定すると、そのスタイルは親要素内にのみ適用されることになります。

<article>

<h1>記事のタイトル</h1>

<section>

<style scoped>セクション用のスタイル</style>

<h2>セクション</h2>

</section>

</article>

例えば、上記のように指定した場合は、セクション用のスタイルはその親要素であるsection要素内にのみ適用されることになります。

また、このstyle要素は親要素内の先頭に記述しなければなりません。上記の例では、section開始タグの直後にstyle要素を配置しています。

使用例

最初のsection要素にのみ適用させた例

<article>

<h2>記事のタイトル</h2>
<p>記事のサンプルです。</p>

<section>

<style scoped>
h3 { color: #ff0000; }
</style>

<h3>セクション1</h3>
<p>対応しているブラウザでは、このセクションの見出しのみが赤く表示されます。</p>

</section>

<section>

<h3>セクション2</h3>
<p>未対応のブラウザでは、このセクションの見出しも赤く表示されます。</p>

</section>

</article>
表示例

記事のタイトル

記事のサンプルです。

セクション1

対応しているブラウザでは、このセクションの見出しのみが赤く表示されます。

セクション2

未対応のブラウザでは、このセクションの見出しも赤く表示されます。