style要素 -- スタイルシート

基本データ

style要素
文書型 適用 子要素 開始タグ 終了タグ 分類
Strict ○ スタイルシートデータ 必須 必須 head要素の子要素
Transitional ○
Frameset ○

属性

固有属性

type="MIMEタイプ"(必須)
Strict: ○ | Transitional: ○ | Frameset: ○
スタイルシートの言語のMIMEタイプを指定します。CSSを使うのであれば、type="text/css"とします。この属性は必ず記述する必要があります。
media="出力メディア"
Strict: ○ | Transitional: ○ | Frameset: ○
スタイルシートを適用させるメディアを指定します。カンマ(,)で区切って複数指定できます。利用できる値は次のとおりです。
all
すべての出力メディアを表します。
screen
一般的なコンピュータのモニタを表します。
print
プリンタやブラウザの印刷プレビューモードでの出力を表します。
aural
音声ブラウザ、スクリーンリーダーなどの音声合成装置を表します。
handheld
携帯電話などのモバイル機器を表します。
tv
テレビ型の装置を表します。
tty
固定文字幅で出力する装置を表します。テレタイプ、端末機器などです。
projection
プロジェクターを表します。
braille
点字出力機器を示します。

共通属性

解説

HTML文書内でスタイルシートを記述するための要素です。head要素内に配置します。必ずtype属性でスタイルシート言語の種類を示します。CSSを使うのであれば、type="text/css"です。

<head>
…
<style type="text/css">
  h1 { font-size: 1.2em; }
  h2 { font-size: 1.1em; }
</style>
</head>

style要素内で定義したスタイルは、そのHTML文書内でしか適用されません。すべてのHTML文書に同じデザインを適用するなら、外部スタイルシートファイルを用意しそれをlink要素で読み込んだほうが、メンテナンスが楽になります。

かつては、古いウェブブラウザがstyle要素の中身を表示してしまうことがあるため、style要素の中身を次のようにコメントとして扱ったほうがよいと言われていました。

<style type="text/css"><!--
  h1 { font-size: 1.2em; }
  h2 { font-size: 1.1em; }
--></style>

筆者の環境で実験してみたところ、コメントアウトされていないstyle要素の中身を表示してしまったブラウザは、Netscape 1?8とInternet Explorer 3?6のうち、Netscape Navigator 1だけでした。この程度ならほとんど問題にならないと思います。(でもAnother HTML-lintに警告されるのを嫌って、コメントアウトしておくのもありです。)

Strict DTDの定義

<!ELEMENT STYLE - - %StyleSheet        -- style info -->
<!ATTLIST STYLE
  %i18n;                               -- lang, dir, for use with title --
  type        %ContentType;  #REQUIRED -- content type of style language --
  media       %MediaDesc;    #IMPLIED  -- designed for use with these media --
  title       %Text;         #IMPLIED  -- advisory title --
  >

Information

現在の位置