83 日めくりカレンダーにした日付のデザイン
制作・文＝福島英児
|
 |
XHTML
【1】日付部分のXHTMLのマークアップは、年・月・日それぞれを＜span＞要素を使ってくくる。これにより、それぞれの要素を個別に調整することが可能になる
【2】ここでは日めくりカレンダー風の背景画像を用意する。画像を使わずにdiv.dateにボーダー、span.yearに背景色を指定するだけでもそれらしく見せることは可能なので、いろいろと試してみるとよいだろう
CSS
【3】div.dateのサイズを背景画像のサイズと同値にし、＜span＞要素をブロック化したうえで、それぞれのfont-sizeやcolorなどを指定しよう
［INDEX］
>>> 31 光の反射を表現し、知的な印象を与えるナビゲーション
>>> 32 ガーリーなテイストでデザインされたフレーム
>>> 33 視覚的な表現を追加した訪問済みのリンク
>>> 63 背景画像が手前に飛び出すように見える立体表現
>>> 64 デザイン性の高い洗練されたテイストの表組み
>>> 79 アンチエイリアスオフとテクスチャを合わせた文字
>>> 80 エリアを重ねたような立体感のあるレイアウト
>>> 81 繰り返し処理を考えたインパクトのある背景画像
>>> 82 写真のように鮮明な木目のテクスチャ画像
>>> 83 日めくりカレンダーにした日付のデザイン
