83 日めくりカレンダーにした日付のデザイン - MdN Design Interactive

TOP > web creators > WEBパーツ装飾デザイン事典92

Check

web creators

連載記事 web creators

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などを指定しよう

［INDEX］
>>>　31　光の反射を表現し、知的な印象を与えるナビゲーション
>>>　32　ガーリーなテイストでデザインされたフレーム
>>>　33　視覚的な表現を追加した訪問済みのリンク
>>>　63　背景画像が手前に飛び出すように見える立体表現
>>>　64　デザイン性の高い洗練されたテイストの表組み
>>>　79　アンチエイリアスオフとテクスチャを合わせた文字
>>>　80　エリアを重ねたような立体感のあるレイアウト
>>>　81　繰り返し処理を考えたインパクトのある背景画像
>>>　82　写真のように鮮明な木目のテクスチャ画像
>>>　83　日めくりカレンダーにした日付のデザイン

前のページを見る

1
2
3
4
5
6
7
8
9
10
11

この記事をチェックした人はこんな記事も読んでいます。

おすすめの記事

出版物のアフターケア

今日のおすすめ

あらゆるメディアを創造するクリエイターに。
プロフェッショナルのためのツール新登場！

転職ならFind Job !

web creators編集部からのお知らせ

webcreatorsjp 【webcreators記事】「Webサイト制作最新トレンドの傾向と対策 - WordPressを利用したサイト構築（後編）」をアップしました http://t.co/dDtNCZ0q

約7時間前

WEB CREATORS DATABASE

MdNからのお知らせ

『水彩スケッチ教室下描きと上手な絵の具の使い方』お詫びと訂正のお知らせ

『XHTML＆CSS 定番テクニック大全』サンプルデータのダウンロードページに関するご>案内

・RSSをご利用の方へ再設定のお願い

・著作権者の皆さまへ
「Googleブック検索和解について」

ログイン