ばけらの CSSリファレンス

color プロパティは要素の前景色、すなわち文字の色を指定します。色の指定方法は色々ありますが、いくつか例を挙げておきます。

 em {color: red;}              /* 赤 */
 strong {color: #0000ff;}      /* 青 */
 a:visited {color: #f0f;}      /* 紫 */
 cite {color: rgb(0,255,0);}   /* 緑 */
 q {color: rgb(0%,100%,100%);} /* 水色 */

色指定をする際には、背景との兼ね合いを考えましょう。迂闊な指定をすると文字が背景に溶け込んでしまい、読めなくなってしまいます。特に、BODY の背景色の初期値が白でも灰色でもないことに注意してください。ある環境では黒地に白字が既定値になっているかも知れません。そんなとき、color: black だけ指定してあると、文字がまったく読めなくなってしまいます。BODY の文字色を指定するときは、同時に背景色も指定すべきです。

なお、font-color というプロパティは(少なくとも今のところは)ありませんので間違えないようにしてください。

background-color プロパティは要素の背景色を指定します。色の指定方法は color とほぼ同じですが、それに加えて transparent という値を取ることが出来ます。transparent は文字通り「透明」という指定で、下にある要素の背景色や背景画像などが透けて見えます。

背景色を指定する際には、文字色に気をつけてください。特に、BODY の文字色の初期値が黒とは限らないことに注意すべきです。黒地に白文字かも知れません。background-color: white だけ指定してあると、文字が読めなくなる可能性があります。

このプロパティは継承しませんが、初期値は transparent ですから、何も指定がなければ下の背景が透けて見えることになります。

background-image プロパティは要素の背景画像を指定します。以下に例を示します。

 body {background-image: url("http://www.ne.jp/asahi/minazuki/bakera/html/htmlban.png")}
 body {background-image: url("../htmlban.png")}

URI を相対指定するときは、スタイルシートからの相対位置であることに気をつけてください。HTML文書からの相対位置ではありません。世の中には、HTML文書からの相対位置として解釈するとんでもないブラウザが存在しているというもっぱらの噂ですが、それは明らかに間違いです。

背景画像を表示できない場合があることを忘れないでください。画像表示に対応していないブラウザ、GIF画像が表示できないブラウザ、画像表示の機能を一時的にオフにしてある、画像を置いてあるサーバーが落ちていた、などなど、原因は様々です。背景画像が表示できなくても文字が読めるように、背景画像に近い色の背景色と、その背景で読めるような文字色を指定しておくべきです。

初期値は none です。background-color と同様、このプロパティも継承しませんが、何も指定がなければ下の背景画像が透けて見えることになります。

背景画像の指定があれば、background-repeat プロパティで背景画像の敷き詰め方を指定する事が出来ます。それぞれの値は以下のような意味を持ちます。

• repeat …… 水平・垂直方向に画像を繰り返し配置して敷き詰める。

• repeat-x …… X軸方向、すなわち水平方向に画像を繰り返し配置する。

• repeat-y …… Y軸方向、すなわち垂直方向に画像を繰り返し配置する。

• no-repeat …… 繰り返し配置を行わず、画像を一枚だけ表示する。

繰り返しは下方向、右方向だけでなく、上方向、左方向にも行われることに注意してください。たとえば、

body{
 background-repeat: repeat;
 background-position: center;
}

のようにすると、まず中央に画像が置かれ、そこから上下左右に画像が敷き詰められます。左や上に空隙ができるわけではありません。

background-attachment は背景画像固定の有無を指定します。scroll を指定すれば、画面のスクロールと共に背景画像も動いていきますが、fixed を指定すると背景画像はウィンドウなどに対して固定されることになり、スクロールしても動きません。

HTML要素や BODY要素以外のものに fixed を指定することも出来ます。小さなブロックボックスに背景画像と background-attachment: fixed; background-repeat: no-repeat を指定した場合、画面をスクロールすると背景画像が抜け落ちる、というような動作をします。背景はその場にとどまっているのですが、スクロールによってボックスが移動すると背景がボックスからはみ出し、表示されなくなるのです。fixed を指定してもボックスの外に背景が描画される事はありません。

……とは言え、実際には HTML要素や BODY要素以外に対する fixed の指定を無視するブラウザも多いようです。

ブロック要素や置換インライン要素(IMGなど)に対して background-position を指定すると、背景画像の位置を指定することができます。左右の位置、上下の位置をパーセント値、長さの指定、あるいはキーワードで指定します。

長さで指定する場合、画像の左上端の位置を指定することになります。最初の数値がボックスの左端からの長さ、次の数値が上端からの長さです。10px 5em と指定すると、ボックスの左から 10px, 上から 5em の隙間を空けて画像が置かれます。

パーセント値で指定する場合、ボックスの左上端からの位置と画像の左上端からの位置を合わせます。たとえば、"0% 0%" の指定ではボックスの左上に画像の左上を合わせ、"100% 100%" の指定でボックスの右下に画像の右下を合わせます。"50% 50%" と指定すると、ボックスの真ん中に画像の真ん中を合わせます。つまり画像は真ん中に表示されます。"23% 81%" と指定すると、ボックスの上から 23%、左から 81% の点に、画像の上から 23%、左から 81% の点が重ねられます。長さで指定する場合と違い、画像の左上頂点の位置を指定するわけではありません。

"5em 50%" のように、長さとパーセント値を組み合わせて使うことも出来ます。長さやパーセント値が一つだけ指定された場合、これは左右位置の指定になり、上下位置は 50% とされます。

また、負の値も指定できます。

キーワードには top, bottom, center, left, right があります。以下のような対応関係があります。

なお、このプロパティを普通のインライン要素に指定しても効果はありません。

background は簡略化プロパティです。background-color, background-image, background-repeat, background-attachment, background-position の 5つを一括して指定することが出来ます。以下に例を挙げます。

body {background: #ffc url("banner.png") no-repeat fixed right bottom;}
p {background: #ffc url("paraback.png");}
strong {background: #ffc;}

それぞれの指定の順番は問いません。以下の二つは同じです。

body {background: #ffc url("banner.png") no-repeat fixed right bottom;}
body {background: right bottom url("banner.png") no-repeat #ffc fixed;}

余談ながら、何故か IE3 は background-image などを認識せずに、省略形の background のみを認識するようです。