画面幅に合わせてカードを自動で折り返す方法
画面幅に合わせてカードを自動で折り返す方法を紹介します。このサンプルでは、複数のカードを横方向に並べ、表示できる横幅が狭くなるとカードが自動的に次の行へ移動するレイアウトを作成します。PC・タブレット・スマートフォンなど、異なる画面幅でもカードを見やすく配置できます。
商品一覧、記事一覧、カテゴリー一覧、サービス紹介など、複数のカードを並べて表示したい場面に利用できます。画面が広い場合は複数のカードを横並びにし、画面が狭くなると表示できる枚数に合わせて自動的に折り返されるため、デバイスごとにカードの列数を個別指定しなくてもレイアウトを調整できます。
HTMLではカードのタイトルや説明文を変更でき、カードを追加することで表示件数を増やせます。CSSではCSS Gridのrepeat()、auto-fit、minmax()を使用して、カードの最小幅を保ちながら画面幅に応じて列数が自動調整されるようにします。JavaScriptを使用せず、HTMLとCSSだけで実装できるシンプルなカード一覧のサンプルです。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
画面幅に合わせて自動で折り返されます。
カードの幅を保ちながら横並びになります。
画面が狭くなると自動的に次の行へ移動します。
HTMLとCSSだけで実装できます。
商品一覧や記事一覧などに利用できます。
JavaScriptは使用していません。
ブラウザの横幅を変更すると、カードが画面幅に合わせて自動的に折り返される様子を確認できます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>画面幅に合わせてカードを自動で折り返す方法</title>
<!-- CSSファイル -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- カード一覧 -->
<div class="responsive-card-ui_wrap">
<!-- カード1 -->
<article class="responsive-card-ui_card">
<!-- カード番号 -->
<div class="responsive-card-ui_number">01</div>
<!-- カードタイトル -->
<div class="responsive-card-ui_title">
カード1
</div>
<!-- カード説明文 -->
<p class="responsive-card-ui_text">
画面幅に合わせて自動で折り返されます。
</p>
</article>
<!-- カード2 -->
<article class="responsive-card-ui_card">
<!-- カード番号 -->
<div class="responsive-card-ui_number">02</div>
<!-- カードタイトル -->
<div class="responsive-card-ui_title">
カード2
</div>
<!-- カード説明文 -->
<p class="responsive-card-ui_text">
カードの幅を保ちながら横並びになります。
</p>
</article>
<!-- カード3 -->
<article class="responsive-card-ui_card">
<!-- カード番号 -->
<div class="responsive-card-ui_number">03</div>
<!-- カードタイトル -->
<div class="responsive-card-ui_title">
カード3
</div>
<!-- カード説明文 -->
<p class="responsive-card-ui_text">
画面が狭くなると自動的に次の行へ移動します。
</p>
</article>
<!-- カード4 -->
<article class="responsive-card-ui_card">
<!-- カード番号 -->
<div class="responsive-card-ui_number">04</div>
<!-- カードタイトル -->
<div class="responsive-card-ui_title">
カード4
</div>
<!-- カード説明文 -->
<p class="responsive-card-ui_text">
HTMLとCSSだけで実装できます。
</p>
</article>
<!-- カード5 -->
<article class="responsive-card-ui_card">
<!-- カード番号 -->
<div class="responsive-card-ui_number">05</div>
<!-- カードタイトル -->
<div class="responsive-card-ui_title">
カード5
</div>
<!-- カード説明文 -->
<p class="responsive-card-ui_text">
商品一覧や記事一覧などに利用できます。
</p>
</article>
<!-- カード6 -->
<article class="responsive-card-ui_card">
<!-- カード番号 -->
<div class="responsive-card-ui_number">06</div>
<!-- カードタイトル -->
<div class="responsive-card-ui_title">
カード6
</div>
<!-- カード説明文 -->
<p class="responsive-card-ui_text">
JavaScriptは使用していません。
</p>
</article>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
このサンプルはHTMLファイルとCSSファイルの2つで構成されています。HTMLファイルではカードの構造を記述し、CSSファイルではCSS Gridを利用したレイアウトを設定しています。カードは画面幅に合わせて自動的に折り返されるため、パソコン・タブレット・スマートフォンなど異なる画面サイズでも見やすく表示できます。JavaScriptは使用していないため、そのままブラウザで利用できます。
sample/
├── index.html
└── style.css
ファイルを配置したらsample/index.htmlをブラウザで開くだけで動作します。カードのタイトルや説明文はindex.htmlから変更でき、カードの最小幅、カード同士の間隔、余白、背景色、枠線などのデザインはstyle.cssから自由にカスタマイズできます。
コメント