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

更新日: 2020年08月11日

2015年7月14日の記事を再編集しています。

CSSの新しいバージョンであるCSS3は、アニメーションなどの新機能が追加となったことで従来のCSSよりもグッと便利になりました。CSS3を使えば今までよりも様々な表現ができ、ホームページを魅力的に演出してくれます。

しかし「使ってみたいけれども難しそう……」という方も多いのではないでしょうか。そんなCSS3初心者の方には、サンプルコードを活用することをオススメします。コピペするだけでCSS3を使ったテクニックを取り入れることができますので、試してみましょう。

今回は、CSS3でオシャレなデザインのサンプルコードをまとめてご紹介します。
　　

CSS3で実装できるオシャレなサンプルコードまとめ

1. HTML5＋CSS3でデザインしたtableのCSS＆HTMLサンプルソース5点｜株式会社LIG

HTML5＋CSS3でデザインしたtableのCSS＆HTMLサンプルソース5点
https://liginc.co.jp/web/html-css/html/86739

日常業務で見かけたtableをHTML5＋CSS3でアレンジして紹介している記事です。タイル調、ノート調など技術を応用したサンプルを掲載しています。CSSだけでどのようなデザインが実現できるのか学ぶのにもぴったりの内容となっています。
　　

2. Creative CSS3 Animation Menus｜codrops

Creative CSS3 Animation Menus
https://tympanus.net/codrops/2011/10/24/creative-css3-animation-menus/

CSS3で実現する、アニメーションメニューのチュートリアル記事です。全部で10種類のデザイン例を紹介しています。マウスホバー時に大胆に変わるデザインの変化が魅力的です。サンプルコードだけではなく解説もついていますので、アレンジしたり学習の参考にしてみてはいかがでしょうか。
　　

3. いますぐ使えるCSS3テクニック集！コピペ用サンプル付き！ (1/3)｜@IT

いますぐ使えるCSS3テクニック集！コピペ用サンプル付き！ (1/3)
http://www.atmarkit.co.jp/ait/articles/1110/11/news152.html

面白法人カヤックのコーポレートサイトリニューアルで実際に使った具体的なテクニックを、サンプルを交えて紹介している記事です。マウスオーバー時の動きやCSSアニメーションでつくるダイナミックマウスオーバーなど、CSS3の実践的テクニックを知ることができます。もちろんサンプルコードも掲載しています。
　　

4. CSS3で作るWebパーツ｜Thinkit

CSS3で作るWebパーツ
https://thinkit.co.jp/story/2011/11/16/2298

CSS3の機能を用いて見出し・ボタン・アイコンといったWebパーツを作る方法を、ソースコード、解説付きで紹介しているテクニック記事です。立体感のある美しいアイコンも、CSS3で簡単に作ることが可能です。
　　

5. 一夜漬けでCSS3をマスターするために見ておくべきコードのまとめ [Japanese Version Only]｜jsdo.it

一夜漬けでCSS3をマスターするために見ておくべきコードのまとめ [Japanese Version Only]
※このWebサイトは現在公開されていません。

様々なCSS3のコードの中から厳選してコードをまとめた記事です。わずか数行の記述で作る3カラムレイアウトや角丸やグラデーションデザインのボタン、汎用性の高いアニメーション……など多彩なサンプルコードが揃っています。色々なデザインアイデアを取り入れたい方は、一度目をとおしてはいかがでしょうか。
　　

6. ●●っぽい表現ができる「CSS3」サンプル集｜Find Job! Startup

●●っぽい表現ができる「CSS3」サンプル集

「高級フレンチのメニューっぽい見出し」「映画のタイトルっぽい立体的見出し」など、様々な”●●っぽい”が表現できるサンプルコードのまとめ記事です。日本語書体で使えるものだけを集めており、活用しやすいものばかりです。
　　

7. HTML / CSS｜ITSakura

http://itsakura.com/html-css

CSS3を使った様々なテクニックを紹介しているページです。線のグラデーションや影を付ける方法などをサンプルコードとともに紹介しています。テクニックを理解しながらコピペで使いたいという方にオススメです。
　　

8. Practical Uses of CSS3 | Viget

Practical Uses of CSS3 | Viget
https://www.viget.com/articles/practical-uses-of-css3

背景画像をアレンジする方法などいくつかのテクニック、サンプルコードを掲載している記事です。
　　

