【ホームページデザインのコツ】ワンパターンから抜け出す！テーブルデザインの参考サイト６選

2014年7月3日

Contents

価格やスペック表としてよく用いられるテーブル。どんなデザインにしようか迷って、結局いつも通り・・・ということはありませんか？

今回は、テーブルをデザインする際に参考になるサイトをご紹介します。

1.CSS Table Gallery

左端の「Design Name」をクリックすると、そのデザインでテーブルが表示されます。50種類以上あるデザインの中からお気に入りを見つけたら、右端の「Download」をクリック。CSSが表示されるので、コピー＆ペーストでそのまま使えます。

シンプルでキレイなデザインのテーブルバリエーションが紹介されています。記事の一番下のセクション「Final Words」の本文内「the source」から全タイプのソースをダウンロードできます。

スライダーやカラーピッカーで指定した通りにテーブルを生成してくれる、テーブルジェネレーター。コーディングの手間が省けますね。

上部のタブ「Table Designs」をクリックすると、色や形からフィルターをかけてデザインを検索することもできます。

15種類のきれいなテーブルデザインがまとめられたサイト。レスポンシブに対応したものや、CSS3を駆使した美しいホバー効果など、見逃せないデザインばかりです。

レスポンシブのテーブルのコーディングについて解説してくれています。ブラウザの幅に合わせてそのまま縮まるのではなく、段組みまで変えてしまうというアイデアが面白いです。

見出しをクリックすると、その列の値によって行をソートできる、便利なテーブル。比較表などに使えそうですね。Javascriptを使用しています。

こうして見ると、個性的なテーブルや、シンプルな中にも技が光るテーブルなど、デザインの幅はまだまだ広がりそうです。
たかがテーブル、されどテーブル。細部にまで高いデザイン性を保ったサイト制作をしたいものですね。