CSS (Cascading Style Sheet) 入門

目次
  1. CSS とは何か？
  2. 簡単な例
  3. CSS の基礎
  4. カスケード
  5. プロパティ
  6. CSS2 (Cascading Style Sheet level 2)

CSS とは何か？

HTML の成長と混乱

まず始めに HTML の簡単な歴史を振り返ってみましょう。ご存知の通り、HTML は CERN に在籍していた Tim Berners-Lee 氏らが開発した、分散情報システ ム WWW のための記述言語として考案されたものです。

WWW が開発された当初は文字ベースのブラウザが使われており、画像などの表示 には外部ビューアを使っていました。1993 年に米国 NCSA で Mosaic が開発され、 HTML の表現力を飛躍的に向上されたインライン画像などの機能が使えるように なりました。Mosaic は WWW の持つ可能性を広く知らしめることに成功し、多くの ユーザを得ました。やがて Netscape Navigator を代表とする商用の WWW ブラウザ が発売されるようになり、これらのブラウザによって実現された様々な拡張機能も、 急速に普及しました。

インターネットの急成長に伴って、もともと主に論文や技術文書を中心に使われ ていた HTML は、個人の趣味や企業の広告など、様々な種類の文書で使われる ようになりました。そうなると、当然「もっと美しいページを作りたい」という 要望が出てきます。RFC-1866 で HTML 2.0 が標準規格として定められましたが、 その後も背景、色、フォント等を指定するための機能拡張が、各ベンダーによって 絶え間なく続けられました。

従来、このような拡張は HTML にタグを追加するという方法で行われてきました。 この事は HTML に大きな混乱を起こしました。つまりブラウザ毎に独自のタグを 追加していったため、相互に互換性が保てなくなってしまったのです。あの悪名 高い『このページは Netscape X.X 以上で御覧下さい』というような文句が見ら れるようになったのも、この頃からでしょう。

W3C は 1997 年の始めに HTML 3.2 を制定して、このような状況に一応の収拾を つけ、同時にスタイルシートというものを導入しました。

スタイルシート

HTML は SGML というマークアップ言語をベースにしています。 これらのマークアップ言語は、基本的には『タグ』を使って文書の『構造』を 記述するようになっています。つまり、「ここは見出しである」「強調する」 「箇条書きである」といった事を指定するのであって、それが何色でどの書体 で表示されるかといった事は、別に指定する必要があるのです。 スタイルシートは、この構造と『見え』の対応を指定するためのものです。

このような方法は特に目新しいものではなく、ワードプロセッサや DTP ツール、 組版ソフトなどでもよく見られます。スタイルを定義しておくことによって、 例えば「見出し」が出てくる度に逐一フォントやサイズを指定するという、 非効率的でミスの起りやすい作業をしなくても済むのです。

従来の WWW ブラウザでは、タグとその見えの対応がブラウザに組み込まれて しまっていました。そのため、見栄えの良いページを作ろうとすると、画像を 多用する必要があったり、<FONT> タグを多用した非効率的なものになっ たり、 <TABLE> タグを多用した複雑なものになってしまう事が多かった のです。

そこで HTML のためのスタイルシートとして提案され、W3C 標準となったのが CSS (Cascading Style Sheet) です。

CSS の利点

まず、HTML の記述に CSS を導入するメリットについて考えてみましょう。 スタイルシートを上手く使うことによって得られる効果には、

といったものが考えられます。

柔軟なページレイアウトが可能になる

CSS は従来の HTML では指定できなかった（ページ作製者を困らせていた） 様々な事が指定できるようになっています。

例えばテキスト部分だけを取っても、フォント名や色以外に、サイズ（px や pt などの単位が使えます）の指定、マージン、インデント、背景色、行送りなどが 指定できます。 またテキストや画像を重ねて表示することも可能なので、簡単なタイトルやロゴマーク ならば、画像を使わずに作ることもできます。

レイアウトを効率良く指定できる
文書全体のサイズが小さくなる
保守が容易になる

「見出しは〜色で書体を〜にしたい」といったような場合、<Hx> タグが 出てくる度に <FONT> タグを挿入する必要がありました。また「字下げ」 を表現するために<BLOCKQUOTE> タグを重ねたり、<TABLE> タグを 使ったりする事も多かったでしょう。

CSS を使えば、各タグのスタイルを一度指定するだけで良いので、非常に効率が 良くなります。また多くの場合文書全体のサイズも小さくなり、余分なタグが なくなるため見通しもよくなるでしょう。

スタイルの統一が取りやすい

後で説明しますが、CSS はスタイルの指定を HTML 文書の中に含めることもでき ますし、別のファイルとして持たせることもできます。

後者の方法を使えば、複数のページ間でスタイルの統一を取ることが容易になり ます。特に企業のページなどでは、この機能は非常に有用でしょう。

過去のブラウザとの互換性を保ちやすい