9. 86 CSS FORMS｜FREEFRONTEND

86 CSS FORMS
http://freefrontend.com/css-forms/

クレジットカード決済の入力画面など、様々なCSSフォームのデモとサンプルコードをまとめた記事です。CSS3を活用したものも掲載しています。どのデザインもオシャレですので、デザインの参考にもいかがでしょうか。
　　

10. CSS3で、boxに影をつける方法「box-shadow」｜知るweb

CSS3で、boxに影をつける方法「box-shadow」
http://shiru-web.com/2017/05/06/01-37/

「box-shadow」の様々な記述例を掲載している記事です。影を付けるだけでデザインの見栄えがグッと良くなりますので、ぜひ実践したいものです。
　　

11. 見出しをアニメーションにしてみる～などCSS3でできること｜ウェブサイトマスターの為の覚書き

見出しをアニメーションにしてみる～などCSS3でできること

画像の上に文字を乗せる方法や見出しやタイトルに変化を付ける方法など、注目のテクニックとサンプルコードを掲載している記事です。CSS3ならではのテクニックを使ってデザインをよりオシャレにしてみましょう。
　　

12. Simple Icon Hover Effects｜codrops

Simple Icon Hover Effects
https://tympanus.net/codrops/2013/05/30/simple-icon-hover-effects/

アイコンにマウスを乗せた際のホバーエフェクトを紹介している記事です。サンプルコードと9種類のデモを掲載しています。アイコンにオシャレな効果を付けたい時に使ってみましょう。
　　

13. CSSのみで実装するボタンデザインやホバーエフェクト 20＋α｜NxWorld

CSSのみで実装するボタンデザインやホバーエフェクト 20＋α

画像不使用でデザイン性の高いボタン、ホバーエフェクトを実装する方法を紹介しています。大胆な動き、表現を取り入れることで一気にオシャレなデザインにすることができるのではないでしょうか。全部で20個のサンプルコードを見ることが可能です。

参考になるエントリーも紹介していますので、あわせて目を通してみてください。
　　

14. CSS3 Techniques You Should Know｜WebpageFX

https://www.webpagefx.com/blog/web-design/css3-techniques-you-should-know/

ドロップシャドウやグラデーションをコピペで取り入れたい、と思っている方の参考になるCSS3テクニック紹介記事です。解説を併せて読むと参考になります。
　　

15. Original Hover Effects with CSS3｜codrops

Original Hover Effects with CSS3
https://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/

CSS3を使った、様々なスタイルのホバーエフェクトを全10パターン掲載しています。どれもインパクトが強く、デザイン性の高い効果ばかりですので、サムネイルの表示にこだわりたい方は試してみるといいのではないでしょうか。
　　

16. 3 Cool CSS3 Image Hover Effects｜WebdesignerDepot.com

3 Cool CSS3 Image Hover Effects
https://www.webdesignerdepot.com/2015/02/3-cool-css3-image-hover-effects/

画像にクールなホバーエフェクトを適用することができる、魅力的なサンプルコード・テクニック紹介記事です。3種類の異なる動きをデモ付きで紹介しています。CSS3を使うことで、JavaScriptが無くともエフェクトを適用することが可能です。
　　

17. The New Hotness: Using CSS3 Visual Effects｜Smashing Magazine

The New Hotness: Using CSS3 Visual Effects｜Smashing Magazine
http://www.smashingmagazine.com/2010/01/25/the-new-hotness-using-css3-visual-effects/

ポラロイド写真を並べたようなギャラリーなど、3種類のヴィジュアルエフェクトを紹介している記事です。初心者には少し難しい印象があるものの、サンプルコードだけではなく丁寧な解説付きですので、ぜひ試してみてはいかがでしょうか。
　　

18. CSS3アニメーションに挑戦！色が移り変わる背景を実装しよう | Webクリエイターボックス

CSS3アニメーションに挑戦！色が移り変わる背景を実装しよう | Webクリエイターボックス
https://www.webcreatorbox.com/tech/css3-animation-colour

CSS3のアニメーションを使った、徐々に色が変わる背景の作り方を紹介している記事です。近年人気の高い背景を塗りつぶしたデザインを、より魅力的に演出してくれます。配色などをアレンジして、取り入れてみてください。
　　

19. CSS3 Hover Effects｜AlessioAtzeni

CSS3 Hover Effects
http://www.alessioatzeni.com/wp-content/tutorials/html-css/CSS3-Hover-Effects/index.html

