横並びサービスカード（3列）の作り方｜レスポンシブ完全対応のCSSサンプル付き

横に3つ並ぶ「サービスカード」は、LP・企業サイト・美容院・整体など多くのサイトで使われる定番デザインです。本記事では、PCでは3列、タブレットでは2列、スマホでは1列に自動変化する“完全レスポンシブ版”の作り方を解説します。

1 実装のポイント

• flexbox を使用して横並びレイアウトを作る
• gap でカード間の余白を調整
• スマホ幅では 1 カラムに自動変化する CSS を記述
• 画像＋タイトル＋説明文のベーシック構造

2 HTMLを追加

<div class="service-cards">

  <div class="service-card">
    <img src="https://example.com/wp-content/uploads/20××/××/sample1.jpg" alt="サービス1">
    <h3>サービス名1</h3>
    <p>サービス内容の説明文が入ります。簡単で分かりやすい紹介文を入れてください。</p>
  </div>

  <div class="service-card">
    <img src="https://example.com/wp-content/uploads/20××/××/sample2.jpg" alt="サービス2">
    <h3>サービス名2</h3>
    <p>サービス内容の説明文が入ります。簡単で分かりやすい紹介文を入れてください。</p>
  </div>

  <div class="service-card">
    <img src="https://example.com/wp-content/uploads/20××/××/sample3.jpg" alt="サービス3">
    <h3>サービス名3</h3>
    <p>サービス内容の説明文が入ります。簡単で分かりやすい紹介文を入れてください。</p>
  </div>

</div>

3 汎用CSS

/* -----------------------------------
 * 3列サービスカード（レスポンシブ対応）
 *-------------------------------------- */

/* コンテナ */
.service-cards { /* 全カードを包むコンテナ */
  display: flex; /* 横並びにする */
  flex-wrap: wrap; /* 折り返しを許可 */
  gap: 20px; /* カード間の余白 */
  justify-content: space-between; /* 横方向の均等配置 */
}

/* 個別カード */
.service-card { /* 各カードのスタイル */
  background: #fff; /* 背景色 */
  border: 1px solid #ddd; /* 枠線 */
  border-radius: 10px; /* 角丸 */
  padding: 20px; /* 内側余白 */
  width: calc(33.333% - 20px); /* PC時：3列 */
  box-shadow: 0 4px 8px rgba(0,0,0,0.08); /* 軽い影 */
  transition: transform 0.3s ease; /* アニメーション */
}

/* ホバー演出 */
.service-card:hover { /* ホバー時 */
  transform: translateY(-5px); /* 少し浮かせる */
}

/* 画像 */
.service-card img { /* カード内の画像 */
  width: 100%; /* 全幅 */
  height: auto; /* 比率維持 */
  border-radius: 8px; /* 角丸 */
  margin-bottom: 15px; /* 下余白 */
}

/* タイトル */
.service-card h3 { /* 見出し */
  font-size: 1.2em; /* 文字サイズ */
  margin-bottom: 10px; /* 下余白 */
  font-weight: bold; /* 太字 */
}

/* 説明文 */
.service-card p { /* テキスト */
  font-size: 0.95em; /* 少し小さめ */
  line-height: 1.6; /* 行間 */
  color: #444; /* 濃いグレー */
}

/* タブレット（2列） */
@media (max-width: 960px) {
  .service-card {
    width: calc(50% - 20px); /* 2列 */
  }
}

/* スマホ（1列） */
@media (max-width: 600px) {
  .service-card {
    width: 100%; /* 1列 */
  }
}

4 完成イメージ

4.1 サービス名1

サービス内容の説明文が入ります。簡単で分かりやすい紹介文を入れてください。

4.2 サービス名2

サービス内容の説明文が入ります。簡単で分かりやすい紹介文を入れてください。

4.3 サービス名3

サービス内容の説明文が入ります。簡単で分かりやすい紹介文を入れてください。

5 代用プラグイン

• VK Blocks（Lightning）
• Snow Monkey Blocks
• Cocoon ブロック（ボックス系ブロック）

ノーコードで同じような3列レイアウトを作りたい場合に便利です。

6 まとめ

• PC は3列、タブレットは2列、スマホは1列に変化
• flexbox＋media query で実装可能
• デザインは影・角丸・余白を追加すると洗練される
• 光る演出・アニメなどを追加しやすい汎用デザイン