見栄えを良くするために「トリッキー」なタグの使い方をする必要がなくなる ため、新しいブラウザでは美しく表示され、少々古いブラウザでも何とか読め るような文書を作ることが、比較的容易になるでしょう。

CSS の問題点

現時点における CSS の最大の問題点は、

CSS を完全にサポートしたブラウザは存在しない

という事でしょう。

メジャーなブラウザでは、Internet Explorer 3.0 が一部対応し、4.0 以降 ではかなり対応が進んでいますが、まだ完全ではありません。Netscape Navigator も 4.0 以降で対応していますが、やはり完全ではありません。

CSS を使ったページを作成する場合は、異なる環境で複数のブラウザを使って、 不都合がないかチェックする必要があるでしょう。

簡単な例

それではまず、非常に簡単な例を見てみましょう。 

<HTML>
  <HEAD>
  <TITLE>CSS test page</TITLE>
  <STYLE TYPE="text/css">
    H1 { color: blue }
  </STYLE>
  </HEAD>
  <BODY>
    <H1>CSS TEST</H1>
    <P>これは CSS のテストをするための、簡単なサンプルなのです。</P>
  </BODY>
</HTML>

<HEAD> タグの中に <STYLE> というタグがありますね。この部分が CSS の記述です。この例では 

H1 { color: blue }

となっています。これは簡単に想像できる通り「<H1> タグ中のテキストを 青で表示する」という指示です。

当然 color: red にすれば赤になります。

では、もう少し色々と指定してみましょう。 

H1 { color: red;
     font-family: times, serif;
     text-align: center }

この例では、色を赤、書体を times または serif、配置を中央揃えに 指定しています。

同様に、<P> タグについても様々な指定が可能です。 

P { color: blue;
    font-family: times, serif;	
    font-size: 14pt;
    text-align: justfy }

このように、CSS の導入は非常に簡単です。以下 CSS の使い方について 説明していきましょう。

CSS の基礎

セレクタと定義部 (declaration)

例にあったように、CSS は 

タグ名 { スタイル }

という形式のルールで構成されます。タグ名にあたる部分を『セレクタ』、 スタイルの部分を『定義部 (declaration)』と呼びます。定義部はさらに 『プロパティ』とその値から成り立っています。

前出の例にあったように、定義部には複数のプロパティと値をセミコロン で区切って書くことが可能です。

また、例ではセレクタとして単にタグ名を指定したものしか出てきません でしたが、複数のタグ名をグループ化して同時に指定することも可能です。 この場合グループ化するものをコンマで区切って並べます。例えば 

H1, H2, H3 ｛ color: black }

とすれば、H1, H2, H3 それぞれに対して定義部のスタイルが適用されます。

また単純なタグ名以外にも、文脈（タグの順序関係）やクラスなど様々な ものがセレクタとして利用できます。

クラスセレクタ

HTML 4.0 では、ほとんど全てのタグに CLASS 属性を付けられるように なっていますが、この CLASS 属性の値をセレクタとして使用することが 可能です。

クラスをセレクタとして使用するためには、タグ名の後にピリオドと、 CLASS 属性の取る値を続けます。例えば 

P { font-size: 12pt }
P.large { font-size: 18pt }

としておけば、単に <P>〜</P> とした場合は 12 ポイントの大きさ で、<P CLASS=large>〜</P> とした場合 18 ポイントの大きさで表示 されます。

また、タグ名に依存しない指定も可能です。 

.blue { color: blue }

としておけば、CLASS=blue という属性を付けたタグ中のテキストが、すべて 青色になります。 

<H3 CLASS=blue> 青色の見出しです </H3>
<P CLASS=blue> 同じく青色のパラグラフです。 </P>

ID セレクタ

同じく HTML 4.0 で追加された仕様として、ほとんど全てのタグに ID 属性を 付けることができます。ID は文書中でタグ毎にユニークになるように付けら れた識別子ですが、この ID をセレクタとして使用可能です。 

#uil001 { color: red }
#uil002 { color: green }
#uil003 { color: blue }
...
<UL>
  <LI ID=uli001> 最初の項目は赤
  <LI ID=uli002> 次の項目は緑
  <LI ID=uli003> 最後の項目は青
<UL>

この方法は、文書中の特定のタグのみに適用されるルールを指定するような 場合に適していますが、可搬性に欠けるという問題もあります。

文脈セレクタ

文脈セレクタは、複数のタグの組み合わせに対するルールを指定する方法です。 タグ名やクラス名を空白で区切って並べます。

例えば 

H1 EM { color: red }

とすれば、<H1> タグ中にある <EM> の色を赤にするという意味に なります。したがって 

<H1> ヘッダ１中の<EM>強調</EM>は赤になる </H1>
<P> それ以外の<EM>強調</EM>は赤にならない </P>

