WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > HTMLタグ・リファレンス > HTMLタグ一覧(ABC順) > <style>「スタイルシート」

<style> 「スタイルシート」[読み方:スタイルシート]

<style>タグは、HTMLドキュメント内に直接スタイルシートを記述する際に使用します。
<head>タグ内に記述することで、HTMLドキュメント全体に記述したスタイルが適用されます。

HTML規格HTML4.01HTML5
使用可否
広告

<style> の仕様

カテゴリー使用できる場所(親要素)コンテンツモデル(子要素)タグ省略
メタデータコンテンツメタデータコンテンツを子要素にもてる場所type属性に依存する。スクリプト等不可

<style> の属性

【構文】
<style type="text/css" media="screen">~スタイルシート~</style>
属性意味値のサンプルなど
type="MIMEタイプ"スタイルシートのMIMEタイプ
※デフォルト=text/css
「text/css」
media="メディアタイプ"スタイルシートを適用するメディアタイプ
※デフォルト=all
「screen」
「print」
グローバル属性
  • accesskey
  • class
  • contenteditable
  • dir
  • hidden
  • id
  • lang
  • spellcheck
  • style
  • tabindex
  • title
  • translate
イベント属性
ページTOP

<style>タグのサンプル

<head>
<style type="text/css">
<!--
#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>
スタイルの見本

この段落の枠線は赤。背景は桃色。

この段落の枠線は黄色。背景は橙色。

この段落の枠線は黄緑。文字は青でイタリック。

この段落の枠線は青。文字は赤で斜体。

ページTOP

留意事項

  • <style>タグでのスタイル指定は、<link>タグで指定したCSSファイルでのスタイル指定より優先します。
  • scoped属性はHTML5で一旦は追加されましたが、2014/7/31付けのHTML5では削除されています。
  • <style>タグ内にスタイルシートを記述する場合、コメントタグで囲むのが一般てきですが、これは、<style>タグに対応していないブラウザの場合、スタイルシートの内容がテキストとして表示されるのを防ぐためです。現在は、ほとんどのブラウザでサポートされているので、コメントは不要と思われます。
ページTOP

関連するHTMLタグ

<head>ページのメタデータ
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン