|
★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要素の親要素、および、その子孫要素に対してのみスタイルが適用されます。
■属性
- media属性
- メディアを指定
- type属性
- スタイリング言語（スタイルシートのMIMEタイプ）を指定
- scoped属性
- scoped属性を指定したstyle要素の親要素、および、その子孫要素に対してのみスタイルを適用（HTML5から追加された属性）
■使用例
HTMLソース
<!DOCTYPE html><html lang="ja">
<head>
<title>おすすめの映画</title>
<style>
p.sample {color:black; background:yellowgreen;}
p.sample em {font-style:normal; color:navy;}
</style>
</head>
<body>
<h6>素晴らしき日曜日/黒澤明</h6>
<p class="sample">
私の<em>おすすめの</em>映画は黒澤明監督の<cite>素晴らしき日曜日</cite>です。 お金のない若い男女がデートをしながら将来の夢を語り合うという<em>ただそれだけの</em>お話ですが、 見終わった後に<em>さわやかな</em>気持ちになれる良作です。
</p>
<section>
<style scoped>
h6 {color:red;}
</style>
<h6>ワンポイントメモ</h6>
画面の中から観客に語りかける実験的なシーンなどもあって、 若き日の黒澤監督のチャレンジ精神が感じられる興味深い作品でもあります。
</section>
</body>
</html>
ブラウザ上の表示
素晴らしき日曜日/黒澤明
私のおすすめの映画は黒澤明監督の素晴らしき日曜日です。 お金のない若い男女がデートをしながら将来の夢を語り合うというただそれだけのお話ですが、 見終わった後にさわやかな気持ちになれる良作です。
ワンポイントメモ
画面の中から観客に語りかける実験的なシーンなどもあって、 若き日の黒澤監督のチャレンジ精神が感じられる興味深い作品でもあります。
|
