人気ブログランキング | 話題のタグを見る

ブログ活用のヒントを満載
by vlsasaki2
S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31

CSSのトレーニング(16)カレンダー内の画像表示(その1)
カレンダー内の画像の表示は少しコツがあります。

いくつかの階層で背景色(background)が設定してあるのでそれを要領よく非実行文(リマーク)にする必要があります。

関係しているのは、
DIV.CALの「BACKGROUND : #FFFFFF;」
DIV.CAL_BODYの「BACKGROUND : #FFFFFF;」
.CAL_TODAYの「BACKGROUND : #FFFFFF;」
.CAL_TRの「BACKGROUND : #FFFFFF;」
の4箇所です。

これは下の階層から見ると、
一番上  4..CAL_TODAYの「BACKGROUND : #FFFFFF;」
      3..CAL_TRの「BACKGROUND : #FFFFFF;」
      2.DIV.CAL_BODYの「BACKGROUND : #FFFFFF;」
一番下  1.DIV.CALの「BACKGROUND : #FFFFFF;」

となっています。

修正する過程で分かり易いように色を変えてみましょう。
1.DIV.CALの「BACKGROUND : #C0C0C0;」 薄いグレー
2.DIV.CAL_BODYの「BACKGROUND : #FFFFFF;」 白
3..CAL_TRの「BACKGROUND : #808080;」 濃いグレー
4..CAL_TODAYの「BACKGROUND : #000000;」 黒
CSSのトレーニング(16)カレンダー内の画像表示(その1)_a0034054_1522179.jpg


一番下の階層の薄いグレーはそのままにして、それ以外のところを非実行文にします。
上の階層から順番に指定していきましょう。
4..CAL_TODAYの「BACKGROUND : #000000;」を非実行文にした様子。
.CAL_TODAY {
FONT-FAMILY : VERDANA,;
FONT-SIZE : 7PT;
FONT-WEIGHT : BOLD;
/*BACKGROUND : #FFFFFF;*/
COLOR : #3D5586;
TEXT-ALIGN : CENTER;
}

CSSのトレーニング(16)カレンダー内の画像表示(その1)_a0034054_15223683.jpg

3..CAL_TRの「BACKGROUND : #808080;」を非実行文にした様子。
.CAL_TR {
/*BACKGROUND : #FFFFFF;*/
}

CSSのトレーニング(16)カレンダー内の画像表示(その1)_a0034054_15225675.jpg

2.DIV.CAL_BODYの「BACKGROUND : #FFFFFF;」を非実行文にした様子。
DIV.CAL_BODY {
WIDTH : 150PX;
TEXT-ALIGN : CENTER;
/*BACKGROUND : #FFFFFF;*/
}

CSSのトレーニング(16)カレンダー内の画像表示(その1)_a0034054_1524928.jpg


これで一番下の背景色以外はすべて非表示となりました。
背景色を白に戻しておきましょう。
CSSのトレーニング(16)カレンダー内の画像表示(その1)_a0034054_15364437.jpg

by vlsasaki2 | 2004-12-28 15:14 | CSSのトレーニング Top↑
<< CSSのトレーニング(17)カ... CSSのトレーニング(14)本... >>