Since: May/30th/2004
CSS を HTML/XHTML 文書に適用するには、大きく分けて三つの方法があります。
style 要素style 属性下に行くほど特殊です。
最も一般的な方法です。一つのスタイルシートファイルを複数の HTML/XHTML 文書から読み込みます。特に理由がなければ、この方法だけ使うようにすべきです。
CSS を記述したファイルを一つ用意します。拡張子は .css になります。
atomic.css:
body { padding: 1em 5%;
background: #ccf }
p { margin: 0.5em 0;
padding: 1em;
text-indent: 1em;
line-height: 1.5;
background: #eef }
この CSS ファイルを適用したい HTML 文書側では、head 要素に link 要素を記述します。link 要素の href 属性の値が、当該 HTML 文書から見た CSS ファイルの URL (URI) です。相対 URL でも絶対 URL でも使えます。
HTML4 の場合：
<head> ...省略 <meta http-equiv="content-style-type" content="text/css"> <link rel="stylesheet" href="./atomic.css" type="text/css"> </head>
XHTML1.0/1.1 の場合：
<head> ...省略 <meta http-equiv="content-style-type" content="text/css" /> <link rel="stylesheet" href="./atomic.css" type="text/css" /> <?xml-stylesheet href="./atomic.css" type="text/css" ?> </head>
style 要素スタイルを適用したい HTML/XHTML 文書の head 要素に直接スタイル書き込む方法です。外部スタイルシートでの指定は、 style 要素によって上書きされます。当該文書でだけ有効な、特殊なスタイルを記述します。
HTML4 の場合：
<head>
...省略
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css">
<!--
body { padding: 1em 5%;
background: #ccf }
p { margin: 0.5em 0;
padding: 1em;
text-indent: 1em;
line-height: 1.5;
background: #eef }
-->
</style>
</head>
XHTML1.0/1.1 の場合：
<head>
...省略
<meta http-equiv="content-style-type" content="text/css" />
<style type="text/css">
body { padding: 1em 5%;
background: #ccf }
p { margin: 0.5em 0;
padding: 1em;
text-indent: 1em;
line-height: 1.5;
background: #eef }
</style>
</head>
style 属性スタイルを適用したい要素の開始タグに、属性としてスタイルを記述する方法です。外部スタイルシート／style 要素の指定は、style 属性の指定によって上書きされます。極めて特殊な指定方法で、お勧めできません。
<body style="padding: 1em 5%; background: #ccf"> ...省略 <p style="margin: 0.5em 0; padding: 1em; text-indent: 1em; line-height: 1.5; background: #eef"> ...省略 </p> </body>
外部スタイルシートは、複数の固定スタイルシート (persistent style sheets) と、複数の代替スタイルシート (alternate style sheets) とに分けられます。代替スタイルシートの中で一つを優先スタイルシート (preferred style sheet) に指定できます。
W3C の仕様では、著者による優先スタイルシートと、代替スタイルシートを、閲覧者は選択出来ることになっています。
rel 属性の値が stylesheet で、 title 属性は指定しない。rel 属性の値が stylesheet で、 title 属性を指定する。rel 属性の値が alternate stylesheet で、 title 属性を指定する。XHTML での指定の例：
<!-- 固定スタイルシート； -->
<link rel="stylesheet" href="atomic.css" type="text/css" />
<!-- 優先スタイルシート； -->
<link rel="stylesheet" title="cool"
href="cool.css" type="text/css" />
<!-- 代替スタイルシート； -->
<link rel="alternate stylesheet" title="modern"
href="modern.css" type="text/css" />
<link rel="alternate stylesheet" title="classic"
href="classic.css" type="text/css" />
この例では、特に閲覧者が選ばなければ、 atomic.css と cool.css が適用されます。
閲覧者が、外部スタイルシートを選ばなければ、 UA は「固定スタイルシートと優先スタイルシート」を同時に適用します。複数のスタイルシート間で矛盾が起こった時は、 CSS のカスケード順位で解決されます。
rel="alternate stylesheet" の値は、二つのリンクタイプ "alternate" と "stylesheet" をスペースで区切ったリストになっています。ハイフンやコンマで区切っている解説を見かけることがありますが、誤りです。メディアタイプはコンマ区切りリストなので、混同しないように注意が必要です。
上の例ではスタイルシートの title に対して、一つの外部スタイルシートしか指定していませんでしたが、複数の代替スタイルシートを一つの名前でグループ化し、且つそういったグループを複数指定する事が出来ます。
複数の Alternate StyleSheets の例：
<link rel="alternate stylesheet" title="compact" href="small-base.css" type="text/css" /> <link rel="alternate stylesheet" title="compact" href="small-extras.css" type="text/css" /> <link rel="alternate stylesheet" title="big print" href="bigprint.css" type="text/css" /> <link rel="stylesheet" href="common.css" type="text/css" />
W3C によれば、この例の場合は、閲覧者がスタイルとして "compact" を選択すると、 UA は最初の二つのスタイルシートと、最後の固定スタイルシートの三つを適用するよう求められています。
また、出力メディアに応じて、スタイルシートを変更する事も可能です。
<link rel="stylesheet" media="aural" href="corporate-aural.css" type="text/css" /> <link rel="stylesheet" media="screen" href="corporate-screen.css" type="text/css" /> <link rel="stylesheet" media="print" href="corporate-print.css" type="text/css" /> <link rel="stylesheet" href="techreport.css" type="text/css" />
上から順番に、音声、スクリーン、印刷出力に対応します。最後の出力メディアが指定されていないものは、全ての出力メディアに適用されます。
詳細は「メディア」を参照ください。
Copyright © 2004 SUGAI, Manabu. All rights reserved.