【HTML5】style 要素

Ads by Google

HTML5 ロゴ

<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 タグ一覧

こちらの記事もいかがですか?

アナタにオススメ!
同じカテゴリーの他の記事です。

Ads by Google

Leave a Replyコメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です