横スクロールできるカード一覧を作る方法
横スクロールできるカード一覧を作る方法を紹介します。このサンプルでは、複数のカードを横方向に並べ、表示エリアの横幅に収まらないカードを横スクロールして確認できるレイアウトを作成します。カードを次の行へ折り返さず横並びの状態を維持するため、複数の情報を一列にまとめて表示できます。
商品一覧、関連記事、おすすめコンテンツ、サービス紹介、カテゴリー一覧など、複数のカードを横方向へ続けて見せたい場面に利用できます。PCとスマートフォンのどちらでもカードを横並びにし、表示エリアからはみ出した部分は横スクロールで確認できるため、カードの並び方を維持したまま画面幅の異なる環境へ対応できます。
HTMLではカードタイトルや説明文を変更でき、カードを追加することで表示件数を増やせます。CSSではカードの横幅、カード同士の間隔、余白、枠線、角丸、背景色、文字サイズなどを調整できます。横並びにはFlexboxを使用し、横方向のスクロールにはoverflow-xを使用する、シンプルなカード一覧のサンプルです。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
横方向へスクロールして確認できるカード一覧のサンプルです。
カードを折り返さず、横並びの状態を維持して表示します。
表示エリアに収まらないカードは横スクロールで確認できます。
PCとスマートフォンのどちらでも横方向へスクロールできます。
カード一覧を左右へスクロールすると、横に並んだカードを確認できます。
コードをコピーして使おう！
<!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="horizontal-scroll-cards_area">
<!-- カード一覧 -->
<div class="horizontal-scroll-cards_list">
<!-- カード1 -->
<article class="horizontal-scroll-cards_card">
<!-- カードタイトル -->
<div class="horizontal-scroll-cards_title">
カードタイトル1
</div>
<!-- カード説明文 -->
<p class="horizontal-scroll-cards_text">
横方向へスクロールして確認できるカード一覧のサンプルです。
</p>
</article>
<!-- カード2 -->
<article class="horizontal-scroll-cards_card">
<!-- カードタイトル -->
<div class="horizontal-scroll-cards_title">
カードタイトル2
</div>
<!-- カード説明文 -->
<p class="horizontal-scroll-cards_text">
カードを折り返さず、横並びの状態を維持して表示します。
</p>
</article>
<!-- カード3 -->
<article class="horizontal-scroll-cards_card">
<!-- カードタイトル -->
<div class="horizontal-scroll-cards_title">
カードタイトル3
</div>
<!-- カード説明文 -->
<p class="horizontal-scroll-cards_text">
表示エリアに収まらないカードは横スクロールで確認できます。
</p>
</article>
<!-- カード4 -->
<article class="horizontal-scroll-cards_card">
<!-- カードタイトル -->
<div class="horizontal-scroll-cards_title">
カードタイトル4
</div>
<!-- カード説明文 -->
<p class="horizontal-scroll-cards_text">
PCとスマートフォンのどちらでも横方向へスクロールできます。
</p>
</article>
</div>
</div>
</body>
</html>ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLでは4枚のカードを一覧として配置し、CSSではFlexboxを使用してカードを横一列に並べています。カードを次の行へ折り返さず、表示エリアに収まらない部分へoverflow-x:auto;を指定することで、PC・タブレット・スマートフォンで横スクロールできるカード一覧を作成します。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlは横スクロールするカード一覧の内容を構成するファイルです。サンプルでは4枚のカードを配置しており、それぞれのカードタイトルと説明文を変更できます。同じhorizontal-scroll-cards_cardのarticle要素を追加・削除することで、表示するカードの件数も変更できます。
style.cssはカード一覧の横並び、横スクロール、カードのサイズやデザインを設定するファイルです。display:flex;でカードを横方向へ並べ、flex-wrap:nowrap;で折り返しを防ぎます。横スクロールエリアにはoverflow-x:auto;を指定し、カード一覧にはwidth:max-content;を指定することで、表示領域を超えたカードを左右へスクロールして確認できるようにしています。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。index.htmlから同じ階層にあるstyle.cssを読み込む構成になっているため、2つのファイルを配置したあと、sample/index.htmlをブラウザで開くと横スクロールできるカード一覧を確認できます。
カード一覧が表示エリアの横幅を超えると、カードは次の行へ折り返さず横方向へ続きます。PCでは横スクロール操作、スマートフォンやタブレットでは左右のスワイプ操作によって、表示エリアからはみ出しているカードを確認できます。
カスタマイズできる内容
index.htmlでは各カードのタイトルと説明文を変更できます。カードを増やす場合は、既存の<article class="horizontal-scroll-cards_card">から</article>までを複製し、タイトルと説明文を書き換えます。不要なカードは対応するarticle要素を削除することで表示件数を減らせます。
style.cssでは横スクロールエリアの最大横幅、カード同士の間隔、カードの横幅、内側余白、枠線、角丸、背景色、影、タイトルと説明文の文字サイズ・文字色・行間などを変更できます。スマートフォンで使用するカードの横幅やカード同士の間隔も変更できます。
数値調整
style.css
padding:40px 0;
ページ全体の上下余白です。40pxを大きくするとカード一覧の上下に広い余白ができ、小さくすると余白が狭くなります。
max-width:1000px;
横スクロールエリアの最大横幅です。値を大きくすると一度に表示できる範囲が広くなり、小さくすると横スクロールが発生しやすくなります。
gap:20px;
カード同士の間隔です。値を大きくするとカード同士が離れ、小さくすると間隔が狭くなります。
padding:10px 20px 24px;
カード一覧の内側余白です。10pxは上、20pxは左右、24pxは下の余白を表します。値を変更するとカード一覧と表示エリア端との間隔が変わります。
width:280px;
PC・タブレットでのカードの横幅です。値を大きくすると1枚のカードが横に広がり、小さくするとコンパクトになります。
flex:0 0 280px;
カードを280pxの幅で配置し、横幅が不足しても縮小しないようにする指定です。カードの基本横幅を変更する場合は、width:280px;と合わせて値を変更します。
padding:24px;
カードの内側余白です。値を大きくするとカードの端とタイトル・説明文との間隔が広がり、小さくすると詰まった表示になります。
border:1px solid #e5e7eb;
カードの枠線です。1pxを大きくすると枠線が太くなり、小さくすると細くなります。
border-radius:12px;
カードの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
box-shadow:0 8px 20px rgba(15,23,42,.08);
カードの影です。8pxや20pxを変更すると、影の位置やぼかし具合を調整できます。
margin:0 0 12px;
カードタイトルの下側余白です。12pxを大きくするとタイトルと説明文の間隔が広がり、小さくすると狭くなります。
font-size:20px;
カードタイトルの文字サイズです。値を大きくするとタイトルが大きくなり、小さくすると小さくなります。
line-height:1.5;
カードタイトルの行間です。タイトルが複数行になった場合の行と行の間隔を調整できます。
font-size:16px;
カード説明文の文字サイズです。値を大きくすると説明文が大きくなり、小さくすると小さくなります。
line-height:1.8;
カード説明文の行間です。値を大きくすると行間が広がり、小さくすると詰まった表示になります。
@media (max-width:640px)
スマートフォン向けの表示へ切り替える基準です。画面幅640px以下になると、カード同士の間隔、一覧の余白、カードの横幅を変更します。
gap:16px;
画面幅640px以下でのカード同士の間隔です。値を大きくすると間隔が広がり、小さくするとカード同士が近くなります。
padding:10px 18px 20px;
画面幅640px以下でのカード一覧の内側余白です。10pxは上、18pxは左右、20pxは下の余白を表します。
width:260px;
画面幅640px以下でのカードの横幅です。値を大きくするとスマートフォンでカードが横に広がり、小さくすると一度に見える次のカードの範囲が広くなります。
flex-basis:260px;
画面幅640px以下でカードの基準となる横幅を260pxへ変更します。スマートフォンでカードの横幅を変更する場合は、width:260px;と合わせて値を変更します。
レスポンシブ対応
このサンプルはstyle.cssでレスポンシブ対応しています。横スクロールエリアにはwidth:100%とmax-width:1000pxを指定し、利用できる画面幅に合わせて表示領域が縮小する構成です。カードはflex-wrap:nowrap;によって折り返さず、overflow-x:auto;によって画面内に収まらない部分を横スクロールできるため、画面幅が狭くなっても横並びを維持します。
また、画面幅640px以下では@media (max-width:640px)を使用し、カードの横幅を280pxから260px、カード同士の間隔を20pxから16px、一覧の左右余白を20pxから18pxへ変更しています。PC・タブレット・スマートフォンのいずれでもカードを横一列に表示し、収まらないカードを左右へスクロールして確認できます。
コメント