HTMLとCSSでカードを増やす・列数を変える

1. カード1個分を丸ごとコピーする

Template 001のトップページにあるサービスカードは、<article class="service-card"> から </article> までが1個分です。

<article class="service-card" data-number="04">
  <div class="service-icon">04</div>
  <h3>新しいサービス名</h3>
  <p>ここにサービスの説明を書きます。</p>
  <a class="text-link" href="#">詳しく見る →</a>
</article>

2. PCで3列になる仕組み

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

repeat(3, 1fr) は「同じ幅の列を3つ作る」という意味です。

3. 2列に変更する

.service-grid {
  grid-template-columns: repeat(2, 1fr);
}

1枚あたりを大きく見せたい場合に向いています。

4. 4列に変更する

.service-grid {
  grid-template-columns: repeat(4, 1fr);
}

4列は画面幅が必要です。文章が長いカードでは窮屈になりやすいため、サイト幅も確認してください。

5. スマホでは1列に戻す

PCを4列に変更した場合でも、スマートフォンは読みやすい1列にするのが基本です。

@media (max-width: 680px) {
  .service-grid {
    grid-template-columns: 1fr;
  }
}

Template 001にはこの考え方のレスポンシブ設定がすでに入っています。

6. カードの数と列数を合わせる

必ず割り切れる必要はありませんが、最後の行が1枚だけになる場合はレイアウトのバランスを確認します。

7. カード変更後のチェック

• HTMLの開始・終了タグが揃っている
• カード同士の高さが極端に違わない
• 1カード内の文章量が多すぎない
• PCの列数がサイト幅に合っている
• スマホでは1列で読みやすい