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

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

<section>

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

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

</section>

<section>

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

</section>

</article>

表示例

記事のタイトル

記事のサンプルです。

セクション1

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

セクション2

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