目次を飛ばして本文へ パン屑リストへ
Powered by Google
目次
link要素によるCSSファイル参照方法
style要素によるCSSの書き込み
style属性へのCSSの書き込み
@importを使ったCSSファイル参照方法
XMLでのCSSの参照方法
3種類のスタイルシート
特定のメディアタイプでのスタイルシートの導入

CSSを参照するには

概要 先ずCSSを、SGML文書、XML文書に関連付けします。そうする事によって、該当文書に対してどのCSSを適用するのかをUAが知る事が出来ます。

HTML4.0以降でのCSSの参照方法

この部分はCSS1と同様です。

概要CSS2では、4つ、CSSを導入する方法があります。

link要素style要素style属性@import規則を用いて参照させる事が出来ます。このうち外部CSSファイルを用いる方法、即ちlink要素、@import規則が推奨されています。というのも、これ自体がCSSの大きな利点の一つなのです。style属性を用いた方法はあまり使用して欲しくないようです。

XHTMLを用いている場合は、後方互換性を確保する為にはlink要素を、後方互換性を確保せず、次世代標準に従うのならば、xml-stylesheet命令を使用します。

対応状況
N7.0
Win
N6.0
Win
e6.0
Win
e5.5
Win
e5.0
Win
e5.0
Mac
e4.5
Mac
O7.0
Win
O6.0
Win
レベル -

この場合には、別のファイルにCSSを書いておく必要があります。拡張子は、「.css」にしておくと良いでしょう。そのファイルには、CSS部分だけを書きます。styleタグもコメントアウトも不要です。

仮に、その作ったファイルの名前を「otameshi.css」とします。このファイル内のCSSをHTMLファイルに反映するには、HTMLヘッダ(<head>と</head>の間)に以下のようにします。
<link rel="STYLESHEET" href="otameshi.css" type="text/css">
rel属性値 は"STYLESHEET"で、CSSの名前と違って最後の「S」は不要です。ほかのファイル名にしたいのなら、「otameshi.css」の部分をそのファイル名に変えるだけで良いです。後ろに付いている「type="text/css"」というのは、そのファイルの内容のMIMEタイプを表します。CSS2では Content-Type(つまり、MIMEタイプ)を text/css と明記する必要があります

rel属性の値は、大文字であっても小文字であっても、又はそれらが混在していても構いません。

また、HTML4.01 では、metaに明記する事と、type に明記する事が必須です。ですので、meta http-equiv="Content-Style-Type" の content と、ここの type 両方に書いておく必要があります。

この方法では複数指定してリンク出来、管理しやすくする為にCSSを分割する事が出来ます。
<link rel="STYLESHEET" href="otameshi.css" type="text/css">
<link rel="STYLESHEET" href="herohero.css" type="text/css">

CSSでは、この方法や@importを使ったCSSファイル参照方法で外部CSSファイルを使う方法が奨められています。それは、以下に挙げる理由に依ります。

  1. ユーザビリティの観点から、すべてのHTMLファイルに共通のスタイルを使うと、統一感が出る
  2. 管理者側の観点から、一つのCSSファイルを書き換えるだけですべてのファイルのスタイルを変更する事が出来る
  3. SGMLの観点から、HTMLから「見栄え」の部分を切り離して、よりシンプルで純粋なHTML、XMLを書く事が出来る
  4. 同じファイルを参照する事から、ネットワーク・トラフィックの軽減にも繋がる
注意点
  1. link要素 と style要素 のカスケード方法は、CSS仕様書には書かれていません。HTML仕様書によると、どうやらそれらもソースにある順でカスケードするようです。
  2. ヘッダに以下のようにデフォルトのスタイルタイプを書いておく必要があります。
    <meta http-equiv="Content-Style-Type" content="text/css">

style要素によるCSSの書き込み

対応状況
N7.0
Win
N6.0
Win
e6.0
Win
e5.5
Win
e5.0
Win
e5.0
Mac
e4.5
Mac
O7.0
Win
O6.0
Win
レベル -

