<<PREV | TOP | NEXT>>

CSS の適用方法 - 外部スタイルシート

since: 21st/May/2002; Last Modified: 10th/Dec./2006

CSS を別ファイルに保存し、 HTML 文書からは CSS ファイルへのリンクを指定する事で当該文書に適用する事が出来ます。一つの CSS ファイルを複数の HTML 文書に適用出来ます。逆に言えば、 CSS ファイルを変更すれば、そのファイルを適用していた全ての HTML 文書の表示体裁／レンダリング方法が一斉に変わります。本ページに対しても、この方法で CSS を適用しています。

CSS ファイル

CSS ファイルを、外部スタイルシートと呼びます。 HTML と同様、単なるテキストですから、テキスト・エディタで作成／編集します。ファイル名は、拡張子を *.css にします。

今は、atomic.css と言う名前で外部スタイルシートファイルを作成してみます。

atomic.css:

html { background: #ccf }
body { margin: 0; 
    padding: 1em 5% }
div.section { margin-top: 1em; margin-left: 5%;
    padding: 1em;
    background: #eef }
p { text-indent: 1em;
    line-height: 1.5;
    margin: 0.5em 0 }

テキストエディタに上の５行を入力し、 atomic.css というファイル名で保存します。次のことに気をつけてください。

続いて、この外部スタイルシートを適用する HTML 文書側の注意点を述べます。

HTML 文書

外部スタイルシートへのリンク

読み込む外部スタイルシートのファイルを、head 要素の子要素として link 要素で記述します。

XHTML の場合

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" >
<head>
    <title>源氏物語 第一帖 桐壺 第一段</title>
    <link rel="stylesheet" href="./atomic.css" type="text/css" media="screen" />
</head>
:

複数の外部スタイルシートを読み込みたい場合は、優先順位の逆順に、上記のソースを複数回記述します。

<link rel="stylesheet" href="./atomic.css" type="text/css" media="screen" />
<link rel="stylesheet" href="./cool.css" type="text/css" media="screen" />

HTML 4 の場合

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="content-style-type" content="text/css">
    <title>源氏物語 第一帖 桐壺 第一段</title>
    <link rel="stylesheet" href="./atomic.css" type="text/css" media="screen">
</head>
:

HTML 4 も、複数の外部スタイルシートを読み込みたい場合は、優先順位の逆順に、上記のソースを記述します。

<link rel="stylesheet" href="./atomic.css" type="text/css" media="screen">
<link rel="stylesheet" href="./cool.css" type="text/css" media="screen">

外部スタイルシートにリンクする link 要素

ここで追加した link 要素には次の情報が指定されています。

属性意味
rel="stylesheet"読み込む文書がスタイルシートである
href="./atomic.css"読み込む文書の位置は "./atomic.css" である
type="text/css"スタイルシートの種類が CSS である
media="screen"読み込ませる対象の出力装置はコンピュータ・スクリーンである

読み込む CSS ファイルが別のディレクトリにあれば、 href 属性の値が変わります。値の指定方法は URL であり、絶対 URLと相対 URL の両方が使えます。a 要素の href 属性と全く同じ使い方です。

では、実際に、上で作った atomic.css と同じディレクトリに、次のような HTML 文書を作成、保存して試してみましょう。

XHTML 1.1 の例

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<title>源氏物語 第一帖 桐壺 第一段</title>
<link rel="stylesheet" href="./atomic.css" type="text/css" media="screen" />
</head>
<body>

<h1>源氏物語</h1>

<h2>第一帖 桐壺</h2>

<h3>第一段</h3>

<div class="section">
<p>いづれの御時にか、女御、更衣あまたさぶらひたまひけるなかに、いとやむごとなき
際にはあらぬが、すぐれて時めきたまふありけり。</p>

<p>はじめより我はと思ひ上がりたまへる御方がた、めざましきものにおとしめ嫉みたま
ふ。同じほど、それより下臈の更衣たちは、ましてやすからず。朝夕の宮仕へにつけても
、人の心をのみ動かし、恨みを負ふ積もりにやありけむ、いと篤しくなりゆき、もの心細
げに里がちなるを、いよいよあかずあはれなるものに思ほして、人のそしりをもえ憚らせ
たまはず、世のためしにもなりぬべき御もてなしなり。</p>

<p>上達部、上人なども、あいなく目を側めつつ、「いとまばゆき人の御おぼえなり。唐
土にも、かかる事の起こりにこそ、世も乱れ、悪しかりけれ」と、やうやう天の下にもあ
ぢきなう、人のもてなやみぐさになりて、楊貴妃の例も引き出でつべくなりゆくに、いと
はしたなきこと多かれど、かたじけなき御心ばへのたぐひなきを頼みにてまじらひたまふ
。</p>

<p>父の大納言は亡くなりて、母北の方なむいにしへの人のよしあるにて、親うち具し、
さしあたりて世のおぼえはなやかなる御方がたにもいたう劣らず、なにごとの儀式をもも
てなしたまひけれど、とりたててはかばかしき後見しなければ、事ある時は、なほ拠り所
なく心細げなり。</p>
</div>    <!-- END section -->
</body>
</html>
  1. テキスト・エディタを開く。
  2. 上のサンプルをコピーしてペーストする。
  3. ファイル名を sampleApply1.html として、 atomic.css と同じディレクトリに保存する。
  4. ブラウザで sampleApply1.html を開く。

CSS 対応のブラウザでは、この HTML 文書に対して、同じディレクトリの atomic.css が適用されます。

外部スタイルシートを適用した例
図：外部スタイルシートを適用した例

HTML 4 の例

CSS 適用部分はほとんど変わりません。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-style-type" content="text/css">
<title>源氏物語 第一帖 桐壺 第一段</title>
<link rel="stylesheet" href="./atomic.css" type="text/css" media="screen">
</head>
<body>

<h1>源氏物語</h1>

<h2>第一帖 桐壺</h2>

<h3>第一段</h3>

<div class="section">
<p>いづれの御時にか、女御、更衣あまたさぶらひたまひけるなかに、いとやむごとなき
際にはあらぬが、すぐれて時めきたまふありけり。</p>

<p>はじめより我はと思ひ上がりたまへる御方がた、めざましきものにおとしめ嫉みたま
ふ。同じほど、それより下臈の更衣たちは、ましてやすからず。朝夕の宮仕へにつけても
、人の心をのみ動かし、恨みを負ふ積もりにやありけむ、いと篤しくなりゆき、もの心細
げに里がちなるを、いよいよあかずあはれなるものに思ほして、人のそしりをもえ憚らせ
たまはず、世のためしにもなりぬべき御もてなしなり。</p>

<p>上達部、上人なども、あいなく目を側めつつ、「いとまばゆき人の御おぼえなり。唐
土にも、かかる事の起こりにこそ、世も乱れ、悪しかりけれ」と、やうやう天の下にもあ
ぢきなう、人のもてなやみぐさになりて、楊貴妃の例も引き出でつべくなりゆくに、いと
はしたなきこと多かれど、かたじけなき御心ばへのたぐひなきを頼みにてまじらひたまふ
。</p>

<p>父の大納言は亡くなりて、母北の方なむいにしへの人のよしあるにて、親うち具し、
さしあたりて世のおぼえはなやかなる御方がたにもいたう劣らず、なにごとの儀式をもも
てなしたまひけれど、とりたててはかばかしき後見しなければ、事ある時は、なほ拠り所
なく心細げなり。</p>
</div>    <!-- END section -->
</body>
</html>

標準準拠モード

MS IE6, IE7 では、ページに応じて、表示方法が二種類に分かれます。一つは、仕様に対して正しくは無いが、過去の動作との互換性を重視したモード。もう一つは、過去の動作との互換性は無いが、標準仕様に準拠したモードです。前者を互換モード、後者を標準準拠モードと呼びます。標準準拠モードも、完全に準拠しているわけではありませんが、互換モードよりもある程度はマシです。

MS IE6 の場合

MS IE6 の場合、一行目が DOCTYPE の場合、標準準拠モードでレンダリングされます。DOCTYPE がなかったり、XML 宣言やコメントが一行目の場合は、過去互換モードでレンダリングされます。XHTML は XML 宣言が一行目になるので、MS IE6 は正しく処理できないことになります。

MS IE7 の場合

MS IE7 の場合は、一行目が XML 宣言で、二行目が DOCTYPE の場合に、標準準拠モードになります。本コンテンツの例は、このように記載しています。

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<title>源氏物語 第一帖 桐壺 第一段</title>
<link rel="stylesheet" href="./atomic.css" type="text/css" media="screen" />
</head>
：

W3C 準拠の場合

MS IE 7 で XML 宣言（XML プロローグ）が書けるようになりましたが、それでもまだ W3C 準拠からすると正しくありません。

外部スタイルシートを使う場合は、XML 文書としては、XML 宣言の後にスタイルシート処理命令が続くはずです。この場合は、DOCTYPE は二行目にならないので、MS IE7 は過去互換モードで表示します（正しい処理をしてくれません）。

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="./atomic.css"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<title>源氏物語 第一帖 桐壺 第一段</title>
<link rel="stylesheet" href="./atomic.css" type="text/css" media="screen" />
</head>
：

MS IE でのこまかい見栄えにこだわらないですむ場合は、本コンテンツの例に、スタイルシート処理命令を追加してください。私は、特定のブラウザのバグに依存せず、標準に準拠して書くべきだと思います。この文書ではつぎのようになります。

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="./base.css" type="text/css" media="screen" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" >
<head>
<title>CSS 入門 | CSS の適用方法 > 外部スタイルシート</title>
<link rel="prev" href="./apply.html" />
<link rel="next" href="./apply2.html" />
<link rev="made" href="nextindex@gmail.com" />
<link rel="stylesheet" href="./base.css" type="text/css" media="screen" />
</head><body>
:

この例では、スタイルシート処理宣言がXML宣言とDTD宣言の間に挟まっているので、MS IE7 で標準準拠モードでレンダリングされません。max-height, borderの幅やmarginのautoをはじめとするボックスの解釈、その他の細かい指定が無効になってしまい、いかにも不便です。

ここでは、XMLプロローグに書くべきスタイルシート処理宣言を、DTD直後に記述することを提案します。先の例では、次のようになります。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<?xml-stylesheet href="./base.css" type="text/css" media="screen" ?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" >
<head>
<title>CSS 入門 | CSS の適用方法 > 外部スタイルシート</title>
<link rel="prev" href="./apply.html" />
<link rel="next" href="./apply2.html" />
<link rev="made" href="nextindex@gmail.com" />
<link rel="stylesheet" href="./base.css" type="text/css" media="screen" />
</head><body>
:

繰り返しますが、本来はXML処理宣言とスタイルシート処理宣言は同じ場所に書くべきです。これは緊急避難的な超法規的措置です。本稿のサンプルでは、本来あるべき形でXML宣言の直後にスタイルシート処理宣言を記述しています。一方、本稿自体は、後者のように、スタイルシート処理宣言をDTD直後／html要素の開始タグ直前に挿入することで、MS IE7 に標準準拠モードでレンダリングさせるようにしています。

<<PREV | TOP | NEXT>>

Copyright © 2002 SUGAI, Manabu.. All Rights Reserved.
2002-05-21 Published, 2006-12-10 Revised.