ニュースパス
2015年7月14日の記事を再編集しています。
CSSの新しいバージョンであるCSS3は、アニメーションなどの新機能が追加となったことで従来のCSSよりもグッと便利になりました。CSS3を使えば今までよりも様々な表現ができ、ホームページを魅力的に演出してくれます。
しかし「使ってみたいけれども難しそう……」という方も多いのではないでしょうか。そんなCSS3初心者の方には、サンプルコードを活用することをオススメします。コピペするだけでCSS3を使ったテクニックを取り入れることができますので、試してみましょう。
今回は、CSS3でオシャレなデザインのサンプルコードをまとめてご紹介します。
https://liginc.co.jp/web/html-css/html/86739
日常業務で見かけたtableをHTML5+CSS3でアレンジして紹介している記事です。タイル調、ノート調など技術を応用したサンプルを掲載しています。CSSだけでどのようなデザインが実現できるのか学ぶのにもぴったりの内容となっています。
https://tympanus.net/codrops/2011/10/24/creative-css3-animation-menus/
CSS3で実現する、アニメーションメニューのチュートリアル記事です。全部で10種類のデザイン例を紹介しています。マウスホバー時に大胆に変わるデザインの変化が魅力的です。サンプルコードだけではなく解説もついていますので、アレンジしたり学習の参考にしてみてはいかがでしょうか。
http://www.atmarkit.co.jp/ait/articles/1110/11/news152.html
面白法人カヤックのコーポレートサイトリニューアルで実際に使った具体的なテクニックを、サンプルを交えて紹介している記事です。マウスオーバー時の動きやCSSアニメーションでつくるダイナミックマウスオーバーなど、CSS3の実践的テクニックを知ることができます。もちろんサンプルコードも掲載しています。
https://thinkit.co.jp/story/2011/11/16/2298
CSS3の機能を用いて見出し・ボタン・アイコンといったWebパーツを作る方法を、ソースコード、解説付きで紹介しているテクニック記事です。立体感のある美しいアイコンも、CSS3で簡単に作ることが可能です。
http://jsdo.it/event/topics/2011/07/css3showcase
様々なCSS3のコードの中から厳選してコードをまとめた記事です。わずか数行の記述で作る3カラムレイアウトや角丸やグラデーションデザインのボタン、汎用性の高いアニメーション……など多彩なサンプルコードが揃っています。色々なデザインアイデアを取り入れたい方は、一度目をとおしてはいかがでしょうか。
https://www.find-job.net/startup/css3-sample
「高級フレンチのメニューっぽい見出し」「映画のタイトルっぽい立体的見出し」など、様々な”●●っぽい”が表現できるサンプルコードのまとめ記事です。日本語書体で使えるものだけを集めており、活用しやすいものばかりです。
CSS3を使った様々なテクニックを紹介しているページです。線のグラデーションや影を付ける方法などをサンプルコードとともに紹介しています。テクニックを理解しながらコピペで使いたいという方にオススメです。
https://www.viget.com/articles/practical-uses-of-css3
背景画像をアレンジする方法などいくつかのテクニック、サンプルコードを掲載している記事です。
http://freefrontend.com/css-forms/
クレジットカード決済の入力画面など、様々なCSSフォームのデモとサンプルコードをまとめた記事です。CSS3を活用したものも掲載しています。どのデザインもオシャレですので、デザインの参考にもいかがでしょうか。
http://shiru-web.com/2017/05/06/01-37/
「box-shadow」の様々な記述例を掲載している記事です。影を付けるだけでデザインの見栄えがグッと良くなりますので、ぜひ実践したいものです。
https://www.webmaster-guide.com/css3_animation/
画像の上に文字を乗せる方法や見出しやタイトルに変化を付ける方法など、注目のテクニックとサンプルコードを掲載している記事です。CSS3ならではのテクニックを使ってデザインをよりオシャレにしてみましょう。
https://tympanus.net/codrops/2013/05/30/simple-icon-hover-effects/
アイコンにマウスを乗せた際のホバーエフェクトを紹介している記事です。サンプルコードと9種類のデモを掲載しています。アイコンにオシャレな効果を付けたい時に使ってみましょう。
https://www.nxworld.net/tips/css-only-button-design-and-hover-effects.html
画像不使用でデザイン性の高いボタン、ホバーエフェクトを実装する方法を紹介しています。大胆な動き、表現を取り入れることで一気にオシャレなデザインにすることができるのではないでしょうか。全部で20個のサンプルコードを見ることが可能です。
参考になるエントリーも紹介していますので、あわせて目を通してみてください。
https://www.webpagefx.com/blog/web-design/css3-techniques-you-should-know/
ドロップシャドウやグラデーションをコピペで取り入れたい、と思っている方の参考になるCSS3テクニック紹介記事です。解説を併せて読むと参考になります。
https://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/
CSS3を使った、様々なスタイルのホバーエフェクトを全10パターン掲載しています。どれもインパクトが強く、デザイン性の高い効果ばかりですので、サムネイルの表示にこだわりたい方は試してみるといいのではないでしょうか。
https://www.webdesignerdepot.com/2015/02/3-cool-css3-image-hover-effects/
画像にクールなホバーエフェクトを適用することができる、魅力的なサンプルコード・テクニック紹介記事です。3種類の異なる動きをデモ付きで紹介しています。CSS3を使うことで、JavaScriptが無くともエフェクトを適用することが可能です。
http://www.smashingmagazine.com/2010/01/25/the-new-hotness-using-css3-visual-effects/
ポラロイド写真を並べたようなギャラリーなど、3種類のヴィジュアルエフェクトを紹介している記事です。初心者には少し難しい印象があるものの、サンプルコードだけではなく丁寧な解説付きですので、ぜひ試してみてはいかがでしょうか。
https://www.webcreatorbox.com/tech/css3-animation-colour
CSS3のアニメーションを使った、徐々に色が変わる背景の作り方を紹介している記事です。近年人気の高い背景を塗りつぶしたデザインを、より魅力的に演出してくれます。配色などをアレンジして、取り入れてみてください。
http://www.alessioatzeni.com/wp-content/tutorials/html-css/CSS3-Hover-Effects/index.html
多くのホームページにあるサムネイルですが、普通に掲載するだけでは味気ない……と感じませんか。サムネイルをもっと魅力的にしたいのなら、ホバーエフェクトを活用してみましょう。本記事では、マウスを乗せた際に適用できるオシャレなエフェクトを5パターン紹介しています。あまり見かけたことがないような動きもあるので必見です。
https://tympanus.net/codrops/2012/06/18/3d-thumbnail-hover-effects/
CSS3とjQueryを使ってサムネイルを折り曲げる、というユニークで楽しい3Dエフェクトを紹介しています。用途は限られますが、変わった表現方法を取り入れたい方にはオススメです。
https://tympanus.net/codrops/2011/11/07/animated-buttons-with-css3/
CSS3のアニメーションボタンを紹介している記事で、全7パターンを試すことができます。CSS3ならではのテクニックです。
https://tympanus.net/codrops/2012/05/14/annotation-overlay-effect-with-css3/
CSS3で魅力的なオーバーレイ効果を作成する方法を紹介しています。ふんわりとしたオーバーレイを取り入れるだけで、エレガントな印象を与えることが可能です。サンプルコード・デモ・解説を参考に取り入れてみましょう。
https://www.minimamente.com/example/magic_animations/
様々なCSS3を使ったアニメーションを紹介しています。使い方次第で色々な演出ができますので、目をとおしてみてください。
https://tympanus.net/codrops/2012/06/06/image-accordion-with-css3/
イメージ画像をアコーディオン状に表示することができる、オシャレで素敵なチュートリアルです。スライドショーとはまた違った見せ方ができるのではないでしょうか。サンプルコードと解説を掲載しています。
https://tympanus.net/codrops/2012/02/21/accordion-with-css3/
クールなアコーディオンメニューを実装する方法を、サンプルコード・デモ付きで紹介している記事です。コンテンツを隠して表示したい時に活躍するテクニックです。本格的なメニューも、CSSで楽々作成することができます。
https://tympanus.net/codrops/2012/03/23/responsive-content-navigator-with-css3/
CSSだけで、レスポンシブなコンテンツナビゲーターを作成する方法を解説している記事です。5パターンのデモを掲載しており、いずれも魅力的です。
https://tympanus.net/codrops/2011/10/19/blur-menu-with-css3-transitions/
ユニークなぼかしメニューを紹介している記事です。7種類のパターンがあり、マウスを乗せることで文字をくっきり表示したり、逆にぼかしたりすることができます。
http://weboook.blog22.fc2.com/blog-entry-329.html
ホームページ制作に関するあらゆるお役立ち情報を配信する「Webpark」の記事です。ブルーを基調とした、シンプルでスタンダードなデザインのテーブルが作れるサンプルコードを掲載しています。作り方の解説も丁寧で、イチから自分で作ってみたいという方にもオススメです。特に、セレクタの勉強において役立ちます。
http://tympanus.net/codrops/2010/05/03/pimp-your-tables-with-css3
Webデザインの情報を配信する海外のブログ「codrops」の記事です。デザイン性の高いCSSテーブル3つをデモページ付きで紹介しています。そのままコピーペーストできますので、英語が読めない方でも利用可能です。
ホームページ制作に役立つ情報を配信する「coliss」の記事です。シンプルで美しいテーブルを作成できるチュートリアルをサンプルコード付きで丁寧に解説しています。デモページも見ることが可能です。
http://www.freshdesignweb.com/free-beautiful-css3-table-style.html
海外ブログ「freshdesignweb」の記事です。CSS3でデザインした、デザイン性の高い料金表のサンプルコードを掲載しています。
http://designblog.ecstudio.jp/htmlcss/css3-nth-child.html
EC studio 企画デザインブログの記事です。シンプルで実用性の高いテーブルのサンプルコードを掲載しています。サンプルはまとめてダウンロードもできるので便利です。
http://weboook.blog22.fc2.com/blog-entry-311.html
ホームページ制作のノウハウ、お役立ち情報を配信する「Webpark」の記事です。まるで画像のような、立体感のあるクオリティの高いボタンを作成する手順を紹介しています。もちろんサンプルコードも用意しており、コピーペーストで利用することが可能です。理解した上でボタンデザインを行いたい、と思った時に読みたい記事です。
http://11neko.com/menu-style-inspiration/
クリエイティブ情報を配信するブログ「CREATIVETIPS」の記事です。289種類を超えるメニュー、ボタンのサンプルコードを紹介しています。大量のデザインの中からすぐに使うものを探したい、と思った時に活躍する記事です。ブックマークしておくと使いたい時にすぐに見ることができるのでオススメです。初心者向けのCSS3解説ページもあるので、併せて読んでおくと参考になります。
http://nakazilab.com/mouse-over-extend-underline/
ホームページ制作に関する小技をまとめたブログ「NAKAZI LAB.」の記事です。マウスオーバーした時にアンダーラインが伸びる、動きのあるボタンを作成できるサンプルコードを掲載しています。横方向にスッと伸びる線が美しい印象です。デモページを用意してあるので、完成後の動きのイメージを確認することができます。
http://weboook.blog22.fc2.com/blog-entry-379.html
ホームページ制作に関する情報を幅広く配信する「Webpark」の記事です。CSS3を使って作る2択、5択、ボタン式の3タイプのラジオボタンを紹介しています。それぞれに丁寧な解説付きですので、自分なりのアレンジも簡単にできます。
http://thinkit.co.jp/story/2011/09/14/2282
株式会社インプレスが運営するメディア「Think it」の記事です。CSS3を使い、画像をちょっとした手間でオシャレにするサンプルコードを紹介しています。ロールオーバー風、ポラロイド写真風、マスキンクテープ風といったオシャレで実用性の高いものばかりが揃っています。画像加工が面倒だと感じた時、CSS3なら簡単にできますので知っておくと便利です。
http://www.html5-memo.com/webtips/boxshadow/
HTML5を中心にホームページ制作にまつわる小技を紹介する「HTML5でサイトをつくろう」の記事です。box-shadowプロパティを使って、用意した画像に写真がめくれたようなを表現を施すサンプルコードを紹介しています。これ1つで画像がグッとオシャレになりますので、手間をかけずにオシャレ感を出したい時にぴったりです。見やすいデザインの比較も付いています。
http://webrocketsmagazine.com/entry/20120224/css3-image-effects.html
Webデザイナー、プログラマ向けの情報を配信するブログ「WEBROCKETS」の記事です。画像にちょっとしたアレンジを加える18個のサンプルコードをまとめて紹介しています。定番のシャドウ、めくれた表現のほか、ユニークな形状のフレーム、リボン付きといったあらゆるデザインが揃っています。画像をとにかくたくさん使うホームページの制作に役立ちます。
http://kachibito.net/web-design/css3-text-shadow-sample.html
ワードプレス、jQueryを主にテーマとして扱う「Kachibito.net」の記事です。text-shadowを使用したテキスト装飾のサンプルコードを複数紹介しています。日頃使いやすいものばかりですので知っておくと便利です。
http://www.yoheim.net/blog.php?q=20121103
世の中のWeb情報を配信する「YoheiM.NET」の記事です。上記の記事同様text-shadowを使用したサンプルを紹介していますが、グロー、3Dといったデザインはこちらにしかありませんので合わせて見ておくと参考になります。
http://www.webcreatorbox.com/tech/css3-text-link/
Web関連のあらゆる情報を届ける「Webクリエイターボックス」の記事です。CSS3でテキストリンクを装飾するサンプルコードを、丁寧な解説を交えて紹介しています。少しユニークなテキストリンクにしたい、と思ったらぜひ試してみたい記事です。
http://www.webopixel.net/html-css/831.html
日々のWeb制作業務の私的メモブログ「WEB PIXEL」の記事です。CSS3を使ったマウスオーバーアニメーション5パターンを紹介しています。ワンポイントに取り入れるだけでホームページのデザインがグッと凝った印象になります。デモページも用意してあるので、設置後のイメージがしやすく便利です。
http://weboook.blog22.fc2.com/blog-entry-318.html
ホームページ制作に関する様々なお役立ち情報を配信する「Webpark」の記事です。CSSを使って作る、まるで画像のようなクオリティの高いメニューの作り方を紹介しています。基本系からグラデーションを付け、さらにシャドウ、角丸にするという風に流れに沿って紹介しているので勉強にもなります。実際に設置したデモページを用意しています。
http://liginc.co.jp/designer/archives/5412
株式会社LIGのブログ記事です。画像を使わずにCSS3だけでデザインする綺麗な横メニューの作り方を紹介しています。見栄えが良くなる1pxラインまでしっかりとデザインしています。 Photoshopで作成した画像使用のものとの比較も面白いです。
http://blog.3streamer.net/html5-css3/css3-styling-231/
ホームページ制作の小技を紹介する「STREAMER」の記事です。1つひとつ作るとなると結構手間がかかる見出しを、CSS3だけでデザインできるサンプルを紹介しています。見出しを多用する機会があるという方にオススメの記事です。デザインも複数用意してありますので、好みのものが見付かります。
http://www.hp-stylelink.com/news/2013/11/20131114.php
渋谷区のホームページ制作会社、株式会社スタイルリンクの記事です。折り返したようなデザインがオシャレなリボンの見出しを、コピーペーストだけで簡単に作ることができます。
以上、コピペで実装できるCSS3でオシャレなデザインのサンプルコードをご紹介しました。好みのものは見付かりましたでしょうか。
様々な機能を備えたCSS3を使えば、画像を作らずとも多彩な表現ができます。わざわざ画像を準備するよりも管理が楽で、修正の手間もありませんので、ぜひ活用したいものです。
今回ご紹介したものは解説つきのものが大半ですので、デザインを活用しながらCSS3の学習も同時に行うことができます。ちょっと難しいデザインのものは、まずはサンプルコードを活用することから始めてみるといいでしょう。