この記事には広告を含む場合があります。
記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。
前回のボタンデザインに続いて、今回は「カード」です。ブログの記事一覧、プロフィール、おすすめの紹介……カードはページのあちこちで大活躍するパーツですよね。
この記事では、コピペするだけで使えるカードデザインを12種類、実際の見た目を見ながら選べるようにまとめました。
マウスを乗せるとふわっと動くホバー付きや、画像を入れるタイプもそろえています。
気に入ったものを見つけたら、そのままポチッとコピーして使ってください。
コピペの手順（CSSとHTMLの入れ方）
各デザインには「CSS」と「HTML」の2つのコードがあります。次の2ステップで貼り付ければOKです。テーマのファイルを直接いじる必要はありません。
ステップ1｜CSSを追加CSSに貼る
外観 → カスタマイズ → 追加CSS を開いて、使いたいカードのCSSを貼り付けます。ここは一度貼れば、サイトのどのページからでも何度でも使い回せます。
ステップ2｜HTMLはカスタムHTMLブロックに貼る
記事の編集画面で、カードを置きたい場所にブロックを追加し、種類の一覧から「カスタムHTML」を選びます。そこにHTMLを貼り付けると、カードが表示されます。
普通の段落ブロックに貼ると、タグがそのまま文字として出てしまうので、かならず「カスタムHTML」ブロックを使ってくださいね。
HTMLを省略しているカードは、デザイン1「シンプルな影付きカード」のHTMLをコピーして、class名を使いたいカードのものに変えるだけで使えます。プレビューの画像部分はイメージなので、実際に使うときはお好きな画像に差し替えてください。
ボタンとあわせて使いたい方は、こちらもどうぞ。
まずはこれ。基本の3カード
装飾は控えめでも、余白と影のバランスが取れているだけでぐっと「ちゃんとしたサイト」に見えます。迷ったらこのグループから選べば失敗しません。
1. シンプルな影付きカード
いちばん使いやすい基本形です。やわらかい影で、白背景の上でもふんわり浮いて見えます。
カードのタイトル
ここに説明文が入ります。影をやわらかく付けた、いちばん使いやすい基本のカードです。
HTML
<div class="simple-card">
<h3>カードのタイトル</h3>
<p>ここに説明文が入ります。</p>
</div>CSS
.simple-card {
background: #fff;
border-radius: 12px;
padding: 24px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.simple-card h3 {
margin: 0 0 8px;
font-size: 1.2em;
}
.simple-card p {
margin: 0;
color: #555;
line-height: 1.7;
}2. 枠線だけのすっきりカード
影を使わず、細い枠線で囲んだタイプです。背景がにぎやかなページでも、うるさくならずにまとまります。
カードのタイトル
細い枠線で囲んだだけの、すっきりした印象のカードです。
CSS
.border-card {
background: #fff;
border: 2px solid #e3e6e8;
border-radius: 12px;
padding: 24px;
}3. 左に色の線が入ったカード
左端にアクセントの線を入れると、それだけで目線を引きつけられます。ポイント解説や補足コメントにぴったりです。
ここがポイント
左に色の線を入れると、目線を自然に引きつけられます。
CSS
.accent-card {
background: #fff;
border-left: 5px solid #37a845;
border-radius: 8px;
padding: 20px 24px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
.accent-card h3 {
color: #028a00;
}写真を主役にするカード
アイキャッチや商品写真を使うなら、このグループ。画像の見せ方でカードの印象は大きく変わります。
4. 画像が上に入ったカード
ブログの記事一覧でおなじみの、いちばん定番のかたちです。角丸からはみ出さないよう、はみ出た部分を隠す指定を入れているのがポイントです。
記事のタイトル
画像が上に入った、いちばん定番のカードです。
HTML
<div class="photo-card">
<img src="画像のURL" alt="">
<div class="body">
<h3>記事のタイトル</h3>
<p>ここに説明文が入ります。</p>
</div>
</div>CSS
.photo-card {
background: #fff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
max-width: 320px;
}
.photo-card img {
width: 100%;
height: 170px;
object-fit: cover;
display: block;
}
.photo-card .body {
padding: 20px;
}5. 画像と文章が横並びのカード
画像を左、文章を右に置いた横長タイプです。スマホなど狭い画面では自動で縦積みに切り替わるようにしてあります。
横並びのカード
画像と文章を横に並べたタイプ。狭い画面では縦積みに変わります。
HTML
<div class="row-card">
<img src="画像のURL" alt="">
<div class="body">
<h3>横並びのカード</h3>
<p>ここに説明文が入ります。</p>
</div>
</div>CSS
.row-card {
display: flex;
background: #fff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
max-width: 460px;
}
.row-card img {
width: 140px;
flex-shrink: 0;
object-fit: cover;
}
.row-card .body {
padding: 16px 20px;
}
/* スマホでは縦積みに */
@media (max-width: 480px) {
.row-card {
flex-direction: column;
}
.row-card img {
width: 100%;
height: 150px;
}
}6. 画像に文字が重なるカード
写真の上に直接タイトルをのせるタイプです。下から黒いグラデーションをかけているので、明るい写真でも文字がしっかり読めます。
HTML
<div class="overlay-card">
<img src="画像のURL" alt="">
<div class="text">
<h3>写真に重なるタイトル</h3>
<p>ここに説明文が入ります。</p>
</div>
</div>CSS
.overlay-card {
position: relative;
border-radius: 12px;
overflow: hidden;
max-width: 320px;
aspect-ratio: 3 / 2;
}
.overlay-card img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.overlay-card .text {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 20px;
background: linear-gradient(to top, rgba(0, 0, 0, 0.65), transparent 60%);
color: #fff;
}マウスを乗せると動くカード
ホバーで少し動きが付くだけで、「押せる感」が出てクリック率が上がります。記事一覧やリンクカードにおすすめです。
7. ふわっと浮き上がるカード
マウスを乗せると上にすっと持ち上がり、影も濃くなります。動きの中でもいちばん人気の定番です。
浮き上がるカード
マウスを乗せてみてください。ふわっと持ち上がります。
CSS
.hover-lift {
background: #fff;
border-radius: 12px;
padding: 24px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
transition: transform 0.3s, box-shadow 0.3s;
}
.hover-lift:hover {
transform: translateY(-6px);
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
}8. じんわり大きくなるカード
マウスを乗せるとカード全体がわずかに拡大します。数字を大きくしすぎるとレイアウトが崩れて見えるので、1.04くらいがちょうどいいです。
大きくなるカード
乗せるとカード全体がじんわり拡大します。
CSS
.hover-zoom {
background: #fff;
border-radius: 12px;
padding: 24px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
transition: transform 0.3s;
}
.hover-zoom:hover {
transform: scale(1.04);
}9. 画像だけがズームするカード
カードの枠はそのままに、中の画像だけがゆっくり拡大します。はみ出た部分を隠す指定が効いていて、枠からあふれずにズームします。
画像がズーム
中の画像だけがゆっくり拡大します。
HTML
<div class="zoom-img-card">
<div class="thumb"><img src="画像のURL" alt=""></div>
<div class="body">
<h3>画像がズーム</h3>
<p>ここに説明文が入ります。</p>
</div>
</div>CSS
.zoom-img-card {
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
max-width: 320px;
background: #fff;
}
.zoom-img-card .thumb {
overflow: hidden;
}
.zoom-img-card img {
width: 100%;
height: 170px;
object-fit: cover;
display: block;
transition: transform 0.4s;
}
.zoom-img-card:hover img {
transform: scale(1.1);
}
.zoom-img-card .body {
padding: 18px 20px;
}ちょっとおしゃれなカード
「その他大勢」から一歩抜け出したいとき用の、少し凝ったデザインです。使いどころを絞ると効果的です。
10. 枠がグラデーションになったカード
外枠にクローバーグリーンのグラデーションをかけたカードです。外側と内側の2枚重ねで作るのがコツです。
グラデーションの枠
外枠に色のグラデーションをかけた、少し華やかなカードです。
HTML
<div class="gradient-border-card">
<div class="inner">
<h3>グラデーションの枠</h3>
<p>ここに説明文が入ります。</p>
</div>
</div>CSS
.gradient-border-card {
border-radius: 14px;
padding: 4px; /* この余白が枠の太さになります */
background: linear-gradient(135deg, #37a845, #028a00);
box-shadow: 0 4px 16px rgba(2, 138, 0, 0.15);
max-width: 340px;
}
.gradient-border-card .inner {
background: #fff;
border-radius: 10px;
padding: 22px;
}11. 右上にリボンが付いたカード
「NEW」や「おすすめ」を目立たせたいときに便利な、斜めリボン付きです。画像を使わず、CSSだけで作っています。
リボン付きカード
右上の斜めリボンで「NEW」を目立たせられます。
CSS
.ribbon-card {
position: relative;
background: #fff;
border-radius: 12px;
padding: 24px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
overflow: hidden;
}
.ribbon-card::before {
content: "NEW"; /* ここの文字を変えられます */
position: absolute;
top: 16px;
right: -32px;
width: 120px;
transform: rotate(45deg);
background: #37a845;
color: #fff;
text-align: center;
font-size: 0.78em;
font-weight: bold;
padding: 4px 0;
}12. 半透明のすりガラス風カード
背景がうっすら透けて見える、すりガラスのようなカードです。写真や色の付いた背景の上に置くと、いちばん映えます。
すりガラス風カード
背景がうっすら透けて見える、涼しげなデザインです。
CSS
.glass-card {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 16px;
padding: 26px;
color: #fff;
}このカードだけは、後ろに色や写真がないと透ける効果が見えません。色の付いた背景やアイキャッチの上で使ってくださいね。
ダークモードにも対応させたいとき
スマホやパソコンをダークモードにしている読者のために、暗い背景でも見やすい色に切り替えておくと親切です。次のCSSを追加すると、端末がダークモードのときだけ自動で色が変わります。
@media (prefers-color-scheme: dark) {
.simple-card,
.border-card,
.accent-card,
.hover-lift,
.hover-zoom,
.ribbon-card {
background: #2a2a2a;
color: #f0f0f0;
}
.simple-card p,
.border-card p,
.accent-card p,
.hover-lift p,
.hover-zoom p,
.ribbon-card p {
color: #c8c8c8;
}
.border-card {
border-color: #444;
}
}使いたいカードのclass名だけを残して、あとは消してもらえば大丈夫です。
動きが苦手な人にも配慮する
ホバーで動くカードは楽しい反面、画面の動きが体調に響く方もいます。そういう読者の設定を尊重するために、次の1行を足しておくと安心です。
@media (prefers-reduced-motion: reduce) {
.hover-lift,
.hover-zoom,
.zoom-img-card img {
transition: none;
}
}ここで大事なのは、動きを止める対象を「飾りのホバーだけ」に絞っていることです。ページ全体にまとめて動きを止める指定をかけてしまうと、必要なアニメーションまで消えてしまうことがあるので、こうして対象を限定しておくのがおすすめです。
まとめ
今回は、コピペで使えるカードデザインを12種類ご紹介しました。
基本の3枚（シンプル・枠線・左のライン）はどんなサイトでも使いやすく、写真入りやホバー付きは記事一覧を華やかにしてくれます。まずは気になったものを1つ、追加CSSに貼って試してみてください。class名を自分のわかりやすい名前に変えて使うのもおすすめです。
ボタンとカードがそろうと、ブログの見た目はぐっと整います。まだの方は前回のボタン記事もあわせてどうぞ。
それではﾉｼ
