<style>スタイルシートを記述

<style>は、head要素内にスタイルシートを組み込むための要素です。 <style>は通常はhead要素内に記述しますが、HTML文書へスタイルシートを指定する方法は次のようなものがあります。

  • head要素内に直接<style>~</style>を配置し、スタイルシートを記述する方法
  • link要素を利用し、外部CSSファイルに記述する方法
  • グローバル属性としてstyle属性を指定し、HTMLタグに直接スタイルを記述する方法
  • HTML文書内にstyle要素とscoped属性を使用し、特定の範囲内にスタイルシートを指定する方法

head要素内にスタイルを記述する場合は、<head>~</head>内にstyle要素を配置する事で、そのHTML文書内にのみ有効なスタイルシートを記述する事ができます。 この場合type属性を指定し、でstyle要素の内容をコメントアウトとし、非表示にする事があります。 ですがこれは<style>に対応していない旧式のブラウザへの対応策ですので、現在の一般的なブラウザでは必要ありません。

<style>にtype属性を指定しない場合、デフォルトとして「text/css」が適用されるので、type属性は必須というわけではありません。

また<style>にmedia属性を指定すると、メディアクエリーの設定ができます。 例えば印刷時だけにスタイルを適用など、特定のメディアにのみスタイルを適用したい場合に使用します。

スタイルを変化させたい対象に合わせて、media属性の値を指定して下さい。 media属性で指定指定できる値は、w3cによって規定されています。(詳しく下記属性参照)

HTML5での変更点

HTML5ではstyle要素の属性として「scoped属性」が追加されました。 この属性を指定するとstyle要素の親要素と、その子孫要素に対してのみスタイルシートを適用することができます。

例えばある要素の中に、scoped属性を指定したstyle要素を入れると、ある要素とその子孫要素の中だけにそのスタイルが適用されます。

書式

  • <style 属性="値">~</style> ……… 埋め込みのスタイルを指定する

属性

media="" スタイルシートを適用するメディアを指定
  • all …… すべてのデバイスを対象(初期値)
  • braille …… 点字の触覚デバイスを対象
  • embossed …… 点字プリンタ向けを対象
  • handheld …… ハンドヘルドデバイスを対象
  • print …… 通常のプリンタを対象
  • projection …… プロジェクタを対象
  • screen …… 一般的なディスプレイを対象
  • speech …… 読み上げブラウザを対象
  • tty …… 固定ピッチ文字で表示される小型端末を対象
  • tv …… テレビを対象
type="" スタイルシートの言語(MIMEタイプ)を指定。省略時は「type="text/css"」
scoped scopedを指定したstyle要素の親要素と、その子要素に対してのみスタイルを適用

使用した時の例

<!DOCTYPE html>
<html>
<head>
 <title>タイトル</title>
<style type="text/css">
p {color: red;}
</style>
</head>
<body>
<h4>サンプルh4部分</h4>
<p>サンプルp部分。</p>
<section>
  <style scoped>
    h4{color: blue;}
  </style>
</section>
<h4>サンプル2、h4部分</h4>
<p>サンプルです。pの部分</p>
</body>
</html>

ブラウザ上の表示例

サンプルh4部分

サンプルp部分。

サンプル2、h4部分

サンプルです。pの部分

対応ブラウザなどのデータ

形式 <style>~</style> カテゴリ メタデータコンテンツ
親要素 メタデータコンテンツ子要素にもてるもの 子要素 type属性に依存
開始タグ 必須 終了タグ 必須
グローバル属性 accesskey / class / contenteditable / contextmenu / dir / draggable / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer3~ , Google Chrome1~ , Firefox1~ , Opera1~ , Safari1~