カード一覧レイアウトを作るFlexboxの使い方【HTML/CSS・サンプルコード付き】

Flexbox

カード一覧レイアウトを作るFlexboxの使い方

カード一覧レイアウトを作るFlexboxの使い方を紹介します。本記事では、HTMLとCSSを使って複数のカードを一覧形式で表示するレイアウトを作成します。Flexboxを利用することで、カードを整列させながら見やすい一覧レイアウトを簡単に作ることができます。

このサンプルコードでは、カードを横並びに配置し、横幅に収まらない場合は次の行へ折り返して表示します。カード同士の間隔も均一に調整するため、商品一覧や記事一覧のような実用的なレイアウトを作成できます。Flexboxの基本機能を組み合わせた実践的なサンプルです。

カード一覧レイアウトは、ブログ記事一覧、商品一覧、サービス紹介、プロフィール一覧、機能紹介ページなどさまざまな場面で利用されています。Flexboxの基本的な使い方を学びながら、実際のWebサイトでよく使われる一覧レイアウトを作りたい方におすすめです。

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

デモ

カード一覧レイアウト

複数のカードを横並びにし、横幅に収まらない場合は次の行へ折り返します。

display:flex; でカードを横並びにします。
flex-wrap:wrap; で横幅に収まらないカードを次の行へ折り返します。
gap:16px; でカード同士の間隔をそろえます。

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

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コードを指定 -->
  <meta charset="UTF-8">

  <!-- スマホ表示に対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>カード一覧レイアウトを作るFlexboxの使い方</title>

  <!-- CSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- 全体エリア -->
  <div class="flexbox-card-list-layout_wrap">

    <!-- タイトル -->
    <h1 class="flexbox-card-list-layout_title">
      カード一覧レイアウト
    </h1>

    <!-- カード一覧 -->
    <div class="flexbox-card-list-layout_list">

      <div class="flexbox-card-list-layout_card"></div>
      <div class="flexbox-card-list-layout_card"></div>
      <div class="flexbox-card-list-layout_card"></div>
      <div class="flexbox-card-list-layout_card"></div>
      <div class="flexbox-card-list-layout_card"></div>
      <div class="flexbox-card-list-layout_card"></div>

    </div>

  </div>

</body>
</html>

ファイル構成と設置方法

このサンプルでは、HTMLとCSSを別ファイルで管理します。HTMLに複数のカードを配置し、CSSでFlexboxを使ってカード一覧レイアウトを作成します。 

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

2つのファイルを同じフォルダへ配置し、ブラウザで index.html を開いてください。カード一覧を作るには、カード一覧の要素に display:flex;、flex-wrap:wrap;、gap を指定します。

コメント