サイトマップ
トップページ > CSS > CSS入門 > 文字色と背景(最終修正日:2007-03-06)

文字色と背景

文字色と背景色、背景画像の指定方法を説明します。

colorプロパティ

これまでの例でも出てきましたが、文字色を設定するには、colorプロパティを使用します。

しかし、colorプロパティの正確な意味は、要素の最前面の色を設定するプロパティです。とはいえ、ほとんどの要素の最前面は、文字(テキスト)なので、文字色を設定するには、colorプロパティを使用します。

ブラウザによっては、<hr />等にcolorプロパティを適用することができます。


h2 {
    color: #090;
}
hr {
    color: #900;
}

確認画面

backgroundプロパティ

背景色や背景画像、背景画像の配置方法等を指定するにはbackgroundプロパティを使用します。このプロパティもこれまでの例で何度か登場しました。

背景色の指定

背景色を指定するには、backgroundプロパティに色の値を記述するだけです。


body {
    background: #cfc;
}

確認画面

<body>要素にbackgroundプロパティを使用し、表示される領域全体の背景色を指定しています。

背景画像の指定

背景画像を指定するのにも、backgroundプロパティを使用します。値には、urlと記述した後、「(」と「)」で囲んで画像ファイルへのパスを記述します。このパスは相対パスでも、絶対パスでも構いません。

記述法は次のようになります。

背景画像に使用する画像 これは、背景画像に使用する画像です。使用される場合は右クリックで保存してください。

body {
    background: url(check.gif);
}

確認画面

背景画像を指定した際、要素の表示範囲よりも画像が小さい場合、ブラウザは左上を開始点として、タイル状に画像を配置します。

backgroundプロパティで、背景画像をタイル状に配置させないようにしたり、配置位置を指定したりすることもできます。詳細については、プロパティ一覧のbackgroundプロパティを参照してください。

  • colorプロパティは要素の最前面の色(文字色)を指定
  • backgroundプロパティで背景色を指定
  • backgroundプロパティで背景画像を指定
前ページ色の指定方法(その2) 上へこのページの先頭 ボックスモデル次ページ
Copyleft copyLeft 2008 W-D-L.NET