MENU
日常や業務で便利なツールを公開中

そのまま使えるカードデザイン3選①｜HTML・CSSサンプル付き

Web制作 パーツデザイン

Web制作でそのまま使えるカードデザインを、HTMLとCSSを分けて使える形でまとめました。 見た目だけでなく、実際のサイト制作で使いやすい構造にしています。

今回紹介するのは、用途別に使い分けしやすい3パターンです。 迷ったらこの3つを持っておけばOKです。

目次

デザイン見本（まずは見た目）

実際の見た目を先に確認できます。気に入ったデザインをクリックすると該当箇所へ移動します。

ベーシックカードデザイン 画像メインカードデザイン シンプルカードデザイン

ベーシックカード（王道レイアウト）

もっとも使いやすい基本形です。ブログ記事一覧やニュース一覧に最適です。 画像・カテゴリ・日付・タイトル・説明文・リンクを入れられる、汎用性の高いカードです。

コード

HTML

<div class="card01">
  <img src="https://mota-file.com/wp-content/uploads/2026/05/card-part01.png" alt="ベーシックカードデザイン">

  <div class="card01-body">
    <div class="card01-meta">
      <span>デザイン</span>
      <time>2026.05.09</time>
    </div>

    <div class="card01-title">心地よい空間づくりのポイントとは？</div>
    <p>カードデザインは、画像・タイトル・説明文の見せ方で印象が大きく変わります。</p>
  </div>

  <a href="#">続きを読む</a>
</div>

CSS

.card01 {
  width: 320px;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  font-family: sans-serif;
}

.card01 img {
  display: block;
  width: calc(100% - 32px);
  height: 190px;
  margin: 16px auto 0;
  border-radius: 10px;
  object-fit: cover;
}

.card01-body {
  padding: 20px 24px 18px;
}

.card01-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
  color: #777;
  font-size: 13px;
}

.card01-meta span {
  padding: 5px 14px;
  border-radius: 999px;
  background: #eee3d4;
  color: #6a5846;
  font-weight: bold;
}

.card01-title {
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e5e5e5;
  color: #222;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.7;
}

.card01 p {
  margin: 0;
  color: #555;
  font-size: 14px;
  line-height: 1.9;
}

.card01 a {
  display: flex;
  justify-content: space-between;
  padding: 18px 24px;
  background: #f4efe7;
  color: #222;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
}

.card01 a::after {
  content: "→";
}

特徴

・記事一覧に使いやすい王道レイアウト
・カテゴリと日付を入れられる
・下部のリンクエリアまでカードの一部として見せられる

画像メインカード（ビジュアル重視）

画像の上にテキストを重ねることで、視覚的に訴求できるカードです。 写真を大きく見せたい記事や、ポートフォリオ、ギャラリー系に向いています。

コード

HTML

<div class="card02">
  <img src="https://mota-file.com/wp-content/uploads/2026/05/card-part01.png" alt="画像メインカードデザイン">

  <div class="card02-text">
    <div class="card02-meta">
      <span>ライフスタイル</span>
      <time>2026.05.09</time>
    </div>
    <div class="card02-title">朝の時間を整えて、1日を気持ちよく始める</div>
  </div>

  <a href="#">続きを読む</a>
</div>

CSS

.card02 {
  position: relative;
  width: 340px;
  height: 420px;
  overflow: hidden;
  border-radius: 16px;
  color: #fff;
  font-family: sans-serif;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}

.card02 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card02::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.05), rgba(0,0,0,.7));
}

.card02-text {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 82px;
  z-index: 1;
}

.card02-meta {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
  font-size: 12px;
}

.card02-meta span {
  padding: 5px 14px;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 999px;
  font-weight: bold;
}

.card02-title {
  font-size: 22px;
  font-weight: bold;
  line-height: 1.6;
}

.card02 a {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
}

.card02 a::after {
  content: "→";
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid #fff;
  border-radius: 50%;
}

特徴

・画像を主役にできる
・タイトルを強く印象づけられる
・丸い矢印ボタンでクリック導線を作れる

シンプルカード（テキスト重視）

装飾を減らし、文章を読みやすくしたシンプルなカードです。 ブログ記事や解説記事など、内容をしっかり読ませたい場面に向いています。

コード

HTML

<div class="card03">
  <img src="https://mota-file.com/wp-content/uploads/2026/05/card-part01.png" alt="シンプルカードデザイン">

  <div class="card03-body">
    <span class="card03-category">コラム</span>

    <div class="card03-title">
      グリーンを取り入れて、
      暮らしに癒しを
    </div>

    <p>
      シンプルなカードデザインは、内容をしっかり読ませたいときに便利です。
      余白を広めに取ることで、落ち着いた印象になります。
    </p>

    <a href="#">続きを読む</a>
  </div>
</div>

CSS

.card03 {
  width: 320px;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
  font-family: sans-serif;
}

.card03 img {
  display: block;
  width: calc(100% - 48px);
  height: 140px;
  margin: 24px auto 0;
  border-radius: 14px;
  object-fit: cover;
}

.card03-body {
  padding: 24px;
}

.card03-category {
  display: inline-block;
  margin-bottom: 16px;
  color: #7a868b;
  font-size: 12px;
  letter-spacing: .08em;
}

.card03-title {
  margin-bottom: 18px;
  color: #1f2f35;
  font-size: 22px;
  font-weight: bold;
  line-height: 1.7;
}

.card03 p {
  margin: 0 0 24px;
  color: #555;
  font-size: 14px;
  line-height: 2;
}

.card03 a {
  display: inline-block;
  padding-bottom: 4px;
  border-bottom: 1px solid #1f2f35;
  color: #1f2f35;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
}

.card03 a::after {
  content: " →";
}

特徴

・装飾を減らして読みやすさ重視
・説明文をしっかり見せられる
・ブログやコラム系サイトと相性が良い

カスタマイズのポイント

そのまま使うだけでも問題ありませんが、少し調整するだけでサイトに合ったデザインにできます。

角丸を変える

border-radius: 12px;

数値を大きくすると柔らかい印象になります。

影の強さを変える

box-shadow: 0 4px 12px rgba(0,0,0,0.1);

数値を大きくすると立体感が強くなります。

余白を変える

padding: 16px;
margin: 16px;

余白を広げると見やすくなります。

色を変える

background: #fff;
color: #333;

サイト全体のカラーに合わせて調整しましょう。

文字サイズを変える

font-size: 16px;

ターゲットに合わせて読みやすいサイズに変更します。

hoverで動きをつける

.card:hover {
transform: translateY(-5px);
transition: 0.3s;
}

少し浮かせるだけで、クリックされやすくなります。

まとめ

今回紹介した3つはどれも使いやすい形なので、そのまま使ったり、色や余白を調整して自分のデザインに合わせてみてください。

ボタンデザインからカードデザインも作ってみましたが、思ったよりコード量が多くなってしまいました！カード系は見た目をしっかり作ろうとすると、どうしてもコード量が増えてしまいますね。

一旦カードデザインはここで区切って、次はまたボタンや見出しあたりのデザインを作っていこうかなと思っています。
それでは、また次のデザインをお待ちください。

Web制作 パーツデザイン
よかったらシェアしてね！
  • URLをコピーしました！

関連記事

目次