コピペで簡単実装！CSS3でオシャレなデザインのサンプルコード23選

ニュース

2015/7/141,384 views

altテキスト
従来のCSSの仕様を改良したCSS3は、これまで以上に便利で使い勝手のいいものになりました。
より多彩に表現ができるCSS3を使えば、ホームページのデザインをぐっと見やすく、素敵にしてくれます。

画像を使わずにCSS3のみで表現することで、管理が容易になりますしページの軽量化にも繋がります。
しかも、サンプルコードを活用すればコピーペーストするだけであっという間にデザインが完成しますので、どんどん活用すべきです。

今回は、コピペで使えるオシャレなデザインをCSS3で実装するサンプルコードをご紹介します。
テーブルから見出しまで使用頻度の高いものばかりですので、ぜひ参考にしてみてください。

CSS3で簡単に実装できるサンプルコード一覧

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

http://weboook.blog22.fc2.com/blog-entry-329.html

ホームページ制作に関するあらゆるお役立ち情報を配信する「Webpark」の記事です。
ブルーを基調とした、シンプルでスタンダードなデザインのテーブルが作れるサンプルコードを掲載しています。
作り方の解説も丁寧で、一から自分で作ってみたいという方にもオススメです。
特に、セレクタの勉強において役立ちます。

2.Pimp Your Tables with CSS3

http://tympanus.net/codrops/2010/05/03/pimp-your-tables-with-css3

Webデザインの情報を配信する海外のブログ「codrops」の記事です。
デザイン性の高いCSSテーブル3つをデモページつきで紹介しています。
そのままコピーペーストできますので、英語が読めない方でも利用可能です。

3.[CSS]さりげなく、美しくて分かりやすいテーブルにするCSS3のチュートリアル｜coliss

http://coliss.com/articles/build-websites/operation/css/css3-tables-with-rounded-corners-by-red-team-design.html

ホームページ制作に役立つ情報を配信する「coliss」の記事です。
シンプルで美しいテーブルを作成できるチュートリアルをサンプルコードつきで丁寧に解説しています。
デモページも見ることが可能です。

4.BEAUTIFUL CSS3 TABLE PRICING STYLE

http://www.freshdesignweb.com/free-beautiful-css3-table-style.html

海外ブログ「freshdesignweb」の記事です。
CSS3でデザインした、デザイン性の高い料金表のサンプルコードを掲載しています。

5.[CSS3小ネタ]CSS3でシマシマの表をつくる – :nth-child

http://designblog.ecstudio.jp/htmlcss/css3-nth-child.html

EC studio 企画デザインブログの記事です。
シンプルで実用性の高いテーブルのサンプルコードを掲載しています。
サンプルはまとめてダウンロードもできるので便利です。

6.CSS3で角丸Tableの作り方

http://coder.blog.uhuru.co.jp/demo/2012/rounded_corners_table/

株式会社ウフルが運営するブログの記事です。
角丸デザインのテーブルが作れるサンプルコードを紹介しています。

7.5つの効果で作る、よく使うCSS3ボタンデザインサンプル集｜TOUCH&SLIDE

http://touch-slide.jp/column/304/

スマートフォン最適化に関するノウハウを提供する「TOUCH&SLIDE」の記事です。
使用頻度の高いシンプルで使い勝手のいいボタンデザインのサンプルコードを、5タイプに分けて多数紹介しています。
単に線で囲んだデザインでも、点線、多色を使ったものというように様々な種類が揃っているので、一度見るとデザインの引き出しを格段に増やすことができます。

8.CSS3の勉強になるかも！？画像を使わないボタンの作成手順｜Webpark

http://weboook.blog22.fc2.com/blog-entry-311.html

ホームページ制作のノウハウ、お役立ち情報を配信する「Webpark」の記事です。
まるで画像のような、立体感のあるクオリティの高いボタンを作成する手順を紹介しています。
もちろんサンプルコードも用意しており、コピーペーストで利用することが可能です。
理解した上でボタンデザインをおこないたい、と思った時に読みたい記事です。

9.CSS3アニメーションを使ったメニューやボタンのサンプル紹介【289種類＋α】｜CREATIVETIPS

http://11neko.com/menu-style-inspiration/

クリエイティブ情報を配信するブログ「CREATIVETIPS」の記事です。
289種類を超えるメニュー、ボタンのサンプルコードを紹介しています。
大量のデザインの中からすぐに使うものを探したい、と思った時に活躍する記事です。
ブックマークしておくと使いたい時にすぐに見ることができるのでオススメです。
初心者向けのCSS3解説ページもあるので、あわせて読んでおくと参考になります。

10.マウスオーバーでアンダーラインが伸びるボタン｜NAKAZI LAB.

http://nakazilab.com/mouse-over-extend-underline/

