横並びサービスカード（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/20xx/xx/sample1.jpg" alt="サービス1">
    <h3>サービス名1</h3>
    <p>サービス内容の説明文が入ります。簡単で分かりやすい紹介文を入れてください。</p>
  </div>

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

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

</div>

3 汎用CSS

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

.service-cards,
.service-cards * {
  box-sizing: border-box;
}

/* コンテナ */
.service-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

/* 個別カード */
.service-card {
  width: calc((100% - 40px) / 3);
  padding: 20px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  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 {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 15px;
  border-radius: 8px;
}

/* タイトル */
.service-card h3 {
  margin: 0 0 10px;
  font-size: 1.2em;
  font-weight: bold;
}

/* 説明文 */
.service-card p {
  margin: 0;
  color: #444;
  font-size: 0.95em;
  line-height: 1.6;
}

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

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

4 完成イメージ

4.1 サービス名1

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

4.2 サービス名2

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

4.3 サービス名3

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

5 代用できるブロック機能

• VK Blocks
• Snow Monkey Blocks
• Cocoonのカラム・ボックス系ブロック

ブロックエディターを使用している場合は、テーマやプラグインのカラム・グリッド系ブロックを使って、似たレイアウトを作ることもできます。

6 まとめ

• PCは3列、タブレットは2列、スマホは1列に変化
• Flexboxとメディアクエリだけで実装可能
• 影・角丸・余白を使ったシンプルなカードデザイン
• サービス紹介・料金・スタッフ紹介など、さまざまな用途に応用可能