83 日めくりカレンダーにした日付のデザイン | デザインってオモシロイ -MdN Design Interactive-


83 日めくりカレンダーにした日付のデザイン
制作・文=福島英児

To Use
XHTML
CSS
JavaScript
Photoshop
Illustrator
Fireworks
透過PNG




XHTML

【1】日付部分のXHTMLのマークアップは、年・月・日それぞれを<span>要素を使ってくくる。これにより、それぞれの要素を個別に調整することが可能になる



【2】ここでは日めくりカレンダー風の背景画像を用意する。画像を使わずにdiv.dateにボーダー、span.yearに背景色を指定するだけでもそれらしく見せることは可能なので、いろいろと試してみるとよいだろう


CSS

【3】div.dateのサイズを背景画像のサイズと同値にし、<span>要素をブロック化したうえで、それぞれのfont-sizeやcolorなどを指定しよう
twitter facebook このエントリーをはてなブックマークに追加 RSS

こんな記事も読まれています

この連載のすべての記事

アクセスランキング

5.23(昨日)

MdN BOOKS|デザインの本

Pick upコンテンツ

現在