CSS講座

文字色・背景

color - フォントの色

フォントの色を指定する場合に使用します。色の指定は、

  • 16進数RGBコード指定（#ff8080, #60f など）
  • 色名指定（red, blue など）
  • RGB指定（rgb(255,0,88)など）

以上の３種類の指定方法が使えます。最初のRGBを16進数コードで示す方法が一般的によく使われていると思います。また、背景色やボーダーの色なども同じ色の指定方法を使います。詳しくは、「色指定について」のページで説明しています。

使ってみれば分かると思うのですが・・・フォントの色の設定は子要素に継承されます。

color: #f00;
color: blue;
color: rgb(255,100,80);

background - 背景の設定

さまざまな背景の設定を行う場合に使用します。

パディング部分・文字の背景部分などの背景を設定します。ただし、マージン部分の背景を設定することはできません。

backgroundプロパティは、background-color, background-image, background-repeat, background-attachment, background-positionを一度に設定するものです。

使い方は、background:の後に、color image repat attachment position をスペースで区切って指定します。ちなみに、順番はこの通りでなくても構いません。また、値は省略することもできます。省略した場合は、それぞれのプロパティの規定値が適用されることになります。

つまり・・・ background: color image;のように color と image 以外を省略したりすることができます。

background: #f00 url("../images/back1.jpg") repeat-x scroll top left;

上記のサンプルの場合、

  • color ⇒ #f00
  • image ⇒ url("../images/back1.jpg")
  • repeat ⇒ repeat-x
  • attachement ⇒ scroll
  • top left ⇒ position

と対応していることになります。

color
背景色を指定します
image
背景画像を指定します
repeat
背景画像の繰り返しを指定します
attachment
背景の表示方法を指定します
position
背景画像の表示位置を指定します

background-color - 背景色の指定

背景色を指定します。

色の指定方法は、「色指定について」のページで説明しています。

background-color: #f0f0f0;

background-image - 背景画像の指定

背景画像を指定します。

background: url(" "); が基本の形となります。ダブルクォーテーションの間に背景画像のパスを指定してください。

パスは、絶対参照もしくはCSSファイルを基準とした相対参照で指定してください。

background-image: url("image/back.gif");

background-repeat - 背景画像の繰り返し表示の指定

背景画像の繰り返しについて指定します。

background-repeatプロパティに指定可能な値は、

repeat（規定値）
背景画像を縦方向・横方向に繰り返し表示させる
background-repeat: repeat;
繰り返し表示
repeat-x
横方向にのみ繰り返し表示させる
background-repeat: repeat-x;
横方向のみ
repeat-y
縦方向にのみ繰り返し表示させる
background-repeat: repeat-y;
縦方向のみ
no-repeat
繰り返し表示は行わない
background-repeat: no-repeat;
繰り返し無し

の４種類です。

このプロパティは背景画像に対して設定を行うので、background-imageが同時に指定されていなければ効果はありません。

background-image: url("image/back.gif");

background-attachment - 背景の表示方法

背景の表示方法を指定します。

背景の表示方法って言っても、分かりにくいですよね。例を下に示してあります。

scroll（規定値）
背景がスクロール表示される
background-attachment: scroll;
背景画像はスクロールされます
背景画像はスクロールされます
背景画像はスクロールされます
fixed
背景は固定されて表示される
background-attachment: fixed;
背景画像は固定されます
背景画像は固定されます
背景画像は固定されます

このプロパティは、スクロールした場合の背景の表示方法ですが、背景画像を指定していないと効果は分かりませんよね。

background-position - 背景の表示位置

背景画像の表示位置を指定します。

背景画像の表示位置・・・というか、背景をどこを基準にして表示していくか指定を行います。

このプロパティは、設定方法が２パターンあります。

  • center, left, right, top, bottom による指定
  • パーセントやピクセルなどを用いて指定

普通は、一つ目の center, left, right, top, bottom による指定を使うと思います。とりあえず、サンプルを見てください。background-repeat: no-repeat;を同時に指定した場合のサンプルも用意しておきました。

left top（規定値）
背景画像は左上を基準に並べられる
background-position: left top;
背景画像は左上から並べられます
背景画像は左上に表示されます
center center
背景画像は中央を基準に並べられる
background-position: center center;
背景画像は中央から並べられます
背景画像は中央に表示されます
30% 80%
背景画像は左から横方向30%、縦方向80% の位置を基準に並べられる
background-position: 30% 80%;
背景画像は 横方向30%、縦方向80%の位置を基準に並べられます
背景画像は 横方向30%、縦方向80% の位置に表示されます
20px 100px
背景画像は左から100px、上から20px の位置を基準に並べられる
background-position: 100px 20px;
背景画像は左から100px、上から20pxの位置を基準に並べられます
背景画像は左から100px、上から20pxの位置に表示されます

多分、サンプルを見ていただければ分かると思います。