背景色々

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

・・・だけ？

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

ああ！ 14% 89%の場合は・・・えーっと・・・？？

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

ほっほー、当たりじゃ。

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

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

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

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

なんでっ

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

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

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

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

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

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

そうじゃ。

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

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

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

モチロンあるのじゃ。

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