CSS の適用方法

since: 21st/May/2002; Last Modified: 22nd/May/2002

1. 外部スタイルシート

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

CSS ファイル

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

今は、atomic.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 }

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

全て半角英数字
改行／スペース／タブの挿入は任意
但し、全角スペースは厳禁

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

HTML 文書

1. スタイルシートを使うための HTTP ヘッダ指定

まず、当該文書で使うスタイルシートの種類を指定します。ここでは CSS を指定します。 head 要素に次の行を挿入します。

【XHTML の場合】

<meta http-equiv="content-style-type" content="text/css" />

【HTML 4 の場合】

<meta http-equiv="content-style-type" content="text/css">

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

続いて、読み込む外部スタイルシートのファイルを指定します。 head 要素に次のように記述します。

【XHTML の場合】

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

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

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

【HTML 4 の場合】

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

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

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

ここでは次の情報が指定されています。

属性	意味
`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="Shift_JIS" 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>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=Shift_JIS" />
<meta http-equiv="content-style-type" content="text/css" />
<title>坂口安吾を考える</title>
<link rel="stylesheet" href="./atomic.css" type="text/css" media="screen" />
<?xml-stylesheet href="./atomic.css" type="text/css" media="screen" ?>
</head>
<body>
<h1>坂口安吾を考える</h1>
<p>坂口安吾は、「堕落論」、「日本文化私観」、「白恥」、「桜の森の満開の下」、
「夜長姫と耳男」などが有名な物書きです。明治３９年新潟に生まれ、第二次大戦後１０
年、昭和３０年に脳溢血で没しました。享年４８歳。無頼派として有名であり、「反逆」
と「堕落」がキーワードです。神田のアテネ・フランセで仏文を学んでいた経験からか、
「生」、「生活」、「肉体」、「実質」にこだわり、「枯淡」、「諦念」、「侘び錆び」
を徹頭徹尾否定します。</p>
<p>私は自分の欲望に忠実である事が「誠実」と言う事だと考えます。己の欲するところ
を外的要因で為さぬのならば、それは単純に敗北を意味する。この点で、常軌を逸したと
ころには必ず真実が宿り、強靭であれば正義だと思っています。逆に言えば、己の為すと
ころは、己の欲するところである事が必然的な結論になります。絶望は愚か者の結論。坂
口安吾は絶望して取り澄ますことを嫌い、七転八倒、顛倒混乱、羞恥の底にもがき苦しむ
ことを望みます。全く同感です。</p>
</body>
</html>

テキスト・エディタを開く。
上のサンプルをコピーしてペーストする。
ファイル名を sampleApply1.html として、 atomic.css と同じディレクトリに保存する。
ブラウザで 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=Shift_JIS">
<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>
<p>坂口安吾は、「堕落論」、「日本文化私観」、「白恥」、「桜の森の満開の下」、
「夜長姫と耳男」などが有名な物書きです。明治３９年新潟に生まれ、第二次大戦後１０
年、昭和３０年に脳溢血で没しました。享年４８歳。無頼派として有名であり、「反逆」
と「堕落」がキーワードです。神田のアテネ・フランセで仏文を学んでいた経験からか、
「生」、「生活」、「肉体」、「実質」にこだわり、「枯淡」、「諦念」、「侘び錆び」
を徹頭徹尾否定します。</p>
<p>私は自分の欲望に忠実である事が「誠実」と言う事だと考えます。己の欲するところ
を外的要因で為さぬのならば、それは単純に敗北を意味する。この点で、常軌を逸したと
ころには必ず真実が宿り、強靭であれば正義だと思っています。逆に言えば、己の為すと
ころは、己の欲するところである事が必然的な結論になります。絶望は愚か者の結論。坂
口安吾は絶望して取り澄ますことを嫌い、七転八倒、顛倒混乱、羞恥の底にもがき苦しむ
ことを望みます。全く同感です。</p>
</body>
</html>