HOME / WEB関連知識のスキルアップ / HTMLクイック･リファレンス / HTML5（目的別） / <style>

HTML5  <style>

<style>タグは、スタイルシートを記述する際に使用します。 通常は<head>～</head>の中に配置しますが、 head要素内に記述することで文書単位でスタイルを指定することができます。
tyle要素の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へのバージョンアップによる変更点

■属性

media属性
　　メディアを指定
type属性
　　スタイリング言語（スタイルシートのMIMEタイプ）を指定

■使用例

HTMLソース
<!DOCTYPE html>
<html lang="ja">
<head>
<title>おすすめの映画</title>
<meta charset="UTF-8">
<title>学びBAR タグのサンプル表示</title>
<meta name="description" content="学びBARサイトのタグサンプル表示">
<meta name="keywords" content="html,style,sample,">
<style type="text/css">
.sample {
font-weight: bold;
color: orange;
}
p.sample cite {
background-color: orange;
color: white;
padding: 4px;
}
p.sample em {
background-color: yellow;
}
</style>
</head>
<body>
<h3>素晴らしき日曜日/黒澤明</h3>
<p class="sample">
<em>おすすめの映画</em>は、黒澤明監督の<cite>素晴らしき日曜日</cite>です。
お金のない若い男女がデートをしながら将来の夢を語り合うというお話ですが、
見終わった後にさわやかな気持ちになれる良作です。
</p>
<p class="sample">
画面の中から観客に語りかける<em>実験的なシーン</em>などもあって、
若き日の黒澤監督のチャレンジ精神が感じられる興味深い作品でもあります。
</p>
</body>
</html>
↓↓↓​
↓​↓↓↓
リンク先のページで表示を見ることができます