カードを横並びにする方法【HTML/CSS・サンプルコード付き】 

カードUI
2026.06.29

カードを横並びにする方法

カードを横並びにする方法を紹介します。カードレイアウトは、商品一覧やサービス紹介、機能紹介、お知らせ一覧など、複数の情報を見やすく整理して表示したい場面でよく利用されます。横方向へ並べることで、限られたスペースでも情報を分かりやすく配置できます。

このサンプルでは、HTMLとCSSだけを使用して複数のカードを横並びに配置する基本的なレイアウトを作成します。カードにはタイトルと説明文を表示し、Flexboxを利用して横方向へ整列させています。JavaScriptは使用していないため、シンプルな構成で手軽に導入できます。

カードの幅や間隔、余白、背景色、枠線、文字サイズなどはCSSから自由に変更できます。シンプルな横並びレイアウトになっているため、商品カードや記事一覧、サービス紹介など、さまざまなカードUIのベースとして活用しやすいサンプルです。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

カード1

横並びで表示されるシンプルなカードUIです。

カード2

タイトルと説明文だけで構成された基本デザインです。

カード3

HTMLとCSSだけで実装できるサンプルです。

このデモでは、3枚のカードを横方向へ並べる基本的なカードUIを確認できます。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>横並びカードUI</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <!-- 横並びカードUI -->
  <div class="horizontal-card-ui_wrap">

    <article class="horizontal-card-ui_card">
      <h3>カード1</h3>
      <p>横並びで表示されるシンプルなカードUIです。</p>
    </article>

    <article class="horizontal-card-ui_card">
      <h3>カード2</h3>
      <p>タイトルと説明文だけで構成された基本デザインです。</p>
    </article>

    <article class="horizontal-card-ui_card">
      <h3>カード3</h3>
      <p>HTMLとCSSだけで実装できるサンプルです。</p>
    </article>

  </div>

</body>
</html>

ファイル構成と設置方法

このサンプルはHTMLファイルとCSSファイルの2つで構成されています。HTMLファイルでは横並びで表示するカードの構造を記述し、CSSファイルではカードの横並びレイアウト、余白、枠線、背景色、文字サイズなどの見た目を設定します。JavaScriptは使用していないため、ブラウザでそのまま表示して利用できます。 

sample/
├── index.html
└── style.css

ファイルを配置したらsample/index.htmlをブラウザで開くだけで動作します。カードのタイトルや説明文はindex.htmlから変更でき、カードの幅、並ぶ枚数、余白、枠線、背景色などのデザインはstyle.cssで自由に調整できます。

コメント