64 デザイン性の高い洗練されたテイストの表組み

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

To Use XHTML CSS JavaScript Photoshop Illustrator Fireworks 透過PNG

---

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



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



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

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