7. CSS のプロパティ

last-modified:29th Aug. 2000;

Contents

HTMLによる見栄えの指定
background-color
color
LINK擬似クラス
background-image

ここでは、CSSのプロパティを網羅的に解説することはしません。

HTML と CSS による見栄えの指定方法を比較してみます。 CSS では、 HTML では不可能な見栄えを柔軟に指定できます。

HTMLによる指定

HTMLは文書を構成する各部分に意味を与えるものです。例えば、ここは「見だし」、ここは「段落」、ここは「引用」などのように。

その点、「背景色」や「文字色」、「フォントの種類」などは「見栄え」であって「意味」ではないので、HTMLで指定するのは現在では筋違いです。

この「見栄え」を指定するためにCSSと云う仕組みが考案されたのですが、それ以前にはHTMLで指定していました。現在では「廃止予定」となった、この古いHTMLを用いた見栄えの指定方法をまず紹介します。

body要素の開始タグ（<body>）の中に、見栄え指定の属性を記述します。

<body bgcolor="#ccccff" text="#333366"
	link="navy" vlink="maroon" alink="green">

左から、「背景色」、「文字色」、「未訪リンクの色」、「既訪リンクの色」、「リンクをクリックした時の色」です。

body要素の属性
属性	属性値	属性の意味
bgcolor	#ccccff	背景色
text	#333366	文字色
link	navy	未訪問のリンクの文字色
vlink	maroon	訪問済みのリンクの文字色
alink	green	作動中のリンクの文字色

【表示例】
これが表示サンプルです。既訪リンク、未訪リンクです。

これを順番にCSSで再現してみましょう。

background-color

手始めに、要素の背景色を変えてみましょう。