そのファイルだけにそのCSSを使いたい時に有用です。

style要素の内容としてCSSを書きます。例を挙げると、以下のようになります。
<style>
  em { font-weight: bold }
</style>

しかし、style要素 に対応していないUAだと、「em { font-weight: bold }」の部分が丸ごと表示されてしまう可能性があります。それを避ける為には、以下の事を守るようにしてください。

つまり、以下のようになります。
<head>
:
<style type="text/css">
<!--
  em { font-weight: bold }
-->
</style>
</head>

「type="text/css"」についてですが、これはそのファイルの内容のMIMEタイプを表します。CSS2では Content-Type を text/css と明記する必要があります。また、style要素 の type属性 はHTML4.0以降では必須になっています。これら2つの理由から、必ず書かないといけません。

XHTMLでは、style要素の内容は、例えば文字実体参照などは展開されてしまいます。また、コメントはコメントとして、すべて無視されます。それを避ける為には、最初のコメントアウトの代わりに <[!CDATA[ 、最後のコメントアウトの代わりに ]]> としなければなりません。後方互換性を考えるなら、ページ単位のスタイルシートでもlink要素を用いて外部参照するようにしたほうが良いでしょう。

スタイルシート未対応のUAを無視するのでしたら、CDATAであることを示す上記の2つのものを、CSSのコメントとしておくことで、HTMLとして解釈されても問題無いものとすることが出来ます。つまり、最初のコメントアウトの代わりに /* <[!CDATA[ */、最後のコメントアウトの代わりに /* ]]> */ とするのです。HTMLとして解釈されても、上記2つはCSSではコメントとして無視され、XHTMLでは中身はCDATAとして渡され、上記2つは空のコメントとなるだけなので、問題無い、という理屈です。

注意点
  1. link要素 と style要素 のカスケード方法は、CSS仕様書には書かれていません。HTML仕様書によると、どうやらそれらもソースにある順でカスケードするようです。
  2. ヘッダに以下のようにデフォルトのスタイルタイプを書いておく必要があります。
    <meta http-equiv="Content-Style-Type" content="text/css">

style属性 へのCSSの書き込み

対応状況
N7.0
Win
N6.0
Win
e6.0
Win
e5.5
Win
e5.0
Win
e5.0
Mac
e4.5
Mac
O7.0
Win
O6.0
Win
レベル -

これは、たった一つの要素、これにだけ指定したい!という時に有用です。CSSやHTMLの趣旨から考えると、id属性を使ったほうが良いかもしれません。

書き方は、style属性の値として、普通にCSSの宣言を;(セミコロン)で区切って書き込むだけです。例としては、以下のようになります。
<span style="font-size:27pt;font-weight:bold">デカデカ文字</span>
結果、「デカデカ文字」という文字が、27ptの大きさの太字で書かれます。宣言については、規則集合の項に説明があります。

詳細度は、id と 同じく、100 に設定されています。詳細度については、詳細度の項をご覧ください。

注意点
  1. ヘッダに以下のようにデフォルトのスタイルタイプを書いておく必要があります。
    <meta http-equiv="Content-Style-Type" content="text/css">

@import を使ったCSSファイル参照方法

対応状況
N7.0
Win
N6.0
Win
e6.0
Win
e5.5
Win
e5.0
Win
e5.0
Mac
e4.5
Mac
O7.0
Win
O6.0
Win
レベル -

@規則 の一つ、@import を使って外部CSSファイルを参照する方法です。詳細は、@規則の @import の項をご覧ください。

XMLでのCSSの参照方法

対応状況
N7.0
Win
N6.0
Win
e6.0
Win
e5.5
Win
e5.0
Win
e5.0
Mac
e4.5
Mac
O7.0
Win
O6.0
Win
- - -
レベル 2-

