Google が2014年に発表したマテリアルデザインは、ウェブだけでなくグラフィックデザインでもますます人気となっており、さまざまな方法で採用しているケースをよく見かけるようになりました。
今回は HTML と CSS、わずかな JavaScript で実装できる、今後の参考にしたいカード型レイアウト用コードスニペットをまとめてご紹介します。コードニペットは各レイアウト別にカテゴリ分けしているので、ウェブサイト制作に活用したものを見つけてはいかがでしょう。
コンテンツ目次
- 1. ブログコンテンツ用レイアウト
- 2. 名刺型レイアウト
- 3. グリッド型レイアウト
- 4. スライダー型レイアウト
- 5. Eコマース型レイアウト
- 6. フリップ型レイアウト
- 7. ホバーエフェクト型レイアウト
- 8. モバイル向けレイアウト
- 9. 映画、ムービー向けレイアウト
- 10. プロフィール向けレイアウト
- 11. レシピ向けレイアウト
- 12. 重ね型レイアウト
ブログコンテンツ用レイアウト
Blog Card Fun #1
ドロップシャドウを利用することで、立体感のあるコンテンツの重なり方を表現したカード型レイアウト。
See the Pen Blog Card fun #1 by IMarty (@IMarty) on CodePen.
New Card – CSS Only
CSSのみでスタイリングされた、ホバーアニメーションが魅力的なカード型レイアウト。
See the Pen News Cards – CSS only by Aleksandar Čugurović (@mauriceconchis) on CodePen.
Blog Post Item
ブログなどの記事一覧ページを想定したレイアウトで、必要事項がスッキリとまとめられています。
See the Pen Blog Post Item by Nodws (@nodws) on CodePen.
Article News Card
こちらもブログコンテンツ一覧表示に便利なレイアウトのひとつ。
See the Pen Article News Card by Andy Tran (@andytran) on CodePen.
Responsive Company Card
トグルスイッチをクリックすることで、カード型からリスト型レイアウトに切り替えることができ、レスポンシブにも対応できます。
See the Pen Responsive Company Cards by Pham Mikun (@mikun) on CodePen.
Blog Card with Hover State
カードにホバーすると抜粋テキストが表示されるアニメーション付レイアウト。
See the Pen Blog Card with Hover State by szpakoli (@szpakoli) on CodePen.
名刺型レイアウト
Business Card
カードをクリックすると、くるりとひっくり返り詳細情報が表示されます。
See the Pen Business Card by Lubos (@lmenus) on CodePen.
Business Card
こちらもフリップ型のオンライン名刺用HTMLスニペット。
See the Pen Business card by Zach Saucier (@Zeaklous) on CodePen.
3D Flip Business Card
なめらかに回転するアニメーションが特長のレイアウト。
See the Pen 3D flip business card by Elena Nazarova (@nazarelen) on CodePen.
Digital Business Card
詳細情報としてソーシャルメディアアイコンを並べたレイアウト。
See the Pen Digital Business Card by Will Johnson (@willalanjohnson) on CodePen.
CSS Business Card
丸みのあるシェイプに立体的な影シャドウをスタイリングで追加しています。
See the Pen CSS Business Card by Keith Pickering (@keithpickering) on CodePen.
Flippable CSS3 Business Card
See the Pen Flippable CSS3 Business Card by Mark Murray (@markmurray) on CodePen.
CSS Business Card
鮮やかなグラデーションカラーをCSSで表現するテクニックは参考に。
See the Pen CSS Business Card by jasper (@jboeijenga) on CodePen.
グリッド型レイアウト
3D Fold Out Reveal
各コンテンツをクリックすると、隠れていた文字テキストが表示され、他のコンテンツにぼかしエフェクトが加わることで注目を集めます。
See the Pen 3D Fold out reveal by Andrew Canham (@candroo) on CodePen.
Material Design – Responsive Card
マテリアルデザインのコンセプトを導入した、レスポンシブ対応のカード型レイアウト。
See the Pen Material Design – Responsive card by David Foliti (@marlenesco) on CodePen.
Flexbox Card Grid
Flexbox プロパティを利用することで、柔軟性の高いレイアウトを手軽に作成できるようになりました。
See the Pen Flexbox Card Grid by Craig Anthony (@mcraiganthony) on CodePen.
Expanding Card Grid with Flexbox
各コンテンツをクリックすると隠されていた部分が展開する仕組み。
See the Pen Expanding Card Grid With Flexbox by Naila Ahmad (@nailaahmad) on CodePen.
Multi-Height Grid Layout
異なる高さのコンテンツでもすっきりと並べることができるレイアウトテクニック。
See the Pen Multi-Height Grid Layout by Cliff Pyles (@cliffpyles) on CodePen.
スライダー型レイアウト
Clash of Clans Card
カード型レイアウトからキャラクターがはみ出ることで、よりダイナミックな表現が可能に。
See the Pen Clash of Clans Cards by Andre Madarang (@drehimself) on CodePen.
Information Card Slider
See the Pen Information Card Slider by Andy Tran (@andytran) on CodePen.
Eコマース型レイアウト
Flipping Product Card
デスクトップとモバイルでレイアウトを切り替え、よりスムーズな決済までの導線をえがきます。
See the Pen Flipping Product Card #30Days30Sites by Jhonny Gil (@gilsjhonny) on CodePen.
UI Design – Product Card
立体的に商品を魅せることができる、インタラクティブなカード型レイアウト。
See the Pen UI Design – Product Card by CodeFrog (@CodeFrogShow) on CodePen.
Product Card
購入ボタンの動作がとても分かりやすいデザインで、使いやすさもばっちり。
See the Pen Product card by Oscar (@olhilton) on CodePen.
Ecommerce Shop : Dialy UI #012
商品カラーに合わせて背景カラーも切り替わる仕掛けがユニークなレイアウト。
See the Pen Daily UI #012: E-Commerce Shop (Single Item) by Fabio Ottaviani (@supah) on CodePen.
Product Card
See the Pen Product Card by Alexandra K (@ff0004-red) on CodePen.
Day 002 – Product Card
購入商品の数を変更することで、合計金額も同時に更新される実践向けレイアウト。
See the Pen Day 002 – Product Card by Jonathan Obino (@jonathanobino) on CodePen.
Flexy Product Box
Flexbox プロパティを活用することで、カラム数などより自由なレイアウトを可能にしたテクニック。
See the Pen Flexy Product Cards by Jack Thomson (@Jackthomsonn) on CodePen.
Product Page
See the Pen Product Page by Chase Marlow (@chasemarlowmx) on CodePen.
Product Card
商品イメージにホバーしたとき、よりボタンをクリックしやすいアニメーションの工夫が素敵なレイアウト。
See the Pen Product Card by Virgil Pana (@virgilpana) on CodePen.
フリップ型レイアウト
3D Flipping Cards
マウスカーソルを合わせることで、カード型レイアウトがくるりと回転するアニメーション。
See the Pen 3D Flipping Cards by Rita Bradley (@ritalbradley) on CodePen.
Flipping Card
マテリアルデザインのコンセプトを想定したカード型レイアウトで、ボタンクリックでレイアウトが回転します。
See the Pen Flipping card by Sergey Nikishkin (@nikishkin) on CodePen.
Realistic 3D Flip Image
背景イメージの上に重ねられた文字テキストやボタンが、立体的に見える3Dエフェクト。
See the Pen Realistic 3D Image Flip Box, Flip Card, 3d Image hover, Kallyas WordPress Theme by Nicola Mihaita (@nicolamihaita) on CodePen.
Google Now Inspired Flip Card
See the Pen Google Now Inspired Flip Cards by Ettrics (@ettrics) on CodePen.
CSS Card Flip
ごく簡単なスタイリングで記述されているので、テンプレートとしても活用しやすいアイテム。
See the Pen CSS Card Flip by Cole Bemis (@colebemis) on CodePen.
ホバーエフェクト型レイアウト
Parallax Depth Cards
サムネイルにカーソルを合わせると立体的に動く、新感覚のホバーエフェクト。
See the Pen Parallax Depth Cards by Andy Merskin (@andymerskin) on CodePen.
2017 Card
グラデーションカラーやミニマルスタイル、セミフラットなどさまざまなトレンドが盛り込まれたレイアウト。
See the Pen 2017 Card by Phil (@ph1p) on CodePen.
EC Card Hover
マウスカーソルの動きに合わせてアイコンがアニメーション変化します。
See the Pen EC card hover by Jorge Sanes (@jorgesanes10) on CodePen.
3D Perspectve Card XY
XY軸を中心に立体感あふれる動きを演出できるカード型レイアウト。
See the Pen 3D perspective card XY by Carlos Sánchez Riballo (@csanchezriballo) on CodePen.
Material Card with Animated Featured Images
See the Pen Material Card with Animated Featured Image by Knol Aust (@knolaust) on CodePen.
モバイル向けトレイアウト
Bulma _Vuejs Flip Card
Flexboxプロパティをグリッドに採用した人気のフレームワーク Bulma を利用したフリップ型カードレイアウト。
See the Pen Bulma + Vuejs Flip Card by Dzulfikar Adi Putra (@superpikar) on CodePen.
Article Card UI – Read More CSS Animation
コンテンツの抜粋文がクリックすることで全文表示に展開するテクニック。
See the Pen Article Card UI – Read More CSS Animation by Valentine (@wintr) on CodePen.
Delivery Card Animation
各予定が書き込まれたカード型コンテンツをクリックすると、パタパタとすだれ風に詳細が表示されます。
See the Pen Delivery Card Animation by Nikolay Talanov (@suez) on CodePen.
映画、ムービー向けレイアウト
Responsive Movie Card
モバイル端末でも見事に表示される、レスポンシブ対応のカード型レイアウト。
See the Pen Responsive Movie Card by Mehmet Burak Erman (@mburakerman) on CodePen.
Daily UI Movie Card
そのままでも十分利用できる、各詳細情報を記載したレイアウトは今後の参考にもいかがでしょう。
See the Pen Daily UI Movie Card by George Mironidis (@georgemiro) on CodePen.
Movie Card Interactive UI
CSSのみで表現できる星型レーティング機能を搭載したカード型レイアウト。
See the Pen Movie Card Interactive UI With Pure CSS3 Animation Rating by Reece McDonald (@CubiDesigns) on CodePen.
Movie Card : RV Code Challenge
サムネイル画像をホバーすると下から詳細テキストが表示される仕組み。
See the Pen Week #2 :: Movie Card :: RV Code Challenge by Alex Fernandez (@alexfislegend) on CodePen.
Movie Card
斜めに切り込みを入れたヘッダーイメージが特長で、読みやすさにもこだわりを魅せたレイアウト。
See the Pen Movie Card by Andre Madarang (@drehimself) on CodePen.
プロフィール向けレイアウト
Daily UI #06 : Profile
各種ソーシャルメディアなどのプロフィールを簡単なカード型レイアウトにまとめています。
See the Pen Daily UI #6 – Profile by Genaro Colusso (@genarocolusso) on CodePen.
User Profile
飛び出すようなアニメーションエフェクトを追加することで、よりユーザーの注目を集める工夫も。
See the Pen #dailyui 006: User Profile by Gabrielle Wee (@gabriellewee) on CodePen.
User Profile
ミニカード状にまとめられたプロフィール用レイアウトで、ボタンをクリックすると各種SNSが飛び出します。
See the Pen Daily UI #006 User Profile by XiChen (@xichen) on CodePen.
Profile
サムネイルに合わせて、左右にレイアウトを分割してまとめたプロフィール画面。
See the Pen 006 – Profile by Matthias Martin (@roydigerhund) on CodePen.
Matriaup Card Profile
ユーザーアイコンをクリックすると、カード全体を背景カラーが塗りつぶし、各種アイコンがふわりと表示されます。
See the Pen materialup profile card by neel (@neel2292) on CodePen.
Material Design Card Profile
マテリアルデザインのコンセプトにユニークなスプラッシュエフェクトを加えた新機能。
See the Pen Material Design: Profile Card by Emil Devantie Brockdorff (@Mestika) on CodePen.
Live Material Design User Widget
See the Pen Live Material Design User Widget by Mattia Astorino (@equinusocio) on CodePen.
2 Slided Digital Business Card
See the Pen 2 Sided Digital Business Card by Jesse Couch (@designcouch) on CodePen.
90’s Profile Card
レトロな配色のストライプが印象的な、モダンレトロ系のプロフィール用カード型レイアウト。
See the Pen 90’s profile card by Ondřej Bárta (@PageOnline) on CodePen.
レシピ向けレイアウト
Recipe Card
シンプルに情報だけをまとめたレシピ向けカード型レイアウト。ドロップシャドウを利用した立体的なレイアウトは今年のトレンドのひとつ。
See the Pen Recipe Card by Travis Williamson (@travisw) on CodePen.
Recipe Card
ボタンをクリックすると、料理の手順を詳しく説明したコンテンツがスライド式に表示されます。
See the Pen Recipe Card by Dany Santos (@THEORLAN2) on CodePen.
Recipe UI Card Design
See the Pen Recipe Card UI Design by Riccardo Tartaglia (@riktar) on CodePen.
Recipe Card
調理時間や難易度などをアイコンで揃えることで、ユーザーが欲しい情報をより分かりやすく伝えることもできます。
See the Pen Recipe Card by Kevin Lesht (@klesht) on CodePen.
積み重ね型レイアウト
Stacked Cards Hover Effect
コンテンツが重なっているようなアニメーションが素敵なレイアウトで、さまざまな応用がききそうなスタイル。
See the Pen Stacked Cards Hover Effects by Kyle Brumm (@kjbrum) on CodePen.
Card Stack
三枚重ねられたカード型コンテンツは、マススホバーすることで全体を表現できるアニメーションエフェクト付。
See the Pen Card Stack by Lane Olson (@Lane) on CodePen.
参照元リンク : 70 CSS Cards – FreeFrontend.com
