creatersnest104

オシャレなテーブルデザインが参考になるサイトまとめ


自分で作った表(テーブル)がいまいち洗練されていない、と感じていませんか?
センスを磨きたいと感じたら、かっこよくてオシャレなものをどんどんまねて
作ってみましょう。

自分で「これいい!」とインスピレーションが沸くのは、センスが磨かれている証拠。
たくさん作って自分のものにしてしまいましょう!

目次

tableを見やすくするCSSデザインパターン/Webデザインとグラフィックの総合情報サイト -MdN Design Interactive

tableを見やすくするCSSデザインパターン01
tableを見やすくするCSSデザインパターン02

http://www.mdn.co.jp/di/articles/2363/?page=14

CSSでデザインしやすく汎用性の高いシンプルなタイプのテーブルを解説しています。
また、グラデーションを使ったものやhoverでセルの色を変更する方法も
解説していて、読むだけでも十分に学ぶことができます。

 

CSSのみでレスポンシブなテーブルデザインを。/REDLINE MAGAZINE

CSSのみでレスポンシブなテーブルデザインを。

http://redline.hippy.jp/restart/css/post-505.php

オシャレとはちょっと違うかもしれませんが、これからのWebサイトは
どんなデバイスでも閲覧できるよう対応していく必要があります。

そんなレスポンシブなデザインをCSSだけで対応するテクニックについて
解説しています。

 

HTML Tables with CSS Styles/TEXT FIXER

HTML Tables with CSS Styles01
HTML Tables with CSS Styles02
HTML Tables with CSS Styles03

http://www.textfixer.com/tutorials/css-tables.php

英語のサイトです。
BASICなタイプのテーブルデザインです。
背景色のグラデーションにはCSS3を使ったり、交互に背景色を変えるのに
JavaScriptを使ったりしています。
ソースの表示だけでなく、ダウンロードもできます。

 

html/cssで作るtableデザインのコードサンプル/Webworker’s Clip

html/cssで作るtableデザインのコードサンプル01
html/cssで作るtableデザインのコードサンプル02
html/cssで作るtableデザインのコードサンプル03

http://www.webworkersclip.com/2875/

全体的にシャープな感じの、ビジネスサイトでも使えるようなテーブルデザインです。
どんなサイトでも使えるシンプルさは、使い回しがきいていつでも使えるように
手元にとっておくと便利かもしれませんね。

 

コピペでテーブルCSSデザイン色々/WEB中.net

コピペでテーブルCSSデザイン色々01
コピペでテーブルCSSデザイン色々02
コピペでテーブルCSSデザイン色々03
http://webnaka.net/webdesign/テーブルcssデザイン色々/

タイトルの通り、ソースをコピーペーストして利用できます。
とてもシンプルで、初心者の方にはうってつけの学習ができるはずです。
カラーをいろいろ工夫して自分らしいテーブルにデザインしてみましょう。

 

CSS シンプルなテーブルデザイン/niwadesign

CSS シンプルなテーブルデザイン01
CSS シンプルなテーブルデザイン02
http://www.niwadesign.jp/kouza/table_02.html

まるでノートのようなテーブルと、浮き出たようなテーブルですが、
ソースも短いので利用しやすいです。
短いわりに使い回しの効くデザインです。

 

CSS3を使用してかっこいいテーブルを作ってみました/Takeshi’s Home Page

CSS3を使用してかっこいいテーブルを作ってみました
http://takeshishomepage.com/css3_cool_table

タイトルの通り、CSS3を使ったグラデーションが美しいプライステーブルです。
チェックマークと×マークは画像ですが、それ以外は全てCSS3で表現しています。
HTMLとCSSのソースも公開されてますので、すぐに使えて便利です。

 

CSS3を使って美しく装飾されたテーブルの作り方/Webpark

CSS3を使って美しく装飾されたテーブルの作り方
http://weboook.blog22.fc2.com/blog-entry-329.html

青を基調としたシンプルなテーブルデザイン。
角も小さく丸いカットでやわらかい印象もあって、スタイリッシュですね。
ボーダーで見やすく、使い勝手もよさそうです。

 

CSS Design Catalog/d-spica

CSS Design Catalog
http://www.d-spica.com/designcatalog/table/

CSSによるシンプルな使いやすいテーブルが5つ掲載されています。
それぞれのテーブルの下にある「ソースを見る」をクリックすると、
ソースと一緒に解説も入っているのでとてもわかりやすいサイトです。

 

CSSだけで作るtableデザインテクニック/Webクリエイターズマニュアル

CSSだけで作るtableデザインテクニック

http://creators-manual.com/tablecss/

ビジネスサイト向きなテーブルのCSSデザインです。
固いイメージになりがちですが、余白を多くいれていてとても見やすいです。
画像のデザインタイプ01だけでなく、02もあります。

 

