1と2の間辺りからはじめるCSS講座背景色々

もくじ
目次を飛ばして本文へ
博士H:

では今回は前景と背景についてじゃ。

先に説明したcolorでは、
文字の色をHTMLと同様に6桁の16進数で
指定する方法を教えたの。

生徒A:

あ、もしかして
他にも便利な指定方法があるんですか!?

博士H:

そうなのじゃ。
実はCSSでは、
3桁の16進数で指定することも出来るのじゃ。

生徒A:

え??
それじゃ、減った3桁分はどうなっちゃうんですか?

博士H:

いや、3桁分減ったというよりは、
もとから赤緑青各色を16段階で表現しておるのじゃよ。

例えばじゃ、
#FFFだと#FFFFFFと同じで真っ白、
#000だと#000000と同じで真っ黒、
#3C5だと#33CC55と同じ色
なのじゃ。

生徒B:

ああ、なるほど。
6桁に展開するには、
数字を二回ずつ繰り返せばいい
んだな。

前景ってのは、前にcolorが前景色だって言ってたっけ。

博士H:

うむ、実は前景に関するプロパティというのは
それだけなのじゃよ。

生徒A:

あれ、じゃぁなんで前景っていうんですか?

博士H:

簡単に言うと、将来の為の予約じゃよ。
つまり、将来にもっと細かく前景を
指定出来るようになる可能性はあるのじゃ。

で、背景のほうじゃが、
まずbackgroundプロパティについてじゃ。
これには、
背景の画像、色、位置、固定するかどうか、繰り返し方法
を半角スペースで区切って並べるのじゃ。

生徒A:

"hoge.jpeg" center #558 fix repeat-none
とかどうですか?
早速習った3桁のRGBカラーを使ってみたんですけど。

生徒B:

待て生徒A、そんな勝手に作っても
パソコンが分かるかっての。

博士H:

そうじゃな、
仕様というのは、その為の決まり事なのじゃよ。

順番に行くぞい。
まずは画像の指定の仕方じゃ。
これはurl("")で囲わないといけないのじゃ。

生徒B:

つまり
URLで指定するものは全部それで書く訳ね。

博士H:

そうじゃ、少しだけ例外があるがの。

で、位置の指定方法じゃが、これには幾つかあるのじゃ。
基本は、
横方向の位置、縦方向の位置の順に二つ、
半角スペースで区切って並べる
のじゃ。

生徒B:

値が一つしかない場合とかは?

博士H:

その場合は、その値を横方向に適用して、
縦方向を50%
とするのじゃよ。

もう一つの基本は、
CSSは左上を基本としておるということじゃ。
背景画像は指定した分だけ、
左上の位置からズラして表示されるぞい。

さて、書き方じゃが、
以前教えた長さの単位とパーセンテージが
そのまま使えるのじゃ。

生徒B:

・・・だけ?

博士H:

いやいや、背景の場合は、
パーセンテージで特別な解釈がされるのじゃよ。
例えば、
0% 0%の場合は左上端。
50% 50%の場合はど真ん中、
100% 100%の場合は右下端。

生徒A:

ああ! 14% 89%の場合は・・・えーっと・・・??

生徒B:

背景画像の基準点も一緒に動くって事か?
背景画像の14% 89%の点が
その要素の14% 89%の点に来るんだろ。

博士H:

ほっほー、当たりじゃ。

生徒A:

もしかして、背景って、
要素ごとに指定出来るんですか!

博士H:

モチロンじゃ。
そこがCSSの便利なところでもあるからの。

それで、最後は画像の固定方法じゃ。
fixというのは半分正解じゃな。
正確にはfixedなのじゃ。

これをすると、
スクロールしても背景は同じ位置にあるのじゃよ。
で、これは全体、つまり
bodyhtmlの背景画像以外に
使わないように
の。

生徒A:
生徒B:

なんでっ

博士H:

ひっじょーぉにもったいないハナシじゃが、
バグが多すぎるのじゃよ。

色については、
特に変わったこともないので跳ばすぞい。

最後は、繰り返し方法じゃな。

repeat 縦横方向に繰り返すのじゃ。
repeat-x 横方向のみに繰り返すのじゃ。
repeat-y 縦方向にのみ繰り返すのじゃ。
no-repeat 繰り返さずに単体で表示するぞい。
生徒A:

博士、背景に画像が指定してあるんだから、
繰り返し指定しなかったら必要ないんじゃないですか?

博士H:

いんや。
画像が読み込まれる間はどうなるかの。

生徒A:

あ、背景画像が読み込まれるまでの間にも
文書が読めるようにっていう配慮

なんですね!

博士H:

そうじゃ。

おお、それと、値を省略することも出来るのじゃ。
省略した場合は、初期値ということになるぞい。

fixedを省略するとスクロールする状態、
位置を省略すると一番左上、
繰り返しを省略するとrepeat
色を省略すると透過じゃよ。

生徒B:

背景周りには個別のプロパティってのは無いの?

博士H:

モチロンあるのじゃ。

background-image URLの部分じゃ。
background-color 背景の色指定の部分じゃ。
background-repeat 繰り返し指定の部分。
background-position 位置指定。
background-attachment fixedの部分を書くのじゃ。
博士H:

今日の授業はここまでー。

<ボックスのプロパティ[P] 行間と文字間[N]>

▲見出しへ戻る
最終更新日:2004年04月02日
Copyright © 2001-2003 ばあど All Rights Reserved.