トップページ  > HTML5  > <style>

★HTML5タグリファレンス

<style> …… スタイルシートを記述する
Internet Explorer4Internet Explorer5Internet Explorer5-macInternet Explorer5.5Internet Explorer6Internet Explorer7Internet Explorer8Internet Explorer9 Firefox1Firefox2Firefox3Firefox4 Google Chrome1Google Chrome2Google Chrome3Google Chrome4Google Chrome5Google Chrome6 Safari3Safari4Safari5 Opera6Opera7Opera8Opera9Opera10

<style>タグは、スタイルシートを記述する際に使用します。 通常は<head>~</head>の中に配置しますが、 head要素内に記述することで文書単位でスタイルを指定することができます。

style要素のtype属性は、スタイリング言語(スタイルシートのMIMEタイプ)を指定します。 例えば、CSSの場合にはtype="text/css"となります。 type属性は必須属性ではなく、指定しない場合にはtype="text/css"がデフォルトで適用されます。

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

<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 {font-weight:bold; color:orange;}
p.sample cite {background:orange; color:white; padding:4px;}
p.sample em {background:yellow;}
</style>
</head>
<body>
<h3>素晴らしき日曜日/黒澤明</h3>
<p class="sample">
<em>おすすめの映画</em>は、黒澤明監督の<cite>素晴らしき日曜日</cite>です。
お金のない若い男女がデートをしながら将来の夢を語り合うというお話ですが、
見終わった後にさわやかな気持ちになれる良作です。
</p>
<p class="sample">
画面の中から観客に語りかける<em>実験的なシーン</em>などもあって、
若き日の黒澤監督のチャレンジ精神が感じられる興味深い作品でもあります。
</p>
</body>
</html>
↓↓↓

ブラウザ上の表示

素晴らしき日曜日/黒澤明

おすすめの映画は、黒澤明監督の素晴らしき日曜日です。 お金のない若い男女がデートをしながら将来の夢を語り合うというお話ですが、 見終わった後にさわやかな気持ちになれる良作です。

画面の中から観客に語りかける実験的なシーンなどもあって、 若き日の黒澤監督のチャレンジ精神が感じられる興味深い作品でもあります。

▲ページ先頭へ
トップページ  > HTML5  > <style>
PR
MuuMuu Domain!
ドメイン取るならお名前.com
さくらのレンタルサーバ
ロリポップ!レンタルサーバー
HTMLクイックリファレンスについて
© HTMQ