この場合 <H1> タグ中の <EM> だけにルールが適用され、<P> タグ中のものには適用されません。

文脈セレクタの構成要素の数に制限はありませんので、さらに深いレベルの 指定をすることも可能です。 

UL LI    { color: red }
UL UL LI { clor: blue }

最初のルールは、<UL> タグ中の <LI> は小さな文字で表示する ことを指示しています。次のルールは２つ以上の <UL> タグ中の中の <LI> を、さらに小さい文字で表示するための指示です。

このようなルールを指定して、 

<UL>
  <LI> 項目 1.
      <UL>
        <LI> 項目 1-a.
        <LI> 項目 1-b.
        <LI> 項目 1-c.
      </UL>
  <LI> 項目 2.
  ...

という文書があった場合、項目 1-a.〜1-c. は両方のセレクタにマッチする 事になります。後に詳しく説明しますが、このような場合はより長いルール が優先して適用されます。

なお、タグ名だけでなくクラスセレクタや ID セレクタも、文脈セレクタの 構成要素として利用することが可能です。

疑似エレメント

欧米の印刷物でしばしば見られる装飾として、段落の一行目を small-caps （小文字の書体が大文字と同じフォント）で表したり、最初の文字を大きく 数行に表示するといったものがあります。

CSS でこのような効果を実現するために、特別なセレクタが用意されています。 タグ中のテキストをレンダリングした結果の、一行目を表す *:first-line 疑似 エレメント、一文字目を表す *:first-letter の２つがあります。 

P:first-line { font-style: small-caps }
P:first-letter { font-size: 200%; float: left }

それぞれ、<P> 要素の最初の行を small-caps にする指定、<P> 要素の一文字目のサイズを倍にする指定です。

残念ながら、これらの疑似エレメントはほとんどサポートされていません。

疑似クラス

多くの WWW ブラウザでは、既に辿ったことのあるリンクとそうでないものを、 色を変えて表示するようになっています。この効果を CSS で指定するために、 <A> 要素には３つの『疑似クラス』と呼ばれるものが用意されています。

A:link でまだ辿っていないリンク、A:visited で既に辿ったリンク、A:active でアクティブな（選択中の）リンクを表すことができます。

多くの場合 <BODY> タグの link, vlink, alink 属性を置き換えるために 使われますが、これらの属性と違い、ちゃんと文脈セレクタの一部として利用で きます。

例えば、 

A:link IMG { border: solid red }

として、まだ辿っていないリンク中の IMG の周囲の色を指示することができます。

継承 (Inheritance)

あるタグに対して特にルールが指定されていない場合、親（そのタグを含むタグ） で指定したルールが適用されるようになっています。

例を見ればわかりやすいでしょう。 

P.blue { color: red }
P.red { color: blue }
EM { text-decoration: underline }

というルールがあった場合、 

<P CLASS=blue> 青を指定した文書中で<EM>強調</EM>すると... </P>
<P CLASS=red> 赤を指定した文書中で<EM>強調</EM>すると... </P>

<EM> タグに関しては色を指定していないので、『強調』という部分は前者の 場合青で、後者では赤で表示されます。

文書全体のプロパティを設定したい場合は、この機能を利用して <BODY> タグ のルールとして指定すれば良いでしょう。

例えば、背景を黒、特に指定しない場合のテキストの色を黄色にする場合は 

BODY { background-color: black; color: yellow }

としておけば良いでしょう。

これは HTML 4.0 で削除された、BODY タグの TEXT 属性や BGCOLOR 属性の 代りとして使うことができます。

SPAN タグと DIV タグ

このように、CSS ではタグ（の構造）に対してスタイルを指定するのですが、 例えば「専門的な用語は斜体で表示したい」場合など、適当なタグを付けら れないこともあります。

このような場合、DIV タグと SPAN タグが役に立ちます。DIV と SPAN は グループ化のためのタグで、スタイルを定義しない限り表示には何も影響 しません。

ブロック要素を含む比較的大きなグループ化には <DIV> を、インライン 要素のみの場合は <SPAN> を使うようになっています。

「専門的な用語は斜体で表示する」場合ならば 

SPAN.techterm { font-style: italic }
...
<P> CSS のルールは<SPAN CLASS=techterm>セレクタ</SPAN>と
  <SPAN CLASS=techterm>定義部</SPAN>に分かれています。

のようにすれば良いでしょう。

カスケード

HTML 文書と CSS の関連付け

HTML 文書に CSS を関連づける方法には、次の３種類があります。はじめの ２つは HTML 文書に埋め込む方法で、最後のものは別のファイルとして用意 する方法です。

タグの属性で指定する

HTML 4.0 では <BODY> 要素中で使われるすべてのタグに、STYLE 属性を 指定することができます。例えば特定の <P> 要素中のテキストを緑で表示 したければ 

  <P STYLE="color: green"> 緑のテキスト </P>

のようにして実現する事ができます。

