簡単!よくあるカードデザインの作り方

CSS

レイアウト

こんにちは、中の人です。
今回は、メディアサイトなどでよく見るカードデザインの実装例をご紹介していきたいと思います。

下準備

まずはカード単体の実装をしていきます。

■HTML
hogehoge

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

■CSS .card { box-shadow: 10px 10px 10px rgba(0, 0, 0, .1); position: relative; transition: background .5s ease, box-shadow .5s ease; } .card:hover { background: #f5f5f5; box-shadow: none; } .card-link { position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .card-thumbnail { object-fit: cover; height: 150px; width: 100%; } .card-text { padding: 10px; }
hogehoge

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

並べてみる

hogehoge

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

hogehoge

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

hogehoge

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

■HTML
hogehoge

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

hogehoge

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

hogehoge

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

■CSS
.card-section {
	display: flex;
}
.card {
	box-shadow: 10px 10px 10px rgba(0, 0, 0, .1);
	position: relative;
	transition: background .5s ease, box-shadow .5s ease;
}
.card:hover {
	background: #f5f5f5;
	box-shadow: none;
}
.card:not(:last-child) {
	margin-right: 20px;
}
.card-link {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}
.card-thumbnail {
	object-fit: cover;
	height: 150px;
	width: 100%;
}
.card-text {
	padding: 10px;
}

@media screen and (max-width: 767px) {
	.card-section {
		display: block;
	}
	.card:not(:last-child) {
		margin: 0;
		margin-bottom: 20px;
	}
}

ざっくりと解説

今回のポイントは概ねこちらになります。

  1. カードにリンクを持たせるために空のaタグを使用(“position: absolute;”を使用してカード全体を覆うようにする)
  2. “:not(:last-child)”で最後のカード要素意外にmarginを持たせる
  3. メディアクエリを用いてPC/SPで表示を分ける(PCは”display: flex;”で横並び、SPは”display: block;”で縦並び)

ざっくりとで申し訳ないのですが、だいたいこんな感じだと思います。
私事ですが、記事のネタ探しに困っております。
以上、「よくあるカードデザインの作り方」でした。

心からオススメしたいRecommend

JavaScript

ライブラリ

「Luxy.js」を使って慣性スクロールやパララックス効果を簡単に実装してみる

CSS

擬似要素

テキストリンクの下線を擬似要素を用いて表示させる方法

広告PR