多くのホームページにあるサムネイルですが、普通に掲載するだけでは味気ない……と感じませんか。サムネイルをもっと魅力的にしたいのなら、ホバーエフェクトを活用してみましょう。本記事では、マウスを乗せた際に適用できるオシャレなエフェクトを5パターン紹介しています。あまり見かけたことがないような動きもあるので必見です。
　　

20. 3D Thumbnail Hover Effects｜codrops

3D Thumbnail Hover Effects
https://tympanus.net/codrops/2012/06/18/3d-thumbnail-hover-effects/

CSS3とjQueryを使ってサムネイルを折り曲げる、というユニークで楽しい3Dエフェクトを紹介しています。用途は限られますが、変わった表現方法を取り入れたい方にはオススメです。
　　

21. Animated Buttons with CSS3｜codrops

Animated Buttons with CSS3
https://tympanus.net/codrops/2011/11/07/animated-buttons-with-css3/

CSS3のアニメーションボタンを紹介している記事で、全7パターンを試すことができます。CSS3ならではのテクニックです。
　　

22. Annotation Overlay Effect with CSS3｜codrops

Annotation Overlay Effect with CSS3
https://tympanus.net/codrops/2012/05/14/annotation-overlay-effect-with-css3/

CSS3で魅力的なオーバーレイ効果を作成する方法を紹介しています。ふんわりとしたオーバーレイを取り入れるだけで、エレガントな印象を与えることが可能です。サンプルコード・デモ・解説を参考に取り入れてみましょう。
　　

23. Magic Animations CSS3｜minimamente

Magic Animations CSS3
https://www.minimamente.com/example/magic_animations/

様々なCSS3を使ったアニメーションを紹介しています。使い方次第で色々な演出ができますので、目をとおしてみてください。
　　

24. Image Accordion with CSS3｜codrops

Image Accordion with CSS3
https://tympanus.net/codrops/2012/06/06/image-accordion-with-css3/

イメージ画像をアコーディオン状に表示することができる、オシャレで素敵なチュートリアルです。スライドショーとはまた違った見せ方ができるのではないでしょうか。サンプルコードと解説を掲載しています。
　　

25. Accordion with CSS3｜codrops

Accordion with CSS3
https://tympanus.net/codrops/2012/02/21/accordion-with-css3/

クールなアコーディオンメニューを実装する方法を、サンプルコード・デモ付きで紹介している記事です。コンテンツを隠して表示したい時に活躍するテクニックです。本格的なメニューも、CSSで楽々作成することができます。
　　

26. Content Navigator with CSS3｜codrops

Content Navigator with CSS3
https://tympanus.net/codrops/2012/03/23/responsive-content-navigator-with-css3/

CSSだけで、レスポンシブなコンテンツナビゲーターを作成する方法を解説している記事です。5パターンのデモを掲載しており、いずれも魅力的です。
　　

27. Blur Menu with CSS3 Transitions｜codrops

Blur Menu with CSS3 Transitions
https://tympanus.net/codrops/2011/10/19/blur-menu-with-css3-transitions/

ユニークなぼかしメニューを紹介している記事です。7種類のパターンがあり、マウスを乗せることで文字をくっきり表示したり、逆にぼかしたりすることができます。
　　

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

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

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

29. Pimp Your Tables with CSS3｜codrops

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

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

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

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

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

31. BEAUTIFUL CSS3 TABLE PRICING STYLE｜freshdesignweb

BEAUTIFUL CSS3 TABLE PRICING STYLE
https://freshdesignweb.com/free-beautiful-css3-table-style/

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

32. [CSS3小ネタ]CSS3でシマシマの表をつくる｜EC studio 企画デザインブログ

nth-child
※このWebサイトは現在公開されていません。

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

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

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

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

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

CREATIVETIPS
https://11neko.com/
※このページは現在公開されていません。

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

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

NAKAZI LAB.
※このWebサイトは現在公開されていません。

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

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

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

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

37. 第5回 CSS3で画像をおしゃれに演出｜Think IT

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

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

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

HTML5でサイトをつくろう
http://www.html5-memo.com/webtips/boxshadow/

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

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

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

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

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

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

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

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

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

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

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

Webクリエイターボックス
http://www.webcreatorbox.com/tech/css3-text-link/

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

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

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

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

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

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

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