最終更新日 
style要素
ドキュメント作者が、HTMLドキュメント内に直接スタイル情報を組み込めるようにします。style要素はスタイルを指定する方法の1つで、ユーザー向けのコンテンツを含みません。
type属性では、スタイルシートの言語をMIMEタイプで指定します。省略時の既定値は「text/css」です。
media属性では、スタイルの適用対象となるメディアの種類をメディアタイプで指定します。省略時の既定値は「all」です。
style要素のtitle属性は、代替スタイルシートセットを定義します。
scoped属性は論理属性です。指定すると、style要素の親要素で囲まれた範囲内のコンテンツにのみ、スタイル指定が適用されます。scoped属性を指定しない場合は、style要素の指定はドキュメント全体に適用されます。
scoped属性を指定した場合、style要素の内容はFlowコンテンツとなり、Flowコンテンツの記述箇所で使用できます。scoped属性のないstyle要素はMetadataコンテンツとして、Metadataの記述箇所、またはhead要素内のnoscript要素内で使用できます。
title属性を指定しない場合、style要素では親要素のtitle属性を継承しません。
scoped属性を指定してFlowコンテンツとして使用する場合は、他のFlowコンテンツより前に置く必要があります。
style要素でのスタイル指定は、link要素で指定したCSSファイルでのスタイル指定に優先します。
HTML5での変更点
・scoped属性を指定できます。
| カテゴリ | タグの省略 | 親要素 | 子要素 |
|---|---|---|---|
|
Metadataコンテンツ （Flowコンテンツ） |
省略不可 | head、scoped属性ありの場合はFlowコンテンツを子にできる要素 | type属性の値による |
| 属性 | 値 | 説明 |
|---|---|---|
| type | MIMEタイプ | スタイルシートの言語をMIMEタイプで指定します。初期値は「text/css」です。 |
| media | メディアタイプ | スタイルシートの対応メディアを指定します。複数のメディアを指定する場合は「media="scree,handheld"」のようにカンマ区切りで指定します。記述を省略した場合は、初期値の「all」が適用されます。 |
| title | 文字列 | 代替スタイルシートを指定します。 |
| scoped | scoped | 指定した場合は、スタイル要素の親要素とその子要素にのみスタイルが適用されます。 |
| グローバル属性 | - | - |
| イベント属性 | - | - |
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<title>マクドエイド</title>
<style type="text/css">
body{color:#000; background:#fff;}
h1{font-size:1.2em;}
</style>
</head>
<body>
<h1>ご案内</h1>
<p>バーガーショップ「マクドエイド」にようこそ！</p>
<style type="text/css">
em{color:#f00;}
</style>
<p>新メニューの<em>キャベツバーガー</em>のご紹介です。</p>
</body>
</html>
ザマワンにエントリーしました！
『ザマワン』は「座間ワンミニッツ」の略称であり、座間市の魅力を１分にギュッと詰め込む動画コンテストです。