2005年02月07日

カレンダー解説

こんにちは。
今日はカレンダーの部分についてです。
テンプレートは「雪だるま」を使ってます。

CSSの中でカレンダーのデザインに関するものは
1)#calendar {}
2)#calendar table {}
3)#calendar th{}
4)#calendar td{}
5).calendarhead {}
6).calendarday {}
の六つです。
下のカレンダーにつけてある囲みと番号はこれに対応しています。

カレンダー解説


1)ではカレンダー全体の大きさや上下左右との間隔等を指定できます。
ここで文字や背景について指定することも可能です。
ただし文字については他の部分でそれぞれ指定するとここに書いた分は反映されないようです。
また背景については他の部分よりサイズが小さい場合隠れてしまうので指定する意味はありません。

2)では日付の部分の大きさを指定できます。
日付は指定された幅に応じて等間隔に配置されます。
1)で指定した大きさとうまく合うようにしないと背景からはみ出してしまうのでご注意を。

3)では日付の後ろに表示する画像を指定できます。
{}の中に
background-image:url(画像のURL);
background-repeat:no-repeat;
background-position:center;

と入れるとうまくいくようです。
画像なしで背景色を指定することも可能で、その場合上の記述は必要ありません。
ここで日付の文字について指定することもできます。
指定の方法は記事などと同じなので省略(^-^;A
上下左右についてはここでは指定できません。

2005.04.09追記
この「画像」は3)なら青い丸、2)・4)・6)なら白い四角一つの画像のことです。
枠で囲ってある部分全体の画像を用意する必要はありません。


4)では曜日の後ろに表示する画像を指定できます。
方法は3)と同じです。
こちらも3)と同様に背景色や文字の指定も可能です。

5)ではカレンダーの年と月の部分の背景を指定できます。
{}の中に入れるのは
background-image:url(画像のURL);
background-repeat:no-repeat;

の二つです。
ここで年月の文字や背景色を指定することもできます。

6)では日付について指定することができます。
文字や背景色、上下左右との間隔などが指定できます。
文字と背景色については3)で指定した部分については3)が優先されるようです。
優先順位はどうも3)>6)>1)っぽいです。(1は文字のみ)


わかりにくいところがあるかもしれませんが、
カレンダーについてはとりあえずこんな感じです。

読んでくださってありがとうございました!

ラベル:CSS
posted by 四葉屋 at 17:21| Comment(0) | TrackBack(0) | CSSいじり | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]


この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。