カードを横スクロール表示するFlexboxの使い方
カードを横スクロール表示するFlexboxの使い方を紹介します。本記事では、HTMLとCSSを使って、複数のカードを横方向へスクロールできる一覧レイアウトを作成します。画面に収まりきらないカードでも、横へスクロールして閲覧できるようになります。
このサンプルコードでは、Flexboxと overflow-x:auto; を組み合わせて横スクロールを実現します。カードは横一列に並び、画面幅を超えた場合はスクロールして表示できるため、スマートフォンやタブレットでも使いやすいレイアウトになります。
横スクロールレイアウトは、商品一覧、おすすめ記事、新着記事、画像一覧、カテゴリー一覧など、多くのWebサイトで利用されています。カードを横に並べたまま表示したい場合に便利なFlexboxのテクニックです。
コードについて
本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
カードを横スクロール表示するFlexbox
カードが画面幅を超えると、横へスクロールして続きを表示できます。
カード1
カード2
カード3
カード4
カード5
カード6
display:flex; でカードを横並びにし、flex-wrap:nowrap; で折り返しを防ぎます。さらに
overflow-x:auto; を指定すると、画面に収まらないカードを横スクロールで表示できます。
コードをコピーして使おう！
<!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="horizontal-scroll-flexbox-card-layout_wrap">
<!-- タイトル -->
<h1 class="horizontal-scroll-flexbox-card-layout_title">
カードを横スクロール表示するFlexbox
</h1>
<!-- カード一覧 -->
<div class="horizontal-scroll-flexbox-card-layout_list">
<div class="horizontal-scroll-flexbox-card-layout_card">カード1</div>
<div class="horizontal-scroll-flexbox-card-layout_card">カード2</div>
<div class="horizontal-scroll-flexbox-card-layout_card">カード3</div>
<div class="horizontal-scroll-flexbox-card-layout_card">カード4</div>
<div class="horizontal-scroll-flexbox-card-layout_card">カード5</div>
<div class="horizontal-scroll-flexbox-card-layout_card">カード6</div>
</div>
</div>
</body>
</html>ファイル構成と設置方法
このサンプルでは、HTMLとCSSを別ファイルで管理します。HTMLにカード一覧を配置し、CSSでFlexboxを使って横スクロールできるレイアウトを作成します。
sample/
├── index.html
└── style.css
2つのファイルを同じフォルダへ配置し、ブラウザで index.html を開いてください。カードを横スクロール表示するには、カード一覧に display:flex;、flex-wrap:nowrap;、overflow-x:auto; を指定します。
コメント