読者です 読者をやめる 読者になる 読者になる

godmemo

デザイン/WEB屋のメモです。自分用

tableがコピペで簡単に実装できるサンプルコード4選

WEB便利ツール関連 WEB

table用のコピペで簡単に実装できるサンプルコードです。

デザイン性が高いので、気になったサンプルコードをメモ

 

1、グラデーションが美しい!CSS3でクールなテーブルデザインを作る方法 

f:id:godspade:20151031184902p:plain

CSS3でクールなテーブルデザインを作る方法 / ウェブデザインライブラリー

 

なかなかここまで凝ったテーブルを作る機会があまりありませんが、出番があれば使いたいっすね。

 

2、フラットデザインな吹き出し風テーブル

f:id:godspade:20151031185243p:plain

HTML5+CSS3でデザインしたtableのCSS&HTMLサンプルソース5点 | 株式会社LIG

このタイプのデザインは、イマドキな感じで使う出番も多そうですよね!さすがLIGさん

 

 

3、シンプルなストライプテーブル

f:id:godspade:20151031184348j:plain

 

ASCII.jp:CSS3のセレクターで作るストライプテーブル (1/3)|Web制作の現場で使えるjQuery UIデザイン入門

 

シンプルなストライプテーブルを作ることができるサンプルコード。 マウスオーバーで行や列をハイライト表示させるというとろまで、わかりやすく解説してあって素敵

 

4、凝りすぎてて、仕事では使用する事はまずなさそうなデザインテーブル

f:id:godspade:20151031185611p:plain

dchapkine/css3-pricing-table · GitHub

ここまでくると、すごく素敵なデザイン。なんとなく、日本ではここまで凝ったフラットデザインの需要はなさそう。

 

 

日本と、外国のウェブサイトって根本的にデザインテイストが違う気もするので、あまり海外のサンプルコードは使う機会がなさそうですが勉強になりますね。

 

 

 今回の記事はferretさんから

ferret-plus.com