cman.jpWEBページ作成
広告
<style> 「スタイルシート」[読み方：スタイルシート]
<style>タグは、HTMLドキュメント内に直接スタイルシートを記述する際に使用します。
<head>タグ内に記述することで、HTMLドキュメント全体に記述したスタイルが適用されます。
| HTML規格 | HTML4.01 | HTML5 |
|---|---|---|
| 使用可否 | ○ | ○ |
広告
<style> の仕様
<style> の属性
【構文】
<style type="text/css" media="screen">～スタイルシート～</style>
| 属性 | 意味 | 値のサンプルなど |
|---|---|---|
| type="MIMEタイプ" | スタイルシートのMIMEタイプ ※デフォルト＝text/css ※HTML5以降に廃止。指定不可。 | 「text/css」 |
| media="メディアタイプ" | スタイルシートを適用するメディアタイプ ※デフォルト＝all | 「screen」 「print」 |
| blocking="値" | 外部リソースの取得時に特定の操作をブロックする必要があることを明示的に指定 ※HTML5以降に追加 | render |
| グローバル属性 |
| |
| イベント属性 |
| |
<style>タグのサンプル
<head>
<style>
<!--
#css-s1 fieldset{padding: 15px;background-color: #ffffcc;
border: solid 1px #0000ff;line-height: 2.5;}
#css-s1 legend{color: #0000ff;font-weight:bold;}
#css-s1 p { border: solid 3px #CCC; color:#000000; padding:1em; }
#css-s1 p.b-red { border-color:#FF0000; padding:1em; background-color: #FFC0CD;}
#css-s1 p.b-yellow { border-color:#FFFF00; background-color: #FFA500;}
#css-s1 p.b-green { border-color:#9ACD32; color:#0000FF; font-style:italic;
background-color: #ffffcc;}
#css-s1 p.b-blue { border-color:#0000FF; color:#FF0000; font-style:oblique;
background-color: #ffffcc;}
-->
</style>
</head>
<div id="css-s1">
<fieldset>
<legend>スタイルの見本</legend>
<p class="b-red">この段落の枠線は赤。背景は桃色。</p>
<p class="b-yellow">この段落の枠線は黄色。背景は橙色。</p>
<p class="b-green">この段落の枠線は黄緑。文字は青でイタリック。</p>
<p class="b-blue">この段落の枠線は青。文字は赤で斜体。</p>
</fieldset>
</div>
<style>
<!--
#css-s1 fieldset{padding: 15px;background-color: #ffffcc;
border: solid 1px #0000ff;line-height: 2.5;}
#css-s1 legend{color: #0000ff;font-weight:bold;}
#css-s1 p { border: solid 3px #CCC; color:#000000; padding:1em; }
#css-s1 p.b-red { border-color:#FF0000; padding:1em; background-color: #FFC0CD;}
#css-s1 p.b-yellow { border-color:#FFFF00; background-color: #FFA500;}
#css-s1 p.b-green { border-color:#9ACD32; color:#0000FF; font-style:italic;
background-color: #ffffcc;}
#css-s1 p.b-blue { border-color:#0000FF; color:#FF0000; font-style:oblique;
background-color: #ffffcc;}
-->
</style>
</head>
<div id="css-s1">
<fieldset>
<legend>スタイルの見本</legend>
<p class="b-red">この段落の枠線は赤。背景は桃色。</p>
<p class="b-yellow">この段落の枠線は黄色。背景は橙色。</p>
<p class="b-green">この段落の枠線は黄緑。文字は青でイタリック。</p>
<p class="b-blue">この段落の枠線は青。文字は赤で斜体。</p>
</fieldset>
</div>
留意事項
- title属性はグローバル属性ですが、<style>タグに指定するtitle属性は、その他のタグと意味が異なります。CSSスタイルシート名を設定します。<style>タグは、親タグのタイトルは継承せず、タイトルはありません。
- scoped属性はHTML5で一旦は追加されましたが、2014/7/31付けのHTML5では削除されています。
- <style>タグ内にスタイルシートを記述する場合、コメントタグで囲むのが一般てきですが、これは、<style>タグに対応していないブラウザの場合、スタイルシートの内容がテキストとして表示されるのを防ぐためです。現在は、ほとんどのブラウザでサポートされているので、コメントは不要と思われます。
広告