次のHTMLソースの例を見てください；（ファイル）

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
  <title>CSS のサンプル文書</title>
  <meta http-equiv="content-style-type" content="text/css">
  <style type="text/css">
  <!--
    body {background-color:#ccf }
  -->
  </style>
</head>
<body>
  <p>
  これは、CSS のサンプルの為の HTML 文書です。
  </p>
</body>
</head>

これでbody要素の背景色が薄い青（#ccf）になっていれば成功です。

ここで、 HEAD要素内のSTYLE要素に注目してください。

body {background-color: #ccf }

今の場合、body要素に対して、CSS宣言として、 background-color:#ccf を設定した事になリます。

body をセレクタ、 background-color をプロパティと呼びます。そして、プロパティとその値を一組として宣言と呼びます。今の場合は、 background-color:#ccf が宣言です。

'background-color'の初期値は transparent です。即ち、親要素の背景色が透過し、同じ色で表示されることになります。わざわざ指定したのは、「この値から変える」と云う意味になる訳です。

一般にCSSプロパティには固有の「初期値」を持ちます。プロパティ毎の初期値を了解しておくと、指定ミスが防げます。

color

次に、文字色（一般に前景色）を設定してみます。先ほど背景色を薄い青にしましたから、文字色は濃い色にしないと読み辛くなってしまいますので、明度・彩度に気を配ってください。

body {background-color:#ccf;
      color:#336 }

ここでは、先ほどの背景色 'background-color' に追加して、前景色 'color' も設定して有ります。複数の宣言の間は、コロン ; で区切られます。body要素内の全ての文字列が濃い青（#336）に表示されている筈です。

【表示サンプル】
ここはH1要素（見だし要素）です。ここはP要素（段落要素）です。

この例では、H1要素やP要素には全く見栄えの指定がされていませんから、親要素であるbody要素の指定が、そのまま子要素であるH1要素、P要素に受け継がれているのが見ることが出来ます。

このように、親要素の指定が子要素に継承されることがCSS（CascadingStyleSheet）の特徴の一つです。

継承は個別の指定に上書きされます。

body {background-color:#ccf;
      color:#336 }
h1 {background-color:navy;
    color:#cc9 }

ここでは、セレクタとして H1 を持つスタイルが追加されています。

【表示例】

ここはH1要素（見だし要素）です。

ここはP要素（段落要素）です。

この例では、H1要素の背景色を濃い青（navy）、前景色を薄い黄色（#cc9）に指定して有ります。body要素の設定が、H1要素の設定に上書きされているのを見ることが出来ます。

'color' の初期値はブラウザに依存するとされており特定は出来ませんが、余程特殊な環境でない限りは「黒（ black, #000 ）」です。

LINK擬似クラス

「背景色」、「文字色」を指定しましたので、次にリンクの色を変えましょう。リンクは、その状態によって「未訪問」、「既訪問 visited」、「作動中 active」の三つに分類できます。

body {background-color:#ccf;
      color:#336 }
a:link {color:navy }          /* 未訪問のリンク */
a:visited {color:maroon }     /* 既訪問のリンク */
a:active {color:green }       /* 作動中のリンク */

ここまでで、冒頭に挙げたHTMLの例が全て再現できたことになります。

CSSでは、リンクの状態によって、さらに「カーソルが上に乗っている場合 hover」、「テキストフィールドなどでフォーカスされている場合 focus」を区別できます。

上のスタイル宣言に追加して、リンクの上にマウスが乗ると、背景色が #fcc 、文字色が red になり、リンクを表す下線が消えるように設定します。

body {background-color:#ccf;
      color:#336 }
a:link {color:navy }          /* 未訪問のリンク */
a:visited {color:maroon }     /* 既訪問のリンク */
a:link, a:visited {text-decoration:underline;}
                              /* 未訪・既訪のリンクは下線を表示 */
a:active {color:green }       /* 作動中のリンク */
a:hover {color:purple;background-color:#fcc;
  text-decoration:none }      /* マウスが上に乗っている */

ここでは、セレクタ A:hover を持つスタイルと、下線を引くプロパティ 'text-decoration' の宣言を追加しました。特に、共通の宣言を持つ異なるセレクタは一度に宣言できるところに注目してください。

【表示例】
上の「CSS例」の表示サンプルです。既訪リンク、未訪リンクです。カーソルを乗せてみて下さい。

このように、LINKの状態を表すセレクタを「リンク擬似クラス」と呼びます。

リンク擬似クラス
リンク擬似クラス	意味	CSS1,2
`a:link`	未訪問のリンク	CSS1
`a:visited`	訪問済みのリンク	CSS1
`a:active`	作動中のリンク	CSS1
`a:hover`	カーソルが上に乗った状態のリンク	CSS2
`a:focus`	テキスト入力にフォーカスされているリンク	CSS2

CSS2では、 :active, :hover, :focus はA要素以外にも用いられる擬似クラスですが、現状ではA要素に限ることになるでしょう。

CSS2では、A:visited:hover のように、擬似クラスを重ねることができます。この例では、「訪問済み且つカーソルが上に乗っているリンク」がセレクタになります。

background-image

次に、背景に画像をあしらって見ましょう。このファイルと同じディレクトリに、 back.jpg と云う画像ファイルが置いて有ります。これを背景画像に用いてみます。

【HTMLによる設定法】

<body background="back.jpg">

HTMLでは、body要素にだけ背景画像をあしらうことが出来て、body要素の開始タグ中にbackground属性を記述します。

これは廃止予定の見栄え指定で、且つbody要素にしか適用できません。

そこで、CSSによる背景画像の導入方法を紹介します。

【CSS記述例】

body {background-color:#ffc;
      color:#00f;
      background-image:url(./back.jpg);}

【表示例】

ここはH1要素（見だし要素）です。

ここはP要素（段落要素）です。

黄色い背景画像が御覧頂けているかと思います。ここで重要なのは、背景色もそのまま指定してあることです。背景画像が読みこまれるまでの時間、或はそもそも背景画像が読みこめない環境の場合、'background-color'で指定してある背景色が使われます。可読性の確保の為、背景画像と同じような明度・彩度の背景色も同時に設定しておいた方が無難でしょう。

'background-image' の初期値は none です。初期状態は「画像を表示しない」となっています。しかし、親要素に'background-image'で画像が設定されていると、子要素にも継承し、この初期値は上書きされます。具体的には、親要素の背景画像が透過します。

因みに、 H1 要素に改めて背景色を指定すると、次のようになります；

【表示例】

ここはH1要素（見だし要素）です。

ここはP要素（段落要素）です。

ここまでは、古いHTMLでも出来ることです。しかし、現在HTMLは意味のマークアップに限定すると云う論理デザインの方向に厳密化しておりますので、このような見栄えの指定はCSSで行うのが主流になっていくでしょう。Netscape6、I.E.5.xなどは通常Userにとってはほぼ満足できるだけCSS1をサポートしています。

ここでは、基本的なCSSのプロパティを例にとって、具体的なCSSを覗いてみました。次に、実際にCSSを記述する時に知っておいたほうが良い決まりを紹介します。