カードの列数を指定するFlexboxの使い方【HTML/CSS・サンプルコード付き】

Flexbox

カードの列数を指定するFlexboxの使い方

カードの列数を指定するFlexboxの使い方を紹介します。本記事では、HTMLとCSSを使ってカード一覧を3列・4列・5列など任意の列数で表示する方法を解説します。カード一覧ページや商品一覧ページなどでよく使われる実用的なレイアウトです。

このサンプルコードでは、Flexboxを使ってカードを横並びにしながら、カードの横幅を計算して列数を固定します。列数を変更したい場合はCSSの数値を変更するだけで対応できるため、さまざまな一覧レイアウトへ応用できます。

カードの列数指定は、商品一覧、記事一覧、サービス紹介、ポートフォリオ、画像ギャラリーなど多くのWebサイトで利用されています。Flexboxの基本を学びながら、実際のサイト制作で使える一覧レイアウトを作りたい方におすすめです。

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

デモ

カードの列数を指定するFlexbox

下のカードは3列で表示しています。CSSの数値を変更すると4列や5列にもできます。

width:calc((100% - 32px) / 3); を指定すると3列になります。
4列にする場合は width:calc((100% - 48px) / 4);、5列にする場合は width:calc((100% - 64px) / 5); のように変更します。
列数を自由に変更できるため、商品一覧や記事一覧などで便利です。

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

<!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-column-count-layout_wrap">

    <!-- タイトル -->
    <h1 class="flexbox-column-count-layout_title">
      カードの列数を指定するFlexbox
    </h1>

    <!-- カード一覧 -->
    <div class="flexbox-column-count-layout_list">

      <div class="flexbox-column-count-layout_card"></div>
      <div class="flexbox-column-count-layout_card"></div>
      <div class="flexbox-column-count-layout_card"></div>
      <div class="flexbox-column-count-layout_card"></div>
      <div class="flexbox-column-count-layout_card"></div>
      <div class="flexbox-column-count-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; を指定します。カードの列数は、各カードの width を変更するだけで3列・4列・5列など自由に調整できます。

コメント