<style>－HTML5タグリファレンス

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

★HTML5タグリファレンス

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

このページでは、HTML5のstyle要素を解説しています。

style要素の最新情報は、以下を参照してください。

HTML Living Standardリファレンス

https://www.htmq.com/htmls/style.shtml

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 …… 読み上げブラウザ

■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>

↓↓↓

ブラウザ上の表示

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

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

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