since: 21st/May/2002; Last Modified: 10th/Dec./2006
本稿で作ったサンプルをまとめておきます
ここに挙げた HTML 文書は、全て XHTML 1.1 で記述したものです。 CSS ファイルに関しては、ブラウザでは開けないかもしれません。その場合は、ローカル PC に保存して、テキストエディタで開いてみてください。
スタイルシートの適用方法は複数ありますので、矛盾した記述が含まれる事があります。外部スタイルシートでは、段落の背景色を青にしているが、 style 要素では赤にしているなどの場合の事です。
外部スタイルシート、 style 要素、 style 属性の適用優先順位は次のようになります。
最初に外部スタイルシートが適用され、それを style 要素が上書きし、更に style 属性が上書きします。外部スタイルシートで段落の文字色を青に指定してあっても、 style 要素で赤に指定してあれば上書きされます。更に、 style 属性で緑に指定されていれば、その段落は最終的には緑色に指定された事になります。
複数の外部スタイルシートを適用している場合は、後ろに記述した link 要素が参照するスタイルシートほど、優先順位が高くなります。 たとえば、次のようなソースの場合を考えます：
<head> <title>坂口安吾を考える</title> <link rel="stylesheet" href="./atomic.css" type="text/css" media="screen" /> <link rel="stylesheet" href="./cool.css" type="text/css" media="screen" /> <link rel="stylesheet" href="./cover.css" type="text/css" media="screen" /> </head>
これは XHTML の場合の例です。最初に atomic.css が読み込まれ、次に cool.css が上書きし、最後に cover.css が上書きします。
外部スタイルシートでも style 要素でも、その中に記述する順番によっても優先順位が指定されます。最後に記述したものほど優先順位が高くなります。
次のようなスタイルシートを考えます：
h1 { text-aling: center;
color: navy;
text-align: right }
p { color: navy }
address { text-align: center }
p { color: maroon }
h1 要素に対するスタイルでは、 text-align が center と right の二通りが指定されています。実際に適用されるのは、後に記述された right の方です。
p 要素に対するスタイルでは、 color が navy と maroon の二通りが指定されています。実際に適用されるのは、後に記述された maroon の方です。
複数の外部スタイルシートを、優先順位をつけて提示して、閲覧者に選ばせることもできます。
CSS が有効な場合は必ず適用されます。
<link rel="stylesheet" href="atomic.css" type="text/css" />
属性 rel の値が stylesheet であり、属性 title があるものは優先スタイルシートです。固定スタイルシートと一緒に適用されます。title 属性の値によって、切り替えることができます。
デフォルトでは、最初に登場する優先スタイルシートの title 属性の値が採用されます。次の場合は、metalic という属性値が採用されます。ユーザがnaturalを選択すると、metalic_core.css は読み込まれず、natural_core.css が読み込まれます。
<link rel="stylesheet" href="metalic_core.css" type="text/css" title="metalic" /> <link rel="stylesheet" href="natural_core.css" type="text/css" title="natural" />
属性 rel の値が "alternate stylesheet" であり、属性 title があるものは優先スタイルシートです。デフォルトでは読み込まれません。ユーザが選択して初めて有効になります。
次の場合は、ユーザが natural を選択したときに初めて読み込まれます。
<link rel="alternate stylesheet" href="natural_alt1.css" type="text/css" title="natural" />
これらのスタイルシートは、Firefox の場合は、[表示(V)] -> [スタイルシート(Y)] で選択可能です。Opera の場合は、[表示(V)] -> [スタイル(S)] で選択可能です。MS IE6, IE7 の場合は、ブラウザの機能では切り替えられません。
スタイルシートを複数の部品に分割することができます。
外部スタイルシートを参照する link 要素を複数記述すると、最初に記述したものから順番に適用されていきます。
例えば、次の例の場合は、最初に atomic.css が適用され、続いて metalic_core.css, metalic_alt1.css が適用されます。ユーザが natural を選択した場合は、atomic.css, natural_core.css, natural_alt1.css がこの順番で適用されます。
<link rel="stylesheet" href="atomic.css" type="text/css" /> <link rel="stylesheet" href="metalic_core.css" type="text/css" title="metalic" /> <link rel="stylesheet" href="natural_core.css" type="text/css" title="natural" /> <link rel="stylesheet alternate" href="metalic_alt1.css" type="text/css" title="metalic" /> <link rel="stylesheet alternate" href="natural_alt1.css" type="text/css" title="natural" />
CSS の中に @import 規則を記述することで外部の CSS ファイルを読み込むことが可能です。
例えば、次のスタイルシートの場合は、最初に文字コードを宣言してあり、続いて、atomic.css, layout.css, color.css, fonts.css が読み込まれます。
@charset "utf-8";
@import url("atomic.css");
@import url("layout.css");
@import url("color.css");
@import url("fonts.css");
出力メディアを指定して、異なる CSS を指定することができます。例えば、パソコンのディスプレイと、プリンタ出力時に別のスタイルシートを適用することができます。指定できるメディアタイプは次の通りです。
- screen
- 非ページ型のコンピュータ・スクリーンを示す。
- tty
- 固定幅の文字グリッドを用いたメディア、例えば、テレタイプ、端末、表示能力に制限のある携帯デバイスなどを示す。このメディアでは、画素単位 px は使えない。
- tv
- テレビ型デバイス（解像度、色数が低く、スクロール能力に制限がある）を示す。
- projection
- プロジェクタを示す。ページ媒体固有の整形モデルが存在する。
- handheld
- 携帯デバイス（小画面、モノクロ、ビットマップ画像、大域幅に制限がある）を示す。
- ページ形式の不透明な物質及び、印刷プレビュー・モードで見る文書を示す。 ページ媒体固有の整形モデルが存在する。
- braille
- 点字の触覚をフィードバックするデバイスを示す。
- embossed
- 点字のページを出力するプリンタを示す。
- speech
- 音声合成機器を示す。CSS2.1 では、将来の拡張予定のために speech を予約するが、未定義とされる。逆に、CSS2 で定義されたメディア・タイプ aural は、CSS2.1 で廃止予定 (deprecated) とされるが、CSS2.1 仕様書の付録で定義されている。
- all
- 全てのデバイスに適当。
外部スタイルシートの場合は、属性 media で指定できます。次の例は、メディアタイプが screen または print のときに atomic.css が読み込まれます。
<link rel="stylesheet" type="text/css" href="./atomic.css" media="screen, print" />
@import 規則では、 URL に続いてメディアタイプが指定できます。次の例では、メディアタイプが print のときに fineprint.css が適用されます。
@import url("fineprint.css") print;
@media 規則と言うものもあります。一つの CSS に、複数のメディア型の定義を記述することができます。
@media print {
/* 紙媒体向けスタイル定義 */
body { font: 10pt serif }
}
@media screen {
/* コンピュータスクリーン向けスタイル定義 */
body { font: 12pt sans-serif }
}
@media screen, print {
/* スクリーン及び紙媒体向けスタイルシート */
body { line-height: 1.2 }
}