ただしこの方法では、先に挙げた CSS のメリットが十分に発揮されるとは 言えないので、例外的な使い方だと思っておいた方が良いでしょう。

<STYLE> タグを使う

簡単な例で示したように、<HEAD> 中の <STYLE> 要素を使って スタイルシートを記述することができます。CSS を使う場合は TYPE 属性で "text/css" と指定しておきます。 

<HTML>
  <HEAD>
    <TITLE>CSS test page</TITLE>
    <STYLE TYPE="text/css">
      H1 { color: blue }
    </STYLE>
  </HEAD>
  <BODY>
    <H1> H1 は青になる </H1>
    ....
  </BODY>
</HTML>
CSS 以外にも XSL, JASS などいくつかスタイルシートの規格が存在しますが、 まだあまり実装されていなかったり、対応したブラウザが少なかったりします。
<LINK> タグを使う

別のファイルとして用意された CSS を HTML 文書と結び付けるには、HTML の <LINK> タグを使います。 

<HTML>
  <HEAD>
    <TITLE>title</TITLE>
    <LINK REL=STYLESHEET TYPE="text/css"
      HREF="sample.css" TITLE="Cool">
  </HEAD>
  <BODY>
    <H1> H1 は青になる </H1>
    ....
  </BODY>
</HTML>

この方法は特に、複数の HTML 文書でスタイルを統一したい場合に適しています。

以上の方法に加えて、スタイルシートの中で別のファイルを読み込むことも できるようになっています。これは @import 文を使って 

