表(TABLEデザイン)をおしゃれにするCSSスニペット13選。ハイライト、ヘッダー固定、ソートも。
スタイリッシュなデザインのテーブルレイアウトのCSSサンプルをまとめました。
デザインが美しいウェブサイト・ブログが増えています。フォーム周りのデザインも趣向を凝らしたものが多く見受けられるようになりました。目を引くデザインのメニューは利用者の興味を引き付けます。
表(TABLEタグ)はデータを整理してわかりやすく表示できる部品であり利用する機会も多いでしょう。見やすく美しいCSSデザインの一覧表を実装すれば、目を引くこと間違いなしです。
本記事ではフォームの中でも「表(TABLEタグ)」に焦点を当て、おしゃれなCSSスニペットを一覧にしてみました。
テーブル表の基本デザイン。シンプルでわかりやすいCSSデザイン例。
基本的な一覧表デザイン その①
See the Pen
Simple Table CSS by Christopher Shaw (@cshaw)
on CodePen.
CSSのみで実装された一覧表のサンプルです。
一見シンプルな基本形の一覧表ですが、1行おきに交互に色を付ける配色とホバー時のハイライトが付いています。特に細部にこだわらない表を求めている場合は参考になるでしょう。
基本的な一覧表デザイン その②
See the Pen
Flat Table by Nathan Jessen (@njessen)
on CodePen.
こちらもCSSのみで実装された一覧表のサンプルです。
シンプルなフラットデザインの表で、テーブル罫線を白色にしてコンテンツを区切っているところがポイントです。
レスポンシブ対応＋マテリアルデザインのテーブルデザイン
See the Pen
Material Design – Responsive Table by Sergey Kupletsky (@zavoloklom)
on CodePen.
ほぼ白色で最低限の罫線しかない非常にシンプルなテーブル表デザインです。
レスポンシブ対応になっており、スマホ等で見るとカード形式に置き換わります。スマホを意識することが必須になった現代において、一覧表のデザインを検討する上で非常に参考になるデザインサンプルです。
配色やデザイン性にこだわった美しい一覧表のCSSサンプル
全体のデザインバランスにこだわった表
See the Pen
Responsive Table | CSS Grid by Developer Zahid (@DeveloperZahid)
on CodePen.
全体のデザインバランスが良く、非常にスタイリッシュで見栄えの良い一覧表のデザインサンプル。
ハイライトで行が赤くなり非常にわかりやすいです。また、こちらもレスポンシブ対応になっており、スマホ等で見るとカード形式に置き換わります。大変美しいサンプルですね。
派手な配色にこだわった表
See the Pen
MODERN TABLE CSS (FLAT DESIGN) from Comment Redirect Team by Vikas Chauhan (@vikasChauhan)
on CodePen.
背景色に強い色を使った一覧表のサンプルです。
文字を白抜きにしてコントラストを付けて見やすくしています。サイト内に配置すると表自体がとても目立つので、価格表などのデザインを考えるときには、このようなサンプルを参考にしてみるのも面白いです。
行・例ハイライトにこだわった表
See the Pen
Pure CSS Table Highlight (vertical & horizontal) by Alexander Erlandsson (@alexerlandsson)
on CodePen.
こちらの表はマウスをホバーすると、行と列の両方にハイライトが表示されます。
データ量が多い表などの場合は、どこの値を見ているのか分かりやすいと思います。
テーブルタイトルにこだわった表
See the Pen
RWD Table by Ajay (@hello-ajayrawat)
on CodePen.
表のタイトルとサブタイトルを一覧表と分離して表示しているテーブル表サンプルです。
シンプルながらスタイリッシュであり、表の見せ方としてとても面白いですね。
ヘッダー固定、ソート機能、検索等の機能性を重視した一覧表デザインサンプル
ヘッダー固定機能を持つ一覧表
See the Pen
CSS Only Fixed Table Headers by TJ VanToll (@tjvantoll)
on CodePen.
こちらはヘッダー固定機能が付いている表のデザインサンプルです。
表をスクロールしていくとヘッダーが固定で追従してきます。
ソート機能を持つ一覧表
See the Pen
Sortable Tabular Data by Jake’s Tuts (@jakestuts)
on CodePen.
こちらはソート機能が付いている表のデザインサンプルです。
一覧表のヘッダー部分の項目名をクリックすると、データ内容が昇順・降順に並び替えられます。
奇抜なハイライトのデザイン表 その①
See the Pen
Fade and Blur on Hover Data Table by Jack Rugile (@jackrugile)
on CodePen.
マウスホバーでハイライトすると、選択行以外がモザイク表示になります。
実用性は低いかもしれませんが、ユーモアに溢れるデザインサンプルで楽しいですね。
奇抜なハイライトのデザイン表 その②
See the Pen
<Table> Responsive by Pablo García (@pablorgarcia)
on CodePen.
マウスホバーでハイライトすると、セルが飛び出してきます。
暗めの背景色＋ハイライト部分が黄色という配色なので、非常に目立ちます。こちらも非常に面白いアイデアのデザインサンプルです。
高機能一覧表 その①
See the Pen
animated tables by Erik Anderson (@phantomhaircuts)
on CodePen.
一見シンプルな一覧表ですが、右端Detailsの＋ボタンをクリックするとスライドして詳細が表示されます。
一覧＋詳細のような画面セットのデザインを考えるケースで非常に参考になります。
高機能一覧表 その②
See the Pen
dataTables custom row buttons by Dirk Drijkoningen (@RedJokingInn)
on CodePen.
各種機能ボタン、ソート機能、検索機能、データの追加・削除・編集など、全機能載せの表デザインサンプルです。
配色はシンプルながらデザインの見栄えがよく、様々な機能性にも優れており素晴らしいですね。
「Other examples on Codepen」の緑のボタンをクリックしてみてください。類似のテーブル表デザインサンプルがCodePen上でたくさん見れます。
ウェブサイトのフォームをおしゃれにするCSSスニペットシリーズ記事一覧
フォームの各入力要素のスニペットはシリーズ記事化していますので、こちらの記事も参考にしてください。
https://kodocode.net/design-css-textbox/
