Close
<style>タグは、スタイルシートを記述する際に使用します。
通常は<head>～</head>の中に配置しますが、
head要素内に記述することで文書単位でスタイルを指定することができます。
style要素のtype属性は、スタイリング言語（スタイルシートのMIMEタイプ）を指定します。
例えば、CSSの場合にはtype=”text/css”となります。
type属性は必須属性ではなく、指定しない場合にはtype=”text/css”がデフォルトで適用されます。
style要素のmedia属性は、どのメディアにどのスタイルを適用するかを指定します。
media属性でメディアの種類を指定することで、
例えば、パソコンのスクリーンで表示される場合のスタイル、プリンタで印刷される場合のスタイル、読み上げブラウザで再生される場合のスタイル
などを指定し分けることができます。
W3Cの仕様で規定されているmedia属性の値は以下の通りです。
<style>～</style>の中にスタイルシートを記述する場合、
その内容を<!–と–>でコメントアウトしておくのが一般的です。
これは、<style>タグに対応していない旧式のブラウザで、スタイルシートの記述がそのままテキストとして表示されてしまうのを防ぐためですが、
現在、<style>タグは主要なブラウザでサポートされているので、コメントアウトしなくても問題が起きることはほとんどないでしょう。
HTML5ではstyle要素にscoped属性が追加されています。
scoped属性を指定すると文書全体ではなく、
style要素の親要素、および、その子孫要素に対してのみスタイルが適用されます。
<!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>
おすすめの映画は、黒澤明監督の素晴らしき日曜日です。
お金のない若い男女がデートをしながら将来の夢を語り合うというお話ですが、
見終わった後にさわやかな気持ちになれる良作です。
画面の中から観客に語りかける実験的なシーンなどもあって、
若き日の黒澤監督のチャレンジ精神が感じられる興味深い作品でもあります。
どのカジノが自分に最適か分からないですか?