CSS2では、XMLへの拡張に伴い、XMLでのCSSファイル参照方法が定義されています。
<?xml-stylesheet href="kokekokko.css" type="text/css"?>
これで、「kokekokko.css」というCSSファイルをそのXMLファイルに関連付ける事が出来ます。

参考文献
  1. Associating Style Sheets with XML documents Version 1.0
  2. XML文書へのスタイルシート関連付け 1.0 (勧告)(上記の日本語版)
  3. CSS2 Errata

3種類のスタイルシート

CSSの場合、スタイルシートは3種類あります。1つを固定スタイルシート、もう1つを優先スタイルシート、最後の1つを代替スタイルシートと言います。

固定スタイルシートとは、スタイルシート機能を切らない限り、適用されるスタイルシートの事です。
style要素、style属性はこれに該当します。
link要素を用いる方法の場合、title属性が無く、ALTERNATEキーワードもないスタイルシート、
xml-stylesheetPIの場合、title疑似属性が無く、alternate疑似属性値が"no"のスタイルシートの事を指します。
<link rel="STYLESHEET" href="otameshi.css" type="text/css">
<?xml-stylesheet href="kokekokko.css" type="text/css"?>

alternate疑似属性の初期値は"no"です。

優先スタイルシートとは、デフォルトのスタイルシートとして読み込まれますが、代替スタイルシートが選択された時には、適用されないスタイルシートの事です。
link要素の場合、title属性 があり、ALTERNATEキーワードが無いスタイルシート、
xml-stylesheetPIの場合、title疑似属性があり、alternate疑似属性値が"no"のスタイルシートの事を指します。
<link rel="STYLESHEET" href="otameshi.css" title="Black-White" type="text/css">
<?xml-stylesheet href="kokekokko.css" title="Black-White" type="text/css"?>

代替スタイルシートとは、デフォルトでは適用されませんが、代替スタイルシートとして選択可能なスタイルシートの事です。
link要素の場合、title属性 があり、ALTERNATEキーワードもあるスタイルシート、
xml-stylesheetPIの場合、title疑似属性があり、alternate疑似属性値がyesのスタイルシートの事を指します。
<link rel="ALTERNATE STYLESHEET" href="tsgino.css" title="中世ヨーロッパ" type="text/css">
<?xml-stylesheet href="kokekokko.css" title="中世ヨーロッパ" alternate="yes" type="text/css"?>

ALTERNATEキーワードとSTYLESHEETキーワードは順不同ですが、上記に示す例のように、ALTERNATEキーワードを先に書いておくと、見分けやすいでしょう。

後者2つのスタイルシートは、同じtitle属性値 を付けてグルーピングする事が出来ます。
<link rel="ALTERNATE STYLESHEET" href="tsgino.css" type="text/css" title="大阪ナニワ">
<link rel="ALTERNATE STYLESHEET" href="jigadekai.css" type="text/css" title="大阪ナニワ">

ユーザはこのタイトルから、好みのスタイルを選択する事が出来ます。

今のところ、スタイルシートの選択機構を持ったUAはNetscape6〜7、Opera7の3種類。InternetExplorerでも内部的には認識しており、それを採用する為の補助プログラムが以下のページで配布されています。

ス切リボ

その他、CGI+SSI(#exec)、JavaScriptなどを使用した試みをなさっている方々がいらっしゃいます。それらは、すべて上記リンクから辿れますので、一度ご検討ください。

特定のメディアタイプでのスタイルシートの導入

特定のメディアでだけそのCSSファイルを参照するように指定する事も出来ます。メディアタイプについては、メディアタイプの項を参考にしてください。以下のように、media属性、又はmedia疑似属性を使用します。
<link rel="STYLESHEET" href="poporo.css" media="tv" type="text/css">
<?xml-stylesheet href="poporo.css" media="tv" type="text/css"?>

この場合は tv タイプのメディアでだけ poporo.css というCSSファイルを参照します。


page top
最終更新日:2004年02月28日
Copyright © 2002-2004 ばあど All Rights Reserved.