ferret編集部:2015年9月2日に公開された記事を再編集しています。

コーディングする際に、何気なく重宝するコードがtableです。
そんなtableですが、コーディングしていると乱雑になってしまったり少し凝ったデザインにしようしても、いまいちと感じてしまうことが多々あります。

今回は、オシャレなtableが簡単に実装できるCSS3のサンプルコードをご紹介します。
コピーペーストで簡単に使えますので、ぜひホームページのデザインに取り入れてみてください。

コピペで使えるtableのサンプルコード19選

1.CSS3のセレクターで作るストライプテーブル

CSS3のセレクターで作るストライプテーブル
http://ascii.jp/elem/000/000/462/462099/
汎用性の高いシンプルなストライプテーブルを作ることができるサンプルコードです。
CSS3のセレクターを使って、行・列ごとに背景色が違う典型的なテーブルをデザインします。
以前のCSS1、2の場合だと背景色を変えるのは結構手間がかかっていましたが、CSS3であれば手軽に実装が可能です。
手順も詳しく解説しており、実務で使いやすい実践的な内容となっています。

2.第3回 CSS3で視認性の高いテーブルを作る

第3回 CSS3で視認性の高いテーブルを作る
http://thinkit.co.jp/story/2011/08/04/2224
CSS3で新たに登場した、:nth-child()擬似クラスを活用したサンプルコードです。
1行ごとに色が違う複雑なゼブラテーブル、ネットショップでよく見る曜日で色の異なるカレンダーをサクッと作成することができます。
視認性の高いデザイン性に優れたテーブルも、CSS3であれば手軽に作ることが可能となります。
作成方法も覚えることができますので、スキルアップにもつながります。

3.CSS3でクールなテーブルデザインを作る方法

CSS3でクールなテーブルデザインを作る方法
http://www.webdesignlibrary.jp/2013/03/table-design-css3.php
ツヤツヤの質感が美しい、デザイン性の高いクールなテーブルを作ることができるサンプルコードです。
グラデーションが綺麗なビ、ジネス向きのテーブルとなっています。
古いテーブルコードを使いながらも、CSS3を取り入れることで見た目の良いテーブルができあがります。

4.HTML5+CSS3でデザインしたtableのCSS&HTMLサンプルソース5点

HTML5+CSS3でデザインしたtableのCSS&HTMLサンプルソース5点
http://liginc.co.jp/web/html-css/html/86739
近年トレンドのデザインである、フラットデザインにぴったりのテーブルが簡単にできるサンプルコードです。
シンプルな色合いも使い勝手がよく、三角矢印がユニークでお洒落な印象です。
応用編として、さらにborder-radiusを組み合わせたテーブルも紹介しています。
こちらも料金表として幅広く活用できます。

5.CSS3 Pricing Table

CSS3 Pricing Table
http://codepen.io/AnthonyMoss/pen/xsioF
マウスオーバーで色が変わる、シンプルな料金表テーブルを作成することができるサンプルコードです。
料金の種別の部分だけ背景色を変えていたり、マウスオーバー時に価格部分だけが色が変わらないなど細部までこだわったデザインです。
点線のデザインも特徴的です。

6.Free Pricing Tables Using CSS3

Free Pricing Tables Using CSS3
https://github.com/dchapkine/css3-pricing-table
カラフルな色使いが素敵な料金表テーブルを作成することができます。
各テーブル左にプラン名の表記があり、個性的なデザインとなっています。
行ごとに色が違ったり項目ごとにアイコンがついていたりと、見やすさ・わかりやすさも抜群です。

7.CSS3 Pricing Table UI Element (Tutorial)

CSS3 Pricing Table UI Element (Tutorial)
http://www.flashuser.net/css3-pricing-table-ui-element
マウスオーバーすると前に突き出る、動きのある料金表テーブルのサンプルコードです。
わずかにグラデーションも取り入れており、質の良いデザインとなっています。
作成手順の解説とデモがついていますので、カスタマイズして使いたいという方にも便利です。

8.Feature table design with CSS3

Feature table design with CSS3
http://red-team-design.com/feature-table-design-with-css3/
丸みを帯びた角とシャドウが特徴のある、シンプルデザインのテーブルを作成することができます。
解説つきで編集も簡単にできますので、角丸テーブルを使いたいという時に重宝します。

9.Pricing Table

Pricing Table
http://cssdeck.com/labs/pricing-table
円を取り入れた、デザイン性に優れたお洒落なテーブルを作ることができるサンプルコードです。
中央の料金部分の背景が円になっているなど、あまり見かけないデザインとなっています。
最近よく見かける、シンプルなフラットデザインに取り入れやすいテーブルです。

10.Multiple Pricing Table

Multiple Pricing Table
http://codepen.io/markthema3/pen/cLKmC
落ち着いたグレー系のカラーで統一した、シンプルな料金表テーブルです。
かっちりとしつつも、角の丸みが優しい印象を与えています。
アクセント的に、ボタン部分だけは明るいブルーでデザインしているのも特徴です。
あらゆるビジネスに最適なデザインです。

