画面幅に合わせてカードを自動で折り返す方法【HTML/CSS・サンプルコード付き】

カードUI

画面幅に合わせてカードUIを自動で折り返す方法

画面幅に合わせてカードUIを自動で折り返す方法を紹介します。カードUIは、商品一覧やサービス紹介、ブログ記事一覧など、複数の情報を整理して表示したい場面でよく利用されます。画面サイズに応じてカードの並び方が自動で変わるため、パソコン・タブレット・スマートフォンのどの環境でも見やすいレイアウトを作成できます。

このサンプルでは、HTMLとCSSだけを使用し、CSS Gridの自動レイアウト機能によってカードを横並びに配置します。画面幅に余裕がある場合は複数列で表示し、画面が狭くなるとカードが自動的に折り返されるため、JavaScriptを使わずにレスポンシブなカード一覧を実装できます。

カードの最小幅やカード同士の間隔、余白、背景色、文字サイズなどはCSSから自由に変更できます。シンプルな構造なので、商品一覧や記事一覧、機能紹介など幅広いレイアウトのベースとして利用しやすいサンプルです。

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

デモ

カード1

画面幅に合わせて自動で折り返されます。

カード2

カードの幅を保ちながら横並びになります。

カード3

画面が狭くなると自動的に次の行へ移動します。

カード4

HTMLとCSSだけで実装できます。

カード5

商品一覧や記事一覧などに利用できます。

カード6

JavaScriptは使用していません。

ブラウザの横幅を変更すると、カードが画面幅に合わせて自動的に折り返される様子を確認できます。

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

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

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

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

  <!-- ページタイトル -->
  <title>画面幅に合わせてカードUIを自動で折り返す方法</title>

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

</head>
<body>

  <!-- カード一覧 -->
  <div class="responsive-card-ui_wrap">

    <!-- カード1 -->
    <article class="responsive-card-ui_card">
      <h3>カード1</h3>
      <p>画面幅に合わせて自動で折り返されます。</p>
    </article>

    <!-- カード2 -->
    <article class="responsive-card-ui_card">
      <h3>カード2</h3>
      <p>カードの幅を保ちながら横並びになります。</p>
    </article>

    <!-- カード3 -->
    <article class="responsive-card-ui_card">
      <h3>カード3</h3>
      <p>画面が狭くなると自動的に次の行へ移動します。</p>
    </article>

    <!-- カード4 -->
    <article class="responsive-card-ui_card">
      <h3>カード4</h3>
      <p>HTMLとCSSだけで実装できます。</p>
    </article>

    <!-- カード5 -->
    <article class="responsive-card-ui_card">
      <h3>カード5</h3>
      <p>商品一覧や記事一覧などに利用できます。</p>
    </article>

    <!-- カード6 -->
    <article class="responsive-card-ui_card">
      <h3>カード6</h3>
      <p>JavaScriptは使用していません。</p>
    </article>

  </div>

</body>
</html>

ファイル構成と設置方法

このサンプルはHTMLファイルとCSSファイルの2つで構成されています。HTMLファイルではカードの構造を記述し、CSSファイルではCSS Gridを利用したレイアウトを設定しています。カードは画面幅に合わせて自動的に折り返されるため、パソコン・タブレット・スマートフォンなど異なる画面サイズでも見やすく表示できます。JavaScriptは使用していないため、そのままブラウザで利用できます。 

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

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

コメント