@import url(http://foo.baa/default.css)

という形で利用できます。

残念なことに、現時点ではこの機能をきちんとサポートしていないブラウザ が多いようです。

以上の方法を組み合わせて使うことも可能で、別のファイルにリンクすると 同時に、文書中でスタイルを指定するといったことができるようになってい ます。

カスケード

複数のスタイルシートを組み合わせて使う機能によって、以下のような使い 方が可能になります。

モジュール化
共通スタイルシートをリンクして、さらにそのページ専用の設定を 加える事によって、冗長さを減らすことができます。
作者／読者のバランス
読者（ユーザ）側でブラウザ組み込みのスタイルシートを上書きする ことによって、好みのデザインで閲覧することが可能になります。

複数のスタイル指定を組み合わせて使う場合、ルール同士が衝突することが しばしばあるでしょう。そのため CSS では、各ルールの優先順位を求める 方法が決められています。

あたかも水が高い場所から低い場所へと流れるように、優先順位の高いルール から低いものへと順に適用される動作はカスケード（『滝』という意味）と 呼ばれ、CSS の名前の由来になっています。

以下、カスケード規則 (cascading rule) について簡単に説明します。

スタイルシートの優先順序

WWW ブラウザが HTML 文書を表示する際に、適用されるスタイルシートと して、以下のようなものが考えられます：

これは優先度の低い順になっています。つまり、タグの STYLE 属性を使った 指定がもっとも優先され、続いて <STYLE> タグによる指定、 <LINK> タグによる指定が続きます。

ルールの優先順序

基本的には、ルールが明示的に与えられている場合はそれを適用し、されて いない場合は、継承によって親のタグのルールが適用されます。

ルール同士が衝突した場合は、詳細度 (specificity) によって優先順位を 決定します。詳細度が高いルールほど優先されます。

詳細度はルールのセレクタ部で決まります。セレクタ部の ID、クラス、タグ 名それぞれの総数を求めて、

ID 100 点
クラス 10 点
タグ名 1 点

として計算した値が、詳細度になります。

以上の規則を適用して優先度が同じになった場合は、より後に記述されている ルールが優先されます。

important

important というキーワードを使えば、この優先順位を変更することができ ます。優先したいプロパティは 

P.blue { color: blue !important }

と書く事によって、このルールは他のルールよりも優先されます。important を指定されたルール同士が衝突した場合は、通常のカスケード規則に従います。

ただし、現時点では important をサポートしていないブラウザも多いようです。

プロパティ

定義部のプロパティには様々な種類があります。ここでは、その中でもよく 使われるものについて説明します。

フォント

文字の書体や大きさなどを指定するプロパティで、非常によく使われるもの でしょう。フォント関係のプロパティには、以下のような種類があります。

font-family

書式 font-family: <フォントファミリ> (,<フォントファミリ> ...)
初期値 ブラウザに依存
継承 ○

フォントファミリを指定するプロパティです。優先させたい順にフォント ファミリの名前を指定します。ブラウザは先頭から順に、その環境で使え フォントの一覧と比較して、見付かったものを選択します。

フォントファミリというのはいわゆるフォントの名前の事で、有名なものと しては欧文では times や helvetica, courier, futura などがあり、和文 フォントでは mincho, gothic などが挙げられます。

フォント名に空白を含む場合は、"" で閉じる必要があります。 

font-family: "times new roman", times, serif

フォントファミリ名のかわりに、汎用ファミリ名を指定することもできます。 汎用ファミリ名とは、具体的なフォント名のかわりに一般的なフォントの種類 を指定するための方法で、以下の５種類があります：

serif セリフ付き（Times など）
sans-serif セリフなし（Helvetica など）
cursive 筆記体のようなもの（Zapf-Chancery など）
fantasy 飾り文字（Western など）
monospace 等幅（Courier など）
これらは基本的に欧文フォントを前提としたものですので、和文フォントが どのような扱いになるかは明らかではありません。実際に、ブラウザによって も異なっています。

font-size

書式 font-size: <サイズ>
初期値 medium
継承 ○

フォントのサイズを指定します。サイズの指定方法には以下の４種類があります。

絶対サイズ

フォントの大きさをキーワードで指定します。利用可能なキーワードは 

xx-small x-small small medium large x-large xx-large

の７つです。それぞれの大きさは 1.5 倍づつ大きくなることが奨励されて います。つまり、あるブラウザのデフォルトの大きさが 10 ポイントであれ ば、large は 15 ポイントになります。

相対サイズ
キーワード larger および smaller を指定し、親タグの font-size の値を 絶対サイズのキーワードひとつ分大きく、または小さくします。
長さ
長さの単位を指定することによって、文字の大きさを指定します。長さの 単位としては、
絶対的な長さ
in インチ
cm センチメートル
mm ミリメートル
pt ポイント
pc パイカ
相対的な長さ
em フォントサイズ
ex 小文字 (x) の高さ
px ピクセル
といったものがあります。フォントサイズの指定には、pt や em がよく 使われています。
パーセント
文字の大きさを親タグの font-size の値に対するパーセントで表します。

font-weight

書式 font-weight: <ウェイト>
初期値 normal
継承 ○

文字のウェイト（線の太さ）を表します。ウェイトの指定は 100, 200 ... 900 のような整数か、normal, bold, bolder, lighter のキーワードを用います。 値が大きいほど線は太くなり、normal は 400、bold は 700 と同じです。

ただし、フォントファミリによっては Bold や DemiBold などの名前を持つ、 太めのフォントが別に用意されている場合もあります。このような場合、どの フォントがどの値に割り当てられるかというルールも存在します。

bolder, lighter のキーワードは、親タグのウェイトから相対的に値を求め ますが、単に値が 100 増減する訳ではなく、利用可能なフォントの中で次に 太い／細いフォントを利用するようになっています。

font-style

書式 font-style: normal | italic | oblique
初期値 normal
継承 ○

文字のスタイルを普通 (normal)、イタリック体 (italic)、斜体 (oblique) のうちから選択します。

italic や oblique が指定された場合、環境によって別のフォントが選択される 場合もあれば、normal のフォントを傾けて合成する場合もあります。

font-variant

書式 font-variant: normal | small-caps
初期値 normal
継承 ○

フォントのバリエーションを指定します。現在は normal と small-caps （小文字を大文字と同じ字体で表示する）のみが選択できます。

font

フォント関連のプロパティを一度に設定することができる方法

font: <スタイル> <バリエーション> <ウェイト> <サイズ>/<改行幅> <フォントファミリ>

という書式もあります。<ウェイト> と <フォントファミリ> 以外は 省略できます。 

P { font: 12pt/14pt sans-serif }
P { font: 80% sans-serif }
P { font: x-large/110% "new century schoolbook", serif }
P { font: bold italic large Palatino, serif }
P { font: normal small-caps 120%/120% fantasy }

色

テキストの色の指定は、もっともよく使われるプロパティのひとつでしょう。

color

書式 color: <色>
初期値 ブラウザに依存
継承 ○

色の指定方法には以下の3種類があります。

名前
色の名前による方法です。CSS1 では以下の 16 種類が提唱されています。 
aqua, black, blue, fuchsia, gray, green, lime, maroon, 
navy, olive, purple, red, silver, teal, white, yellow
これらは Windows VGA のパレットが基になっています。各色の具体的な RGB 値は決められていません。
16 進数
従来 <FONT> タグなどで使われていた方法で、『#』に続けて RGB の順に 16進数で指定します。 
color: #F00	/* #rgb */
color: #FF0000	/* #rrggbb */
rgb
rgb(R, G, B) という形式を使う方法です。R, G, B はそれぞれ 0 から 255 の整数か、0% から 100% の値を取ります。 
color: rgb（255, 0, 0)		/* red */
color: rgb（100%, 0%, 0%)	/* red */

背景

背景関係のプロパティには以下のものがあります。

background-color

書式 background-color: <色> | transparent
初期値 transparent
継承 ×

背景色を指定します。色の指定方法は color の項で説明した値か、または transparent （透明）を指定します。初期値は transparent です。