11.Very beautiful CSS3 Pricing Tables effect

Very beautiful CSS3 Pricing Tables effect
http://www.htmldrive.net/items/show/1287/Very-beautiful-CSS3-pricing-tables-effect
リボン、ギザギザ感がお洒落な料金表テーブルを作ることができます。
うっすらと見える背景デザインも素敵です。
とにかくデザインのいいものを選びたいという場合にオススメです。

12.Simple Little Table CSS3

Simple Little Table CSS3
http://johnsardine.com/freebies/dl-html-css/simple-little-tab/
ライトグレーのシンプルで汎用性抜群なテーブルを作ることができるサンプルコードです。
1行ごとに若干色の濃淡が異なりますので、見づらいということもありません。
行、列の増やしかたといった使用方法も記載がありますので、カスタマイズがあまり得意でないという方でも使用しやすくなっています。

13.Mini Free Pricing Table

Mini Free Pricing Table
http://codepen.io/joejoinerr/pen/CJAkK
ビタミンカラーがキュートな、ミニサイズの料金表テーブルを作ることができます。
表記内容は料金・プラン名・売り買いの文字のみと、とてもシンプルな内容です。
場所をとらないので、ホームページ内にちょっとした料金案内をつけたいという時に重宝します。

14.Free Responsive CSS Pricing Table with HTML/CSS

Free Responsive CSS Pricing Table with HTML/CSS
http://codepen.io/scottnix/pen/ndJvb
黒を貴重とした、クールな料金表テーブルを作成することができるサンプルコードです。
程よいシャドウと、エメラルドグリーンの差し色が効いています。
ボタン部分は、マウスを乗せるとゆっくりと色が変わります。
かっこいいテーブルをお探しの際にオススメです。

15.How To Build A Pricing Table With CSS3 Animation

How To Build A Pricing Table With CSS3 Animation
http://www.paulund.co.uk/css3-animation-pricing-table
上品なゴールドカラーでデザインした、アニメーションつきテーブルのサンプルコードです。
個別の価格表にマウスを乗せると、影つきで前に突き出るような動きをします。
とにかくシンプルなデザインのものをお探しの場合にぴったりです。
わかりやすいチュートリアルとデモもついてきます。

16.Feature Table Design

Feature Table Design
https://css-tricks.com/feature-table-design/
インパクトのある、グリーン系カラーの料金表テーブルを作成することができるサンプルコードです。
画像と表を組み合わせることで、デザイン性の高いテーブルが出来上がっています。
プラン名の部分に実際に使用してある画像もダウンロードすることが可能です。

17.CSS3 Pricing Table

CSS3 Pricing Table
http://thecodeplayer.com/walkthrough/css3-pricing-table
オレンジとグレーでデザインした料金表テーブルのサンプルコードです。
アクティブかつクールな配色で、あらゆるホームページにマッチするデザインです。
作成行程を動画のように再生して確認することができますので、CSSの勉強にも最適です。

18.CREATE CSS3 PRICING PLAN TABLES TUTORIAL

CREATE CSS3 PRICING PLAN TABLES TUTORIAL
http://designbump.com/css3-pricing-tables-tutorial/
あまり見ない、オレンジの縁取りがお洒落な料金表テーブルを作ることができます。
オススメのプランのみ縁取りが施してあり、色も異なりますのでよく目立ちます。
チュートリアルつきですので、色変更も手軽におこなうことが可能です。

19.CSS3 pricing table

CSS3 pricing table
http://codepen.io/arkev/pen/EDeuG
ツヤ、立体感のある高品質な料金表テーブルを作成することができるサンプルコードです。
微妙なグラデーションと影を取り入れており、見た目の良さはもちろん、わかりやすさも抜群です。
強調したいプランのみ若干デザインが異なるのもユニークです。

まとめ

以上、tableが簡単に実装できるサンプルコードをご紹介しました。
いかがでしたでしょうか。

CSS3が登場してから、これまで以上に実現できるものが増えています。
上記でご紹介したページでは、簡単にコピーペーストで使うことができますので、ぜひtableを利用する機会があれば試してみてください。

また、ご紹介した中にはコード以外にチュートリアル付きのものも沢山あります。
解説を見ながらカスタマイズしたり自分で作ってみると、さらにオリジナリティ溢れるデザインのtableを作成することが可能です。

このニュースを読んだあなたにおすすめ

いくらでも持っておきたい無料のパターン素材60選
【2015年版】商用無料の人気フリーフォント35選
Photoshop初心者必見!Photoshopを使いこなすために知っておくべき情報まとめ

このニュースに関連するカリキュラム

LPOに関するカリキュラム

LPOに関するカリキュラム

LPOに関して、カリキュラム形式で学びましょう