CSSだけで作るtableデザインテクニックVer.02(おまけ付き) /Webクリエイターズマニュアル

tablecss18

http://creators-manual.com/tablecss02/

同サイトのデザインテクニックVer.02になります。
よりシックで落ち着いたデザインのテーブルです。

テクニック03では画像も使っていて、おまけとしてその画像を
ダウンロードできるようになっています。

 

CSSでTableをデザインするサンプル集/CSS Lecture

CSSでTableをデザインするサンプル集

http://creators-manual.com/tablecss02/

10個のデザインテーブルサンプルがあって、それぞれのソースをダウンロードできます。
自分の好みのデザインが見つかるかもしれません。
もちろん、自由にカスタマイズしてもOKなので、どんどんいじりたおせそうです。

 

CSS3で角丸Tableの作り方/CodeR-株式会社ウフルのコーダーブログ

CSS3で角丸Tableの作り方
http://coder.blog.uhuru.co.jp/demo/2012/rounded_corners_table/

角丸のテーブルがおしゃれな印象を受けるデザインです。
CSSには、それぞれコメントでどの部分の設定をしているかわかりやすくなっています。
thead,tbodyの使用、不使用の例もあげてあるので、どんな感じになるのか
イメージしやすいですね。

 

Practical CSS3 tables with rounded corners/</rtd>

Practical CSS3 tables with rounded corners01
Practical CSS3 tables with rounded corners02
http://red-team-design.com/practical-css3-tables-with-rounded-corners/

英語のサイトですが、本文の途中にある「View demo」のリンクをクリックすると、
テーブルのサンプル一覧が確認できます。

ソースの解説もありますので(英語です)、表示されているソースをコピーしながら
実際にどのような動きになるか確認しながら学べますね。

 

CSS3 pricing table/</rtd>

CSS3 pricing table

http://red-team-design.com/css3-pricing-table/

先にご紹介した</rtd>の、プライステーブルのサンプルです。

一目でわかる価格比較のテーブルですが、とてもファッショナブルな印象を受けます。
やはりHTMLやCSSのソースを見ながら学ぶことができます。

 

Beautiful CSS3 Table Pricing Style /freshdesignweb

Beautiful CSS3 Table Pricing Style
http://www.freshdesignweb.com/free-css-tables.html

一瞬「これがテーブル?!」と目を疑うようなデザインセンスのある
テーブルデザインが多数あります。
英語サイトですが、More InfoボタンをクリックするとHTMLやCSS、
JSが一目でわかるように工夫されていて、利用しやすいサイトです。

 

Tag Box/CSS Table Gallery

Tag Box
http://icant.co.uk/csstablegallery/tables/97.php

英語のサイトですが、タイトルのとおりさまざまなCSSデザインのテーブルが
瞬時に確認できます。
テーブル内の「Design Name」の中から、TagBoxを選んでみた状態です。
明るいグリーンの配色から、hoverが黄色でわかりやすいですね。

 

orange and grey/CSS Table Gallery

orange and grey
http://icant.co.uk/csstablegallery/tables/87.php

先にご紹介したCSS Table Galleryの別デザインで「Orange and grey」です。
1段ごとに背景色も文字色も違うので、見間違いは起こりにくそうですね。
右の列の「Download」をクリックすれば、ソース一式を入手できます。

 

A CSS styled table version 2/veerle’s blog

A CSS styled table version 2
http://veerle-v2.duoh.com/blog/comments/a_css_styled_table_version_2/

英語のサイトです。
10年前にデザインされたテーブルですが、いまだにアクセスの高いサイトです。
それだけ経過しても閲覧されているということは洗練されているということですね。

 

Top 10 CSS Table Designs/Smashing Magazine

Top 10 CSS Table Designs01
Top 10 CSS Table Designs02
Top 10 CSS Table Designs03
http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/

英語サイトです。
シンプルできれいなデザインのテーブルが10個紹介されています。
背景にカラーや画像を使ってメリハリのあるデザインがとてもきれいです。
ページの下部に他のデザインへのページリンクがあります。

 

Pimp Your Tables with CSS3/codrops

 

Pimp Your Tables with CSS3-01
Pimp Your Tables with CSS3-02
Pimp Your Tables with CSS3-03
http://tympanus.net/codrops/2010/05/03/pimp-your-tables-with-css3

英語のサイトです。
いろいろなタイプのプライステーブルがあって、どれも「うーん」とうならせてくれる
デザインばかりです。
サンプルごとにソースも紹介されています。

 

コピペでそのまま使える!デザインtableのCSS&HTMLソース5つ/LIG BLOG

コピペでそのまま使える!デザインtableのCSS&HTMLソース5つ01
コピペでそのまま使える!デザインtableのCSS&HTMLソース5つ02
http://liginc.co.jp/web/html-css/html/86739

テーブルのデザインの参考になるサイトの紹介以外に、実際のコーディングも
ソース付きで解説しています。

吹き出し調になっていたり、セルごとにグラデーションにしたりと
一風変わった感じのテーブルが作成できます。

 

Simple Little Table CSS3/JohnSardine

Simple Little Table CSS3-01
http://johnsardine.com/freebies/dl-html-css/simple-little-tab

英語サイトです。
とても繊細なテーブルデザインを解説しているサイトです。
角は小さく丸みをとって、テーブル全体や罫線にも影をつけて立体的にみせていて、
とても丁寧な作りの印象をうけますね。
ソースをダウンロードできます。

 

【CSS】互い違いに行の色を変えるテーブルデザイン/デザインスタジオ・エフ

【CSS】互い違いに行の色を変えるテーブルデザイン
http://design-studio-f.com/blog/css-table-design/

行の背景色を互い違いに変えるCSSデザインのテーブルです。
CSS3で使えるようになったnth-childの疑似クラスを使い、
何番目の行や列を指定できるようになったので、それを利用したCSSのテクニックを学べます。

 

[使えるCSSテクニックVol.2] CSS を使った見栄えの良いテーブル パート2/バシャログ。

CSS を使った見栄えの良いテーブル パート2-01
CSS を使った見栄えの良いテーブル パート2-02
CSS を使った見栄えの良いテーブル パート2-03
http://c-brains.jp/blog/wsg/08/11/12-163313.php

基本的なテーブルをどう見栄え良くするか、アイデアのヒントをもらえそうな
サイトです。
カラーを変えていくだけでも、かなり見栄えは変わりそうですね。
画像を使っている箇所もあります。

 

Stylish CSS Tables Tutorial/CSS MENU MAKER

Stylish CSS Tables Tutorial
http://cssmenumaker.com/blog/stylish-css-tables-tutorial

英語のサイトです。
スタイリッシュなテーブルができるまでの流れを追いながら解説しています。
hoverにもちょっと凝っていておもしろいデザインです。

 

CSS3でクールなテーブルデザインを作る方法/Web Design Library

CSS3でクールなテーブルデザインを作る方法
http://www.webdesignlibrary.jp/2013/03/table-design-css3.php

かっこいいテーブルを作りたいときにやってみたいデザインを紹介しています。
掲載されているCSSをHTMLに追加するだけで、画像のようなテーブルが瞬時に
できあがります。

 

CSSでテーブルデザインをクオリティアップ/Hatena chips

CSSでテーブルデザインをクオリティアップ
http://hatenachips.blog34.fc2.com/blog-entry-255.html

テーブルまわりや、罫線を陰影として使ったりしておしゃれなテーブルが
できあがります。
ソースも掲載されているので、立体的なテーブルを作りたいときにとても参考に
なります。

 

jQueryでtableのセルをハイライト/fine×3

jQueryでtableのセルをハイライト
http://www.finefinefine.jp/web/kiji696/

CSS3だけでなくjQueryもよく使われるようになった昨今ですが、
そのjQueryで動的な動きをするテーブルデザインを見つけたので紹介します。
hover位置がわかりやすくなるよう、縦や横のラインにも背景色が動くような
仕組みです。
より動きのあるサイトを作ってみたい方はぜひ。

 

CSSTableGenerator

CSSTableGenerator
http://www.csstablegenerator.com/

CSSやHTMLをきちんと知らなくても、スライダーやプルダウンメニューから選ぶだけで
ソースができてしまう便利なテーブルジェネレーターです。
作りたいもののベースを、だいたいこれで作ってから工夫するのもアリですね。

 

まとめ

CSSはHTML4.01時代からよく使われているテクニックです。
基本をしっかりと身につけた上でCSS3に挑戦することで、
今まで画像を使っていた部分もCSS3のみで実現できるようになってきました。
ご紹介したテーブルのデザインでも使われているものが多いので、
ソースを見て理解できるようになれば、より新しいテーブルデザインを生み出すことも
できるかもしれません。

本サイトが運営するWebデザインのオンラインスクールが公開中! まずは無料トライアル!

NESTonline - テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール (詳細はこちら)-
好きなときに、好きな場所で、好きなだけ学べる。テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクールを運営しています。
PhotoshopやCSS、実践的なWebグラフィックデザインなど、500レッスン以上の数十万円相当のプロを目指すカリキュラムが、月々2,500円でいつでもどこでも学べます。

Photoshopを動画でしっかり学ぶ


Next Article【CSS】フォントサイズ指定「px em %」を使うそれぞれのメリット、デメリット