このプロパティは継承されませんが、特に背景色を指定しない場合は透明に なりますので、結果的に親タグの背景色が透けて見える事になります。同様 の理由で、背景関連のプロパティは継承されないようになっています。

background-image

書式 background-image: <url> | none
初期値 none
継承 ×

背景の画像を指定します。初期値は none （なし）です。url は 

url(image/bg01.png)
url(http://www.foo.baa/image/bg01.png)

のような形式で指定します。

background-repeat

書式 background-repeat: repeat | repeat-x | repeat-y | no-repeat
初期値 repeat
継承 ×

背景画像がブラウザの表示部分より小さい場合、どのように繰り返して表示する かを指示します。repeat は縦横とも（タイル状に）繰り返し、repeat-x と repeat-y はそれぞれ横方向／縦方向のみ繰り返し、no-repeat は繰り返しなし です。

background-attachment

書式 background-attachment: scroll | fixed
初期値 scroll
継承 ×

スクロールバーなどを操作した際に、背景画像を一緒にスクロールさせるか、 それとも固定しておくかを指定します。初期値は一緒にスクロールするように なっています。

background-position

書式 background-position: <パーセント> (<パーセント>)
background-position: <長さ> (<長さ>)
background-position: (top | center | bottom) (left | center | right)
初期値 0% 0%
継承 ×

背景画像の表示位置を指定します。位置の指定方法はパーセントによる方法、 長さによる方法、キーワードによる方法の３種類があります。

パーセントによる指定

例えば 20% 80% と指定された場合、画像の横方向 20% の点をウィンドウの 20% の位置に、画像の縦方向 80% の点をウィンドウの 80% に合わせます。 画像を左上隅に表示する場合は 0% 0%、右下隅に表示する場合は 100% 100% となります。

値がひとつしか指定されていない場合、縦横の値が同じであるとみなします。

長さによる指定
ウィンドウの左上から、画像の左上までの長さを指定します。長さの単位は フォントの項で説明したものが使えます。 値がひとつしか指定されていない場合は、縦横の値が同じであるとみなします。
キーワードによる指定
top と bottom はそれぞれ縦方向の 0% と 100%、left と right は横方向の 0% と 100% を、center は 50% を表します。

background

背景関係のプロパティを一度に指定する方法として、

background: (<色> <画像> <repeat> <attachment> <位置>)

という形式もあります。必要な値を選んで書き、それ以外は省略することが できます。

テキストのプロパティ

テキストのレイアウトや文字飾りに関するプロパティです。

word-spacing, letter-spacing

書式 word-spacing: normal | <長さ>
letter-spacing: normal | <長さ>
初期値 normal
継承 ○

それぞれ単語間および文字間の空白のデフォルト値を指定します。負の値でも かまいませんが、実装の制約があるかもしれません。

text-decoration

書式 text-decoration: none | underline | overline | line-through | blink
初期値 none
継承 ×

テキストの装飾を指定します。それぞれ装飾なし、下線、上線、抹消線、点滅を 表します。

このプロパティは継承されませんが、例えば下線が引かれていた場合、その線は 子のタグ部分にも引かれることになるので、結果的には同じことになります。

vertical-align

書式 vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <パーセント>
初期値 baseline
継承 ×

このプロパティは、タグの垂直方向の配置を指定します。

baseline
タグ中の要素のベースラインを、親タグのベースラインにあわせます。
middle
タグ中の要素の中心を、親タグのベースラインに `x' の高さの半分を足した 位置（ほぼ中心）に合わせます。
sub
要素を下付き文字にします。
super
要素を上付き文字にします。
text-top
要素の最上部を、親タグのフォントの最上部に合わせます。
text-bottom
要素の最下部を、親タグのフォントの最下部に合わせます。
top
要素の最上部を、その行にあるもっとも高い要素に合わせます。
bottom
要素の最下部を、その行にあるもっとも低い要素に合わせます。
<パーセント>
ベースラインを上方向に移動する量を、line-height プロパティに対する 比率で指定します。負の値を指定することも可能です。100% を指定すれば 前の行に、-100% を指定すれば次の行に重なることになります。

text-transform

書式 text-transform: capitalize | uppercase | lowercase | none
初期値 none
継承 ○

テキストの内容を変換します。基本的にアルファベットのためのものです。

capitalize
各単語の一文字目を大文字にします。
uppercase
すべての文字を大文字にします。
lowercase
すべての文字を小文字にします。
none
継承に従います。

text-align

書式 text-align: left | right | center | justify
初期値 ブラウザ依存
継承 ○

水平方向の配置を指定します。それぞれ左揃え、右揃え、中央揃え（センタリング）、 両端揃えを意味します。

text-indent

書式 text-indent: <長さ> | <パーセント>
初期値 0
継承 ○

テキストの最初の行の字下げ（インデント）を指定します。負の値を設定することも 可能です。パーセント値で示した場合は、親タグの幅に対する割合として計算され ます。

line-height

書式 line-height: normal | <数値> | <長さ> | <パーセント>
初期値 normal
継承 ○

テキストの行送りを指定します。指定方法は次の３種類があります：

数値による指定
「フォントサイズ×数値」が行送り幅として設定されます。
長さの単位を指定
その長さが設定されます。
パーセント値で指定
フォントサイズに対する比率として設定されます。

このプロパティをうまく使えば、テキストの重ねあわせなどが簡単に行える ため、面白い効果が得られる場合もあります。

BOX プロパティ

BOX プロパティは、各要素のマージンやパディング、境界、幅、高さなどを 制御するためのものです。これらの要素を制御することによって、非常に 柔軟なレイアウトが可能になります。

BOX プロパティを理解するために、まず CSS のフォーマットモデルについて 説明します。

HTML のタグは、『ブロック要素』と『インライン要素』に分けることができ ます。ブロック要素とは <P>, <Hx>, <UL>, <OL> など、タグの前後で改行が行われてひとつの段落を作る要素です。インライン 要素は <EM> や <A> など改行を伴わないタグを指します。

CSS では、ブロック要素は『ボックス』と呼ばれる構造を持っています。 ボックスはその要素自身と、パディング、境界（ボーダー）、マージンで 構成されています。このボックスを入れ子状に配置することによって、 フォーマットが行われるのです。

それでは、以下ボックスの制御に関するプロパティについて説明します。

マージン

マージン（余白）は、ボックスのもっとも外側に位置する要素で、要素と 要素の間の空白を表します。マージンは常に透明で、親の background が そのまま透けて見えるようになっています。

マージンに関するプロパティには、以下のものがあります：

書式 margin-top: <長さ> | <パーセント> | auto
margin-right: <長さ> | <パーセント> | auto
margin-bottom: <長さ> | <パーセント> | auto
margin-left: <長さ> | <パーセント> | auto
初期値 0
継承 ×

それぞれ要素の上、右、下、左部のマージンを指定するプロパティです。 長さの単位で指定した場合は、その値が設定されます。パーセント値で 指定した場合は、親要素のボックスサイズに対する割合として解釈され ます。

auto を指定した場合は、要素自身のサイズとパディング、ボーダー、 マージンを合計した値が、親要素のボックスと等しくなるように調整 されます。

マージンには負の値を指定することも可能で、この機能をうまく使えば テキストや画像の重ねあわせが、簡単にできるようになります。

以上のプロパティを同時に指定することができる形式、

margin: (<長さ> | <パーセント> | auto) ...

という形式もあります。この形式では、値が４つ指定された場合は順に margin-top、margin-right、margin-bottom、margin-left を表します。 ３つ指定された場合は top、right と left、bottom を表し、２つの場合 それぞれ top と bottom、left と right を表します。値がひとつだけの 場合は上下左右すべてのマージンとして扱います。

パディング

パディングは要素自身と境界との間のスペースです。指定方法などはマージン の場合とほぼ同じですが、負の値を指定することはできません。

書式 padding-top: <長さ> | <パーセント>
padding-right: <長さ> | <パーセント>
padding-bottom: <長さ> | <パーセント>
padding-left: <長さ> | <パーセント>
初期値 0
継承 ×

マージンの場合と同様、各プロパティを一度に指定することができる形式も あります。

padding: <長さ> | <パーセント> ...

値の解釈はマージンの場合と同様です。

境界

書式 border-top-width: thin | medium | thick | <長さ>
border-right-width: thin | medium | thick | <長さ>
border-bottom-width: thin | medium | thick | <長さ>
border-left-width: thin | medium | thick | <長さ>
初期値 medium
継承 ×

それぞれ上、右、下、左部の境界線の太さです。長さの単位による指定の他、 thin, medium, thick というキーワードによる指定が可能です。

各プロパティを一度に指定することができる形式もあります。

border-width: thin | medium | thick | <長さ> ...

値の解釈はマージンの場合と同様です。

書式 border-color: <色> (<色>...)
初期値 color プロパティの値
継承 ×

境界線の色を表します。値の順番は margin タグ等と同様です。

書式 border-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset
初期値 none
継承 ×

境界線のスタイルを指定します。初期値は none なので、このプロパティを 指定しない場合は境界線は表示されません。

各値の意味は以下のようなものになります：

none 境界線なし
dotted 点線
dashed 破線
solid 実線
double 二重線
groove 立体（くぼみ）
ridge 立体（突起）
inset 立体（インセット）
outset 立体（アウトセット）

上下左右のボーダーについて、それぞれ幅、スタイル、色を同時に指定する ためのプロパティもあります。

書式 border-top: <幅> | <スタイル> | <色>
border-right: <幅> | <スタイル> | <色>
border-bottom: <幅> | <スタイル> | <色>
border-left: <幅> | <スタイル> | <色>

また、上下左右のボーダーを同時に指定するためのプロパティもあります。

border: <幅> | <スタイル> | <色>

ボックスの大きさ

書式 width: <長さ> | <パーセント> | auto
hight: <長さ> | <パーセント> | auto
初期値 auto
継承 ×

ボックスの幅と高さを指定します。テキスト対して使うことも可能ですが、 画像などに対して使うと有効でしょう。画像に対して width や hight を 指定すると、必要に応じて拡大／縮小されます。もし片方のみが指定され、 他方が auto に設定されている場合は、もとの画像のアスペクト比を保存 するようになっています。

フロートの制御

書式 float: right | left | none
clear: right | left | both | none
初期値 none
継承 ×

フローティング（回り込み）を制御するプロパティです。float が none の場合、ボックスはテキスト中のタグの書かれた位置に配置されます。 left が指定された場合、ボックスは左端に移動してその右側に続く テキストが配置されます。right の場合は左右が逆になり、同様の動作 をします。

clear はフローティングを中止するプロパティです。none の場合は 左右どちらにフローティング要素があっても構いませんが、left に 設定すると左側のフィローティング要素の回り込みをクリアします。 right の場合は右側、both の場合は両側に対して同じ動作をします。

CSS2 (Cascading Style Sheet level 2)

現在、W3C は CSS2 (Cascading Style Sheet level 2) のドラフトを公開 しています。

CSS2 はセレクタの種類が増え、より柔軟なルールが記述できるようになり ます。定義部のプロパティも追加されています。

さらに新しく『メディア』という概念が導入され、ディスプレイ上の表示 だけでなく、印刷、音声合成、点字ディスプレイなど様々なデバイスに対 して、それぞれルールを指定するための仕組みが作られています。

印刷（紙メディア）の対応のために、改ページやヘッダ／フッタを指定する プロパティが追加されました。また音声合成のためには、音量やスピード、 音色などを指定する『Aural style sheets』が定義されています。

Positioning

Positionig は、CSS1 が制定された後に Microsoft 社と Netscape 社が共同 で草案を作成し、CSS2 に取り込まれた機能です。

今まで紹介してきたプロパティは基本的に、各タグを「どのように表示するか」 制御するためのものでした。Positioning はこれを「どこに表示するか」を制御 するプロパティです。

これは非常に強力な機能ですし、後の章で重要になりますので、簡単に使い方を 紹介しておきましょう。

position

まず要素の表示位置をどのように指定するか決めます。

書式 position: absolute | relative | static
初期値 static
継承 ×

left, top, width, hight

次に、要素の表示位置とサイズを指定するためのプロパティを用います。

書式 left: <長さ> | <パーセント> | auto
top: <長さ> | <パーセント> | auto
width: <長さ> | <パーセント> | auto
hight: <長さ> | <パーセント> | auto
初期値 auto
継承 ×

left, top は position が absolute または relative の場合に、表示する 要素の水平方向、垂直方向の原点からの距離をそれぞれ指定します。これら を指定しなかった場合や auto を指定した場合は、本来表示されるべき位置 に表示されます。

width, hight は position が absolute の場合に、表示する要素の幅と 高さを指定します。表示する要素がテキストで、width が指定されなかった 場合、または auto が指定された場合は、テキストは親要素の幅いっぱい まで表示されますが、width を指定する事によってこれを制限できます。

ここで指定したサイズからはみ出した部分の扱いは、次のプロパティで 決めます。

overflow

書式 overflow: none | clip | scroll
初期値 none
継承 ×

none を指定した場合は、はみ出した部分も表示されます。clip を指定すると、 はみ出した部分はカットされて表示されなくなります。scroll を指定した場合 はスクロールバーなどが表示され、スクロールすることによって見る事ができ るようになります。

clip

また、要素の指定した部分を切り取って表示する事も可能です。

書式 clip: <長方形> | auto
初期値 auto
継承 ×

切り取る領域を指定します。position が absolute である必要があります。 領域の指定は 

rect(top, right, bottom, left)

という形式で指定します。top, right, bottom, left はそれぞれ長さの単位 で、切り取る領域の上、右、下、左部の座標を表します。

表示位置を指定する事によって要素同士が重なった場合は、通常なら子の要素 は親要素の上に、同じレベルの要素は後に書かれたものが上に表示されます。 これを変更する場合は、次のプロパティを使います。

z-index

書式 z-index: <整数> | auto
初期値 auto
継承 ×

整数の値が大きいもの程、上（前面）に表示されます。負の値を指定した場合 p1は、親の要素より下に表示されることになります。

visibility

最後は、要素の表示／非表示を切替えるプロパティです。

書式 visibility: inherit | visible | hidden
初期値 inherit
継承 ○

visible を指定すれば表示され、hidden を指定した場合は表示されなくなり ます。初期値は inherit で、親の要素の値を継承します。