CSS とは何か

since: 2002-05-20; revised: 2006-12-02.

CSS は HTML 文書（XML 文書）の表示方法（レンダリング）を指定する仕組みです。例えば、見出し h1 要素のフォントは 24px で中央寄せにする、段落 p 要素のフォントは 12px で一文字分字下げするなどのように指定します。本稿では、HTML 文書の実例に対して CSS によって表示方法をいろいろ指定することで、CSS の使い方を説明します。

CSS の必要性

最初に、 HTML で文書を表現します：

<?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>
</head>
<body>

<h1>源氏物語</h1>

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

<h3>第一段</h3>

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

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

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

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

上に挙げた例は、 XHTML 1.1 の文書例です。文章は『源氏物語』第一帖桐壺の第一段です。渋谷栄一研究室から頂戴しました。

ご利用のブラウザで表示を確認してみてください。サンプル

図： HTML 文書の表示例（CSS なし）

この例は、表示体裁を全く指定していません。このとき、閲覧装置はデフォルトの表示体裁でレンダリングします。デフォルトの表示体裁は閲覧製品に依存するものであり、文書製作者が指定するものではありません。文書製作者が表示体裁を指定するために用いるのが CSS です。

文書の価値には、含まれているデータと、プレゼンテーションと云う二つの面があります。データに対して、表現の形を与えることで、意味を持つ情報になります。 HTML 文書閲覧装置は、タグによって明示された意味に、適切な表示方法を与えて表示します。閲覧装置のデフォルトの「適切な表示方法」は製品ごとに異なります。

提供する情報、閲覧する装置が異なれば、最適な表示体裁も異なるので、文書製作者が、表示体裁／プレゼンテーションを明示的に指定することは、内容を過たず伝えるために重要な要素となります。

CSS で何が出来るのか

上で挙げたサンプルに CSS を適用してみましょう。ここでは、 CSS の書式などは一切説明しません。「こう書いたら、こうなった」式に追いかけてみてください。

text-indent -冒頭の字下げの指定

最初に、段落の一行目を一文字へこませてみます。「これを字下げ」、「インデント」と言います。日本語の印刷物の文章では、ほとんどがこの形式で段落をあらわしています。

HTML 文書をテキストエディタで開きます。

head 要素内に次の三行を挿入します：

<style type="text/css">
p { text-indent: 1em }
</style>

保存してブラウザで表示を確認します。


図： CSS のない例	図： CSS で text-indent を指定した例

CSS で text-indent を指定した例を御覧いただくと、 CSS 対応のブラウザでは、段落の一行目は字下げされている事を確認できます。

line-height -行の高さの指定

ほとんどのブラウザでは、デフォルトの見栄えでは、行間が詰まりすぎていて、長い文章を読むのは疲れます。私は、一行の高さが文字の高さの１．３倍から１．５倍くらいが好みです。今は、段落の行を、文字の１．５倍に指定します。

HTML 文書をテキストエディタで開きます。
style 要素を次のように変更します：
```
<style type="text/css">
p { text-indent: 1em;
    line-height: 1.5 }
</style>
```
HTML も XHTML も同じです。
保存してブラウザで表示を確認します。


図： CSS のない例	図： CSS で line-height を指定した例

CSS で line-height を指定した例を御覧いただくと、 CSS 対応のブラウザでは、段落の行の高さが文字の１．５倍になっている事を確認できます。

margin -余白の指定

ほとんどのブラウザでは、デフォルトの見栄えでは、段落間に一行の余白を挿入しています。インデントを取って、行間を広げた後では、段落間に一行取るのは取りすぎかもしれません。今は、段落の周囲の余白をなしに指定します。

HTML 文書をテキストエディタで開きます。

style 要素を次のように変更します：

<style type="text/css">
p { text-indent: 1em;
    line-height: 1.5;
    margin: 0 }
</style>

HTML も XHTML も同じです。

保存してブラウザで表示を確認します。


図： CSS のない例	図： CSS で margin を指定した例

CSS で margin を指定した例を御覧いただくと、 CSS 対応のブラウザでは、段落の周囲に余白がなくなっている事を確認できます。

padding -要素を膨らます指定

ほとんどブラウザでは、デフォルトの見栄えでは、 body 要素の内容をウィンドウの端からぎりぎりに表示します。これでは窮屈な印象を与えますから、 body 要素の内容の周囲にスペースをとって、 body 要素を膨らませてみます。逆に言うと、要素を表示できる領域は親要素などによって決まっているので、内容を表示する領域を小さくすることを意味します。今は、上下に１文字分、左右に body 要素の横幅に対して 5% 分、膨らませます。

HTML 文書をテキストエディタで開きます。

style 要素を次のように変更します：

<style type="text/css">
body { padding: 1em 5% }
p { text-indent: 1em;
    line-height: 1.5;
    margin: 0 }
</style>

HTML も XHTML も同じです。

保存してブラウザで表示を確認します。


図： CSS のない例	図： CSS で padding を指定した例

CSS で padding を指定した例を御覧いただくと、 CSS 対応のブラウザでは、body 要素の周囲が膨らんでいる事を確認できます。この HTML 文書のソースコードは次のようになっています。

<?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>
<style type="text/css">
body { padding: 1em 5% }
p { text-indent: 1em;
    line-height: 1.5;
    margin: 0 }
</style>
</head>
<body>

<h1>源氏物語</h1>

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

<h3>第一段</h3>

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

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

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

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

まとめ

ここまででは、 CSS の書式、プロパティーやパラメータの働きなどは全く説明していません。

勉強を始める前に、本稿のサンプルをローカル PC 上に保存して、 CSS のパラメタである数字を思う様いじってみると、 CSS がどんなものか、雰囲気がつかめると思います。