2017年大本命！HTML/CSSで表現できる、参考にしたいカード型レイアウト60個まとめ

 

Google が2014年に発表したマテリアルデザインは、ウェブだけでなくグラフィックデザインでもますます人気となっており、さまざまな方法で採用しているケースをよく見かけるようになりました。

 

今回は HTML と CSS、わずかな JavaScript で実装できる、今後の参考にしたいカード型レイアウト用コードスニペットをまとめてご紹介します。コードニペットは各レイアウト別にカテゴリ分けしているので、ウェブサイト制作に活用したものを見つけてはいかがでしょう。

 

http://photoshopvip.net/97946

http://photoshopvip.net/100275

http://photoshopvip.net/96943

 

 

コンテンツ目次

• 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

2017年大本命！HTML/CSSで表現できる、参考にしたいカード型レイアウト60個まとめはPhotoshopVIPで公開された投稿です。