CSS とは何か

since: 20th/May/2002

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

CSS の必要性

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

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

上に挙げた例は、 XHTML 1.1 の文書例です。ただし、"application/xhtml+xml" である XHTML 文書は、meta http-equiv を指定すべきではない (SHOULD NOT) とされています。

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

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

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

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

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

CSS で何が出来るのか

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

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

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

HTML 文書をテキストエディタで開きます。
head 要素内に次の一行を挿入します。
- XHTML の場合：
```
<meta http-equiv="content-style-type" content="text/css" />
```
  但し、"application/xhtml+xml" である文書には、meta http-equiv を指定すべきではないとされています。
- HTML 4 の場合：
次の行に次の三行を挿入します：
```
<style type="text/css">
p { text-indent: 1em }
</style>
```
HTML も XHTML も同じです。
保存してブラウザで表示を確認します。


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

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

line-height -行の高さの指定

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

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

まとめ

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

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