colorのプロパティは、要素の前景色（テキストカラー）を記述します。色の指定はさまざまな方法で可能です。通常、16進数値を使用します。これらの値は常にシャープマークで始まります。それに続いて、通常は3つの数字または文字のペアが続きます。これらは赤、緑、青を表します。したがって、色の指定は常に次のスキーマに従います。
RRGGBB
指定#ffffffは白色を示し、代わりに#000000を使用すると黒色が表示されます。通常のHTMLエディターでは該当するカラーピッカーが用意されています。
ヘックスコードはを使用して確認できます。
また、多くのウェブサイト（例：http://www.farbtabelle.net/）には、色の概要が提供されています。
CSSでは16進数のカラーコードを短縮するオプションがあります。ただし、すべてのカラー値に適用できるわけではありません。この原則は、3つの同じペアの値で構成されている場合のみ機能します。黒と白の色定義の典型的な例は次のとおりです：
.schwarz {
color: #000000;
}
.weiss {
color: #ffffff;
}
この構文は短縮して記述できます。
.schwarz {
color: #000;
}
.weiss {
color: #fff;
}
CSSではRGB値も許容されています。ここでは、0から255までの10進数値をコンマで区切って記述します。色の指定の順序はヘックスカラーと同じです。
a {
color: rgb(100%, 100%, 100%);
background: rgb(0, 0, 0);
}
この例が示すように、パーセンテージ値も可能ですが、実際にはあまり一般的ではありません。
色の定義の別のバリエーションとして、カラーキーワードがあります。以下はいくつかの例です：
• black
• red
• blue
• yellow
• white
• green
関連する定義は次のようになります：
p {
color: white;
background: black;
}
CSS3では、利用可能なカラーキーワードのパレットが大幅に拡張されました。CSS3では、SVG仕様から色名を受け継ぎました。利用可能な色名の概要はhttp://www.w3.org/TR/SVG/types.html#ColorKeywordsで確認できます。
背景の定義
backgroundは、このチュートリアルの後半で詳しく紹介される可能性のある次の値の要約です：
• background-attachment
• background-color
• background-image
• background-position
• background-repeat
各値はスペースで区切って記述する必要があります。順序は問題ありません。すべての値を指定する必要はありません。
例：
p {
background: transparent
url(logo.jpg)
scroll repeat 0% 0%;
}背景色
要素に背景色を割り当てるには、background-colorプロパティを使用します。
div {
background-color: #009999;
}
欲しい色を指定します。
背景画像
background-imageは背景として画像を指定します。このプロパティが外部のCSSファイルに記述されている場合、相対パスはCSSファイルが配置されているディレクトリを基準にします。
• none – 背景画像なし
• URI – 画像へのパス指定
以下に例を示します。
<div style="background-image:url(hinten.jpg); margin:20px; padding:20px">
Willkommen auf PSD-Tutorials.de!
</div>
ただし、背景画像の使用には慎重に取り組んでください。あまり目立つ背景画像はテキストの読みやすさを損なう可能性があります。
もちろん、外観が重要なウェブサイトもあります。ここでは、目を引く背景を使用することが適しているかもしれません。
スクロールする背景
要素が長い場合、ページをスクロールすると背景画像が移動します。これを防ぐにはbackground-attachmentを使用できます。
• fixed – スクロールと一緒に移動
• scroll – 背景画像が固定され、ブラウザウィンドウ（ビューポート）に合わせて配置されます。background-attachmentプロパティは通常、background-imageと組み合わせて使用されます。
例：
div.fest {
background-image: url(background.gif);
background-repeat: no-repeat;
}背景の位置
background-repeatプロパティを使って、背景がどこから始まるかを指定します。基準点は、画像が定義された要素です。
• パーセンテージ – 画像の要素の左上隅からの距離を表す1つまたは2つの値。2つの値がある場合、最初の値は水平方向の距離を、2番目の値は垂直方向の距離を表します。基準点は画像の左上隅ではなく、画像内のある点であり、x/y値でも指定されます。
• 長さ – 画像の左上隅から要素の左上隅までの距離を決定します。1つまたは2つの値が許可されます。2つの値がある場合、最初の値は水平距離を、2番目の値は垂直距離を定義します。
さらに、以下のキーワードも可能です:
• left – 水平左寄せ
• center – 中央揃え
• right – 水平右寄せ
• top – 垂直上寄せ
• bottom – 垂直下寄せ
次は、具体例を示します:
p {
background-position: 8em top;
}繰り返しの背景画像
背景画像が表示領域よりも小さい場合に、background-repeatを使用して画像の繰り返し方法を決定できます。
• repeat – 背景画像が水平および垂直に要素全体を繰り返します。
• repeat-x – 画像は水平方向のみ繰り返されます。
• repeat-y – 画像は垂直方向のみ繰り返されます。
• no-repeat – 画像は繰り返されません。
以下に具体例を示します:
body {
background-repeat: repeat-y;
}
この場合、画像は垂直方向のみ繰り返されます。
一方、repeat-yを設定すると、繰り返しが水平方向のみ行われます。
このチュートリアルは、色や画像の面でも、CSSの強力さを示しています。
