ナヴィゲーションを読み飛ばす。

HTML文書へのスタイルシート適用

この文書では，HTML 4文書にCSSスタイルシートを結びつけて，適用する方法について概説します。

HTML文書ではスタイルシートを文書の内部に埋込んだり，外部リンクでスタイルシートを読込めます。

デフォルトスタイルシート言語

文書著者は，自身の文書に結びつけるスタイル情報についてデフォルトスタイルシート言語を伝えねばなりません。なぜならHTML 4仕様では，特定のスタイルシート言語とは結びつけられてはおらず，様々なスタイルシート言語を利用できるよう設計されているからです。

デフォルトがCSSスタイルシートである旨を伝えるには，次のような宣言を記して置きます。

文書内においてstyle属性を用いているにも拘らず，デフォルトスタイルシートを設定していない文書は不正です。

link要素: 外部スタイルシート

文書から独立した外部スタイルシートをリンクで読込ませる方法は，次のごとく観点から特に推奨されています：

外部スタイルシートは通常の "プレイン-テキスト" として作成して置き，その中身にCSS構文を記します。CSS仕様に基いたリソースであるなら，拡張子は慣例として *.css を用います。かなや漢字などを含めるなら，冒頭に@charset規則を記して置くとよいでしょう。

外部スタイルシートは次のごとく，文書のヘッダ内でlink要素を用いて読込ませます：

<head>
  <meta http-equiv="Content-Type" content="text/html">
  <meta http-equiv="Content-Style-Type" content="text/css">
  <link rel="stylesheet" href="sample.css" type="text/css">
  <title>外部スタイルシートを読込ませる例</title>
</head>

link要素は文書のhead要素内において幾つ記してもよく，下記に示す属性が用意されています：

type="コンテントタイプ"
rel="リンクタイプ"
href="URI"
media="メディアタイプ"
title="文字列"
charset="文字符号化方法"

link要素の詳細については，HTML 4.01仕様書邦訳 12.3および14.3を参照してください。

優先および代替スタイルシート（Preferred and alternate style sheets）

文書著者は代替（alternate）スタイルシートと呼ばれる，相互に排他的となる切替可能なスタイルシートを多数指定できます。HTML 4.01およびCSS2（2.1）に適合するUser Agentは，ユーザに対し，代替スタイルシートの選択手段を提供せねばなりません。

著者は複数ある代替スタイルシートのうちひとつを優先（preferred）スタイルシートに指定できます。通常User Agentは，ユーザが別の代替スタイルシートを選ばないかぎり，著者による優先スタイルシートを適用せねばなりません。

著者は優先スタイルシートも含め，複数の代替スタイルシートをひとつのスタイル名でグループ化できます。ユーザがある名前の指定されたスタイルシートを選択するとき，その名前を持っているすべてのスタイルシートについて適用されねばなりません。

著者は，UAが常に他の代替スタイルシートと共に適用せねばならない固定（persistent）スタイルシートも指定できます。

各スタイルシートが固定・優先・代替のうち何れであるかは，次の要領で指定します：

さらにHTML 4仕様ではUser Agentの適合性として，著者が指定したスタイルシートのすべてをユーザが不使用にできる様にしなけばならない，としています。この場合User Agentは，すべての固定スタイルシートも，代替スタイルシートも，一切適用してはなりません。

次例の三つのスタイルシートでは，そのうち「標準」を優先とし，「暗い」「明い」のふたつを代替としています：

<head>
  <meta http-equiv="Content-Type" content="text/html">
  <meta http-equiv="Content-Style-Type" content="text/css">
  <title>代替スタイルシートを適用させる例</title>
  <link rel="stylesheet"           title="標準" type="text/css" href="normal.css">
  <link rel="alternate stylesheet" title="暗い" type="text/css" href="darkness.css">
  <link rel="alternate stylesheet" title="明い" type="text/css" href="lightness.css">
</head>
参考・関聯

style要素: 文書ヘッダに埋込む

HTML文書のhead要素内においてstyle要素を記述して，その中身にスタイルシートを埋込む方法です。

特定の文書内だけでなく，複数の文書間でスタイルを共有できるなら，外部スタイルシートを用いるべきです。

旧式のUAが文書内に埋込まれたスタイル内容を本文としてレンダリングしてしまうのを避けるために，スタイルの内容全体をSGMLのコメント区切り子（<!-- と -->）で括ってコメントアウトしてください。そうしてもHTML4およびCSS適合のUAでは問題ありません。

style要素の中身にはCSS構文，つまり@規則と規則集合を書き記し，その全体を <!-- と --> で括ります：

<head>
  <meta http-equiv="Content-Type" content="text/html">
  <meta http-equiv="Content-Style-Type" content="text/css">
  <title>style要素によるスタイルシートの埋込み</title>
  <style type="text/css">
  <!--
  h1 { font-size: x-large; }
  h2 { font-size: large; }
  -->
  </style>
</head>

style要素は文書のhead要素内において幾つ記してもよく，下記に示す属性が用意されています：

type="コンテントタイプ" 省略不可
media="メディアタイプ"

style要素の詳細については，HTML 4.01仕様書邦訳 14.2.3 ヘッダスタイル情報を参照してください。

style属性: 各要素に埋込む

要素の開始タグにstyle属性を指定して，その値として宣言を列記する方法です。HTML 4.01のstyle属性は汎用属性で，body要素内のあらゆる要素に指定可能です（scriptおよびparam要素は除外）。これは例外的・局所的なスタイル情報を附加するのに用います。

次のごとく各要素の開始タグにstyle属性を設定し，その値としてスタイル宣言を列記します：

<p style="font-size: 200%; color: white; background: red;">
  この方法はfont要素などの体裁指定と大差ありません…
  したがって餘り推奨されていないスタイルの指定方法です…
</p>

文書内においてstyle属性を用いているにも拘らず，デフォルトスタイルシートを設定していない文書は不正です。