文字色と背景

カスタム検索

文字色と背景

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

colorプロパティ

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

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

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


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

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

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


body {
    background: #cfc;
}

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

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

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

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


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

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

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