デザイン

デザイン

美しいカードデザインをコードで学ぶ!無料で使えるCSSコンテンツカード用スニペット10選!

16,896 views

読了時間 : 約3分14秒

CSSコンテントカードは、ブログ記事や商品・サービス等のコンテンツをまとめるのに最適です。きれいにデザインすることで、各コンテンツをより一層見やすくすることができますし、マウスオーバーエフェクトや画像フィルターを使用すると、さらに高レベルなものになります。

そこで今回は、見た目も美しく機能的な10個のCSSコンテンツカードをご紹介します。自分用のプロジェクトにも使えるコードが入手可能です。

 

なお、カードデザインはサイトに統一感とクリーンな印象を演出する上で効果的なデザインですが、使用にはもちろん注意点もあります。以下の記事に使用のコツをまとめていますので参考にしてください。

【Webデザインのコツ】カードを使ってスタイリッシュで見やすいサイトデザイニングを

UI/UXデザイナーは注意が必要!カードデザインで頻発している5つのミス

 

 

1.マテリアルデザイン:レスポンシブカード

 

このコンテンツカードはグーグルが提唱するマテリアルデザインの原理を取り入れており、とてもインタラクティブ。右上のアイコンをクリックすると、スムーズなアニメーションと共に写真が縮小され、詳細なコンテンツが表示されます。トレカのオンライン版といったところでしょうか。

CodePenを見る

 

 

2.Google Now風フリップカード

 

Google Now風にスタイルされたフリップカードです。数字につけられたドロップシャドウが印象的で、クリックするとカードが裏返ってコンテンツが表示される仕組みになっています。

CodePenを見る

 

 

3.パララックスデプスカード

 

ユニークなものを追求しているデザイナーの方には、Andy Merskin氏の作品がおすすめ。こちらのカードは、マウスオーバーすると視差効果が起こり、カーソルの位置に合わせて写真の景色が動くという仕組みで、同時に文章も表示されます。目を見張るような作品です。

CodePenを見る

 

 

4.プロダクトカード

 

オンラインで商品をリスト化する際は、シンプルなデザインがベター。そんな美しいほどにシンプルなデザインのプロダクトカードがこちら。マウスオーバーするとサイズと色の情報が表示され、とても上品で美しいユーザーインターフェース(UI)になっています。

CodePenを見る

 

 

5.アーティクルニュースカード

 

ニュースやブログサイトには、こちらのカードデザインがあれば全て事足りてしまいます。カテゴリー・日付・コメント欄・タイトルはもちろんのこと、写真用のスペースも十分。マウスオーバーで記事の抜粋部分も表示されます。

CodePenを見る

 

 

6.ブログカード

私たちが普段目にするコンテンツカードは縦長のものがほとんですが、Chyno Deluxe氏によるカードは横長で、ひと味違います。デザインがシンプルで素晴らしく、きれいにまとめられています。斜めにカットされた写真もまたオシャレ。マウスオーバーで、写真の上にレイヤーとしてコンテンツが表示されます。

 

CodePenを見る

 

 

7.マテリアルデザイン:プロフィールカード

 

デザインの中にある繊細さには惹かれるものがありますが、このカードはそのいい例です。丸い写真の周りにあるボーダーが、かすかではありますが目を引きます。スクリーンサイズにより横長・縦長と切り替わります。全体のレイアウトがとてもシンプルかつ分かりやすく、プロフィールカードのお手本といってもいいでしょう。

CodePenを見る

 

 

8.ニュースカード(CSSオンリー)

 

機能的なデザインで美しく、Javascript不要のカードがこちら。どちらのデザインもブログ記事にぴったりです。画像をメインにしたいのであれば、右側の全画像デザインがベスト。

CodePenを見る

 

 

9.フレックスボックスカード

 

長さの関係でタイトルを不自然に短くしなければならないことはよくありますが、このカードは、タイトルが多少長くなったとしても自由がきくように作られています。また全てCSSで出来ており、素敵なデザインかつ使いやすいものになっています。

CodePenを見る

 

 

10.レシピカード

 

見ているだけでよだれが出そうなレシピカード。他のコンテンツカードよりも横長ですが、より多くのコンテンツを表示するのに最適です。アイコンの使用もまたアクセントになっています。

CodePenを見る

 

 

 

CSSコンテンツカードは、レイアウトにしっかりとしたまとまりを持たせるだけでなく、よりクリエイティブなデザインを提供してくれます。今回紹介した例からもお分かりのように、マウスオーバーやクリックの動作を利用することで詳細なコンテンツや特殊効果を表示するものが多く、見た目よりもずっとフレキシブルな作りになっているものがほとんどです。

 

これらのサンプルを使っていろいろとレイアウトをいじってみると面白いかもしれません。自分自身のデザインアイディアに繋がる発見があるかもしれませんよ。

 

 

※本記事は、10 Free Snippets for Creating CSS Content Cardsを翻訳・再構成したものです。

【コンビニでも使える!メルペイ初回利用1000円分招待コード】

当サイト限定招待コード:CMUTDF

 
利用可能店舗:メルカリ、コンビニ、ドラッグストア等

金額:※さらにメルペイスマート払で2000円分ポイント!
友達招待でお互いに1000円分ポイント!2人以上招待でUSJ貸し切りイベントに抽選招待も!

メルカリ-フリマアプリ&スマホ決済メルペイ

メルカリ-フリマアプリ&スマホ決済メルペイ

無料

 

Seleqtをご覧頂いた方だけに「朗報」
\当サイト限定特別クーポン/

 
【Uber taxi初回利用2000円オフクーポン】
JP20gd6nv7

 

プロモーション コードを追加するで「JP20gd6nv7」を入れてください。
※プロモコードは日本国内でのみ利用可能
 
»当サイト限定の初回利用2000円オフのクーポンを使って登録はこちら!

Uber

Uber

 

Seleqtをご覧頂いた方だけに「朗報」
\当サイト限定特別クーポン/

 

【UberEats初回1000円オフクーポン】
ins6je2v

 

対象店舗:マック、ガスト、スタバ、ピザハット、松屋 等
※1000円分無料で頼めます。〇〇円以上とかもナシ!完全無料でお試しOK
割引額:1000円引き
 
»当サイト限定の初回利用1000円オフのクーポンを使って登録はこちら!

Uber Eats: 地元で人気の料理をお届け

Uber Eats: 地元で人気の料理をお届け

無料

おすすめ新着記事

おすすめタグ