デザイン

デザイン

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

17,929 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を翻訳・再構成したものです。

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

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

 
・利用可能店舗:メルカリ、コンビニ、ドラッグストア等
・金額:500円分
※さらにメルペイスマート払で1000円分ポイント!
 友達招待でさらに500円分ポイント!

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

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

無料

 

ピックアップ! さらに今このキャンペーン中です↓

ポイント50%&20%還元『メルペイフィーバー・メルペイサンデー』
■キャンペーン期間:2020/03/01 ~ 2020/03/31

 

 

【MOV初回限定 合計2,000円相当無料クーポン3枚】

クーポンコード:seleqt2000

 
対応地域:神奈川県、東京都、大阪府、京都府、兵庫県(新登場)
 
2000円オフで登録» »MOVの初回利用2000円オフのクーポンを使って登録はこちら!
 
アプリDLはこちらから↓

MOV《モブ》- タクシー配車

MOV《モブ》- タクシー配車

DeNA Co., Ltd.無料

 

 

 

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

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

 

対象店舗:マック、ガスト、スタバ、ピザハット、松屋 等
※1000円分無料で頼めます。〇〇円以上とかもナシ!完全無料でお試しOK
割引額:1000円引き

 

1000円オフで登録» »当サイト限定の初回利用1000円オフのクーポンを使って登録はこちら!

 

アプリDLはこちらから↓

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

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

無料

 

おすすめ新着記事

おすすめタグ