style要素[HTML5]

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

<style>タグは、スタイルシートを記述する際に使用します。通常は<head>~</head>の中に配置しますが、head要素内に記述することで文書単位でスタイルを指定することができます。style要素のtype属性は、スタイリング言語(スタイルシートのMIMEタイプ)を指定します。例えば、CSSの場合にはtype=”text/css”となります。type属性は必須属性ではなく、指定しない場合にはtype=”text/css”がデフォルトで適用されます。

style要素のmedia属性は、どのメディアにどのスタイルを適用するかを指定します。media属性でメディアの種類を指定することで、例えば、パソコンのスクリーンで表示される場合のスタイル、プリンタで印刷される場合のスタイル、読み上げブラウザで再生される場合のスタイルなどを指定し分けることができます。W3Cの仕様で規定されているmedia属性の値は以下の通りです。

  • all …… すべてのメディア(初期値)
  • screen …… 一般的なディスプレイ
  • print …… 通常のプリンタ
  • projection …… プロジェクタ
  • tv …… テレビ
  • handheld …… ハンドヘルドデバイス
  • tty …… 固定文字サイズの端末
  • embossed …… 点字プリンタ
  • braille …… 点字の触角デバイス
  • speech …… 読み上げブラウザ

<style>~</style>の中にスタイルシートを記述する場合、その内容を<!–と–>でコメントアウトしておくのが一般的です。これは、<style>タグに対応していない旧式のブラウザで、スタイルシートの記述がそのままテキストとして表示されてしまうのを防ぐためですが、現在、<style>タグは主要なブラウザでサポートされているので、コメントアウトしなくても問題が起きることはほとんどないでしょう。

■HTML4.01からHTML5へのバージョンアップによる変更点

HTML5ではstyle要素にscoped属性が追加されています。scoped属性を指定すると文書全体ではなく、style要素の親要素、および、その子孫要素に対してのみスタイルが適用されます。

カテゴリー: HTML5, HTMLの基礎知識, ナレッジノート   パーマリンク