ホームページ制作に関する小技をまとめたブログ「NAKAZI LAB.」の記事です。
マウスオーバーした時にアンダーラインが伸びる、動きのあるボタンを作成できるサンプルコードを掲載しています。
横方向にスッと伸びる線が美しい印象です。
デモページを用意してあるので、完成後の動きのイメージを確認することができます。

11.ついつい押したくなる、CSS3を使ったラジオボタンのデザイン｜Webpark

http://weboook.blog22.fc2.com/blog-entry-379.html

ホームページ制作に関する情報を幅広く配信する「Webpark」の記事です。
CSS3を使って作る2択、5択、ボタン式の3タイプのラジオボタンを紹介しています。
それぞれに丁寧な解説つきですので、自分なりのアレンジも簡単にできます。

12.第5回 CSS3で画像をおしゃれに演出｜インプレスビジネスヘッドライン

http://thinkit.co.jp/story/2011/09/14/2282

株式会社インプレスが運営するメディア「Think it」の記事です。
CSS3を使い、画像をちょっとした手間でお洒落にするサンプルコードを紹介しています。
ロールオーバー風、ポラロイド写真風、マスキンクテープ風といったお洒落で実用性の高いものばかりが揃っています。
画像加工が面倒だと感じた時、CSS3なら簡単にできますので知っておくと便利です。

13.CSS3のボックスシャドウを使って写真のフチの装飾をするサンプル作りました。【サンプルコード付き】｜HTML5でサイトをつくろう

http://www.html5-memo.com/webtips/boxshadow/

HTML5を中心にホームページ制作にまつわる小技を紹介する「HTML5でサイトをつくろう」の記事です。
box-shadowプロパティを使って、用意した画像に写真がめくれたようなを表現を施すサンプルコードを紹介しています。
これ一つで画像がぐっとお洒落になりますので、手間をかけずにお洒落感を出したい時にぴったりです。
見やすいデザインの比較もついています。

14.CSS3を使ってできる画像まわりのエフェクトやスタイリング18｜WEBROCKETS

http://webrocketsmagazine.com/entry/20120224/css3-image-effects.html

Webデザイナー、プログラマ向けの情報を配信するブログ「WEBROCKETS」の記事です。
画像にちょっとしたアレンジを加える18個のサンプルコードをまとめて紹介しています。
定番のシャドウ、めくれた表現のほか、ユニークな形状のフレーム、リボンつきといったあらゆるデザインが揃っています。
画像をとにかく沢山使うホームページの制作に役立ちます。

15.CSS3のtext-shadowを使ったテキスト装飾のサンプル集｜kachibito.net

http://kachibito.net/web-design/css3-text-shadow-sample.html

ワードプレス、jQueryを主にテーマとして扱う「Kachibito.net」の記事です。
text-shadowを使用したテキスト装飾のサンプルコードを複数紹介しています。
日頃使いやすいものばかりですので知っておくと便利です。

16.[CSS3] TextShadowで作る文字の色々なデザイン（グロウ、エンボス、ベベル、袋文字、ぼかし、3D）｜YoheiM.NET

http://www.yoheim.net/blog.php?q=20121103

世の中のWeb情報を配信する「YoheiM.NET」の記事です。
上記の記事同様text-shadowを使用したサンプルを紹介していますが、グロー、3Dといったデザインはこちらにしかありませんので合わせて見ておくと参考になります。

17.コピペでできる！CSS3の素敵効果でテキスト リンクを装飾するあれこれ｜Webクリエイターボックス

http://www.webcreatorbox.com/tech/css3-text-link/

Web関連のあらゆる情報を届ける「Webクリエイターボックス」の記事です。
CSS3でテキストリンクを装飾するサンプルコードを、丁寧な解説を交えて紹介しています。
少しユニークなテキストリンクにしたい、と思ったらぜひ試してみたい記事です。

18.ワンポイントに使えるCSS3マウスオーバーアニメーション5種｜WEB PIXEL

http://www.webopixel.net/html-css/831.html

日々のWeb制作業務の私的メモブログ「WEB PIXEL」の記事です。
CSS3を使ったマウスオーバーアニメーション5パターンを紹介しています。
ワンポイントに取り入れるだけでホームページのデザインがぐっと凝った印象になります。
デモページも用意してあるので、設置後のイメージがしやすく便利です。

19.細部にこだわってみた！CSS3を使った美しい横メニューの作り方｜Webpark

http://weboook.blog22.fc2.com/blog-entry-318.html

ホームページ制作に関する様々なお役立ち情報を配信する「Webpark」の記事です。
CSSを使って作る、まるで画像のようなクオリティの高いメニューの作り方を紹介しています。
基本系からグラデーションをつけ、さらにシャドウ、角丸にするという風に流れに沿って紹介しているので勉強にもなります。
実際に設置したデモページを用意しています。