64 デザイン性の高い洗練されたテイストの表組み | デザインってオモシロイ -MdN Design Interactive-


64 デザイン性の高い洗練されたテイストの表組み
制作・文=森弥生((株)アイ・エム・ジェイ)

To Use
XHTML
CSS
JavaScript
Photoshop
Illustrator
Fireworks
透過PNG





【1】作成したい表組みのベースを作成する。次に、表の項目の背景になる色を決める。色を決めるときのポイントは、ページのテイストにもよるが、彩度が低めのカラーを選ぶこと。そうすることで全体が落ち着いた雰囲気になる



【2】表に色をつけていく。プライオリティの高い項目のエリアから順に、明度の濃い色を配置していく。グラデーションなどを使用する場合、つけすぎるとかえってチープな印象になってしまうので気をつけてほしい



【3】仕上げの調整をする。各項目の囲みの内側に、1ピクセルの白のラインを入れると、よりいっそう洗練された印象に仕上がる。ホワイトのラインは透明度を落とし、あくまでさりげなく入れるのがポイントだ


▼使いどころ
ページ内に表組みがある際、簡単にテーブルレイアウトで組み、各項目の背景色もCSSで指定してしまいがちだ。デザイン性のある表組みで、ページ全体のクオリティを上げることができる。
twitter facebook このエントリーをはてなブックマークに追加 RSS

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

この連載のすべての記事

MdN 最新刊

MdN BOOKS|デザインの本

週間アクセスランキング

1.7-1.13