カードを横並びにする基本的なFlexboxの使い方【HTML/CSS・サンプルコード付き】

Flexbox

カードを横並びにする基本的なFlexboxの使い方

カードを横並びにする基本的なFlexboxの使い方を紹介します。本記事では、HTMLとCSSを使って複数のカードを横方向へ並べる方法を解説します。FlexboxはWebサイトのレイアウト作成で広く利用されている機能で、少ないコードで整った配置を実現できるのが特徴です。

このサンプルコードでは、複数のカードを横並びで表示し、画面サイズに応じて自然に配置されるレイアウトを作成します。Flexboxを利用することで、複雑な計算や古いレイアウト手法を使わなくても、見やすいカード一覧を簡単に作成できます。Flexboxを初めて学ぶ方でも理解しやすいシンプルな構成になっています。

カードの横並びレイアウトは、商品一覧、サービス紹介、機能一覧、ブログ記事一覧などさまざまな場面で利用されています。Flexboxの基本を理解しておくと、今後のレイアウト作成にも応用しやすくなります。まずはカードを横並びにする方法から学び、Flexboxの基本的な使い方を身につけましょう。

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

デモ

カードを横並びにするFlexbox

下の3つのカードは、カード一覧に display:flex; を指定して横並びにしています。

display:flex; を指定すると、中にあるカードが横方向に並びます。
gap:16px; でカード同士の間隔を空けています。
flex:1; を指定しているため、3つのカードは同じ横幅で表示されます。

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

<!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="basic-flexbox-card-layout_wrap">

    <!-- タイトル -->
    <h1 class="basic-flexbox-card-layout_title">
      カードを横並びにするFlexbox
    </h1>

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

      <!-- カード1 -->
      <div class="basic-flexbox-card-layout_card"></div>

      <!-- カード2 -->
      <div class="basic-flexbox-card-layout_card"></div>

      <!-- カード3 -->
      <div class="basic-flexbox-card-layout_card"></div>

    </div>

  </div>

</body>
</html>

ファイル構成と設置方法

このサンプルでは、HTMLとCSSを別ファイルで管理します。HTMLにカード一覧の構造を配置し、CSSでFlexboxを使ってカードを横並びにします。 

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

2つのファイルを同じフォルダへ配置し、ブラウザで index.html を開いてください。カードを横並びにするには、カード一覧の要素に display:flex; を指定します。カード同士の間隔は gap、カードの横幅は flex で調整できます。

コメント