<style>－HTML Living Standard リファレンス

トップページ > HTML Living Standard > <style>

★HTML Living Standard リファレンス

<style> …… CSSを文書に埋め込む
Internet Explorer

style要素は、通常は<head>～</head>の中に配置します。 style要素で文書にCSSソースを埋め込むことで、文書単位でスタイルを指定することができます。（外部CSSファイルにリンクしてCSSを適用する場合は、link要素を使用します。）

style要素は type="text/css" の状態のCSSを生成します。そのため、<style>タグを記述するときには、type="text/css" の指定は省略できます。 HTMLの旧いバージョンではtype属性を指定していましたが、現在のHTML標準ではstyle要素にtype属性の指定は不要です。

style要素のmedia属性

style要素のmedia属性には、スタイルが適用されるメディアを指定します。 media属性でメディアの種類を指定することで、スクリーンで表示される場合のスタイル、プリントされる場合のスタイルなどを指定し分けることができます。

media属性が省略された場合のデフォルトは「all」です。これは、デフォルトではすべてのメディアに適用されうることを意味します。

■属性

media属性

スタイルが適用されるメディアをキーワードで指定します。 media属性の値には、有効なメディアクエリを指定する必要があります。

all …… すべてのデバイス（初期値）
print …… プリンタ、および、「印刷プレビュー」で文書を表示するブラウザなど、印刷された表示を再現することを目的としたデバイス
screen …… print で一致しないすべてのデバイス（≒一般的なディスプレイ）

以下は、有効なメディアクエリですが、すでに非推奨となっています。後方互換などの目的に残されているものであり、可能ならば使用を避けた方が良いでしょう。

tty …… 固定文字サイズの端末
tv …… テレビ
projection …… プロジェクタ
handheld …… ハンドヘルドデバイス
braille …… 点字の触角デバイス
embossed …… 点字プリンタ
aural …… 音声出力デバイス
speech …… 音声出力デバイス

blocking属性

要素がレンダリングをブロックする可能性があるかどうか

title属性

スタイルのタイトル（style要素のtitle属性を指定すると、CSSのセット名を表します）

■使用例

以下のサンプルは、典型的なstyle要素の使用例です。 <style>～</style>の中には、CSSを記述します。この使用例では、style要素を使用して、 cite要素、 em要素、 i要素に背景色や文字色の指定をするCSSを埋め込んでいます。

HTMLソース

<!DOCTYPE html>
<html lang="ja">
 <head>
  <title>お気に入りの本</title>
  <style>
   cite {background:yellow;}
   em   {font-style:normal; color:red;}
   i    {font-style:normal; color:blue;}
  </style>
 </head>
 <body>
  <p>私の<em>お気に入り</em>の本は、 <cite>A Cat's Life</cite> です。
  <em>現代の人間社会における猫</em>について語った <i>P. Rahmel</i> の本です。</p>
 </body>
</html>

↓↓↓

ブラウザ上の表示

私のお気に入りの本は、 A Cat's Life です。 現代の人間社会における猫について語った P. Rahmel の本です。

■関連項目

<head> …… 文書のヘッダ情報を表す
<title> …… 文書のタイトルや文書名を表す
<base> …… 文書の基準URLや基準ターゲットを指定する
<link> …… 文書から外部リソースにリンクする
<meta> …… 文書に関するメタデータを表す
<style> …… CSSを文書に埋め込む