style要素 - ドキュメントのスタイル

当ページのリンクには広告が含まれています。

HTML5入門 » 要素 » style要素 - ドキュメントのスタイル

ここでは HTML5 の style要素についてみていきます。

style要素の概要

style要素は、HTMLドキュメントの色・大きさ・範囲などのさまざまなスタイルを指定する要素です。

カテゴリー	メタデータ・コンテンツ scopedコンテンツ属性がある場合はフロー・コンテンツ
コンテンツモデル	typeコンテンツ属性によって異なります
利用場所	メタデータ・コンテンツが置ける場所 scopedコンテンツ属性がある場合はフロー・コンテンツが置ける場所

style要素のコンテンツ属性

style要素固有のコンテンツ属性をみてみましょう。

属性	概要
type	スタイルのMIMEタイプを指定
media	スタイルを適用するメディアを指定
scoped	scoped属性を使用し、スタイルを指定するとドキュメント全体ではなく、親要素と子要素だけスタイルを指定することができます。

typeコンテンツ属性

スタイルのMIMEタイプを指定します。デフォルトのタイプは"text/css"なので、通常（普通のスタイルシートの場合）は省略することができます。

typeコンテンツ属性の使用例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>style要素 - typeコンテンツ属性の使用例</title>
<style>
h1 {
  color: red;
}
P {
  color: blue;
}
</style>
</head>
<body>
<h1>タイトル</h1>
<p>テスト</p>
</body>
</html>

表示

mediaコンテンツ属性

スタイルを適用するメディアを指定します。

値	概要
all	すべてのメディアに適用されます。省略可能です。
screen	パソコンに適用されます。
projection	プロジェクターに適用されます。
handheld	携帯端末に適用されます。
print	プリンタに適用されます。

mediaコンテンツ属性の使用例

<style media="screen">
h1 {
  color: red;
}
</style>
<style media="print">
h1 {
  color: blue;
}
</style>

scopedコンテンツ属性

scopedコンテンツ属性は特定の範囲のスタイルを指定します。スタイルを指定するとドキュメント全体ではなく、親要素と子要素だけに適用するスタイルを指定することができます。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>style要素 - scopedコンテンツ属性の使用例</title>
</head>
<body>
<h1>タイトル</h1>
<p>あいうえお</p>

<div>
  <p>かきくけこ</p>
  <style scoped>
    p { color: red; }
  </style>
  <p>さしすせそ</p>
  <div>
    <p>たちつてと</p>
  </div>
</div>

</body>
</html>

表示

このようにscopedコンテンツ属性で指定したスタイルが親要素と子要素に適用されます。親要素の親要素には適用されません。

要素一覧 - アルファベット順