向壁虚造

WEBサイト作成のためのプログラミング備忘録

横スクロールをCSSで実装する方法とは

【スマホ対応】CSSで横スクロールするリスト&テーブルを実装する方法

複数の商品や投稿の一覧を掲載する時「横スクロール」を導入することで、スマホやタブレットのような小さな画面でもコンパクトに収まります。

例えば下図のように、画像とテキストがセットになった複数のアイテムでも、スクロールまたはフリックで切り替えることができます。

CSSで作る横スクロールの実例

(※画像に多少の乱れがありますが、実際の表示に問題はありません)

どんなにアイテム数が多くても、ページ内の一行分のスペースを確保するだけで済みます。

今回はこのように、複数の要素(商品・投稿)を一行に並べて、横スクロールを付け加えるテクニックをご紹介します。

HTML&CSSのみで完結するため、初心者でも簡単に実装できますよ。

1.CSSで複数の要素を横スクロールで見せる方法

はじめに、CSSで横スクロールを実装するための基本的なテクニックを解説します。

出来合いのデザインをコピペで実装したい方は、次章からご覧になると良いでしょう。

横スクロールを実装するまでの大きな流れは以下の通りです。

  1. 複数のアイテムを横(一行)に並べる
  2. 親要素に横スクロールを適用する
  3. スクロールバーのデザイン調整

まず、複数のアイテムを横に並べるには、いくつかの方法があります。

例えばfloatinline-blockなどが有名ですが、今回のケースではFlexboxが便利です。

Flexboxでアイテムを横並びにするには、以下のHTMLのように、複数のアイテムを親要素(ボックス)で囲んでおく必要があります。

次に、CSSでは親要素のdisplayflexに変更してください。

たった、これだけのコードでアイテムを水平に並べることができます。

とても簡単ですよね。

ちなみに、各アイテムの横幅にはボックス全体の70~90%の値を指定(6行目)すると良いでしょう。

隣のアイテムが少しだけ見切れるため、ボックス内に他のアイテムも含まれていることをユーザーに暗示できます。

各アイテムの横幅は全体の横幅よりも少しだけ小さくしよう

アイテム同士の間隔(余白)はmarginで調整(7行目)してください。

次に、親要素にスクロールバーを追加しましょう。

先ほどのCSSに、以下の4行を追加します。

overflowプロパティにscrollを指定(5行目)することで、ブロック要素にスクロールバーを追加できます。

今回は、水平方向(X軸)のスクロールのみ欲しいため、overflow-xプロパティで対応します。

11行目のflex-shrinkプロパティは、本来、各アイテムを縮小させる度合いを指定するものです。

しかし、横スクロールを実装する場合には縮ませる必要はないため0と入力しておきましょう。

下図のように、ボックス下部に横スクロールが表示されれば成功です。

overflow-xにscrollを指定することで横スクロールを実装できる

しかし、デフォルトのスクロールバーのデザインはやや無骨な印象があります。

スクロールバーのデザインを変更したい場合は、CSSの疑似要素::-webkit-scrollbarを使用すると良いでしょう。

ただし、適用できるのは文字通りwebkit系のブラウザ(safari・chrome等)のみです。

今回は、以下のようにカスタマイズしてみました。

-webkit-scrollbarプロパティでスクロールバーのデザイン調整

CSSに以下のコードを追加してください。

スクロールバーのデザインを調整するテクニックは以下のページにて解説しているので、詳しく知りたい方はどうぞ。

CSSでスクロールバーをお洒落にデザインする方法

2.CSSでリストを横スクロールさせるには?

横スクロール型のコンテンツと言っても、基本的に投稿や商品の一覧(リスト)として使用するケースがほとんどです。

また、各リストには画像やテキストを入れて、視認性や訴求力を確保したいところですよね。

そこで今度は、サムネイルタイトルディスクリプションがセットになっているアイテムを横スクロールで一覧化してみましょう。

横スクロールでリストを切り替える

また、レスポンシブ対応を考慮し、タブレット以上の画面では枠内に2つ分のアイテムを、スマホ以下の画面では枠内に1つ分のアイテムを常時、表示するよう試みます。

横スクロール型リストをレスポンシブ可

まず、HTMLを確認してください。

li内に画像リンク(サムネ)とタイトル、ディスクリプションを挿入できるよう構成しました。

後ほど横スクロールを実装するため、さらにリストを追加してもページ内の紙幅が割かれる心配はありません。

また、ディスクリプションの段落(p)も増減可能ですが、その分、リスト全体の高さに影響が出ます。

では、今度はCSSを見てみましょう。

基本的なテクニックは前章で解説した内容と同じです。

親要素である.scroll_contentに対してFlexboxを適用(2行目)し、各リストを横並びにしています。

リスト全体の横幅は、ページのレイアウトに合わせて上限値を調整(3行目)してください。

marginautoを指定(4行目)しているので、ブラウザ画面が上限値を超えるとページ中央に配置されます。

また、各リストの横幅は90%にし(9行目)、隣のリストがやや見切れるように設定します。

%で指定しておけば、親要素(.scroll_content)の横幅が変わってもレイアウトは狂いません。

一方、画像の横幅は各リストいっぱいに広がるよう100%に(17行目)。

また、画像の高さが過剰に拡大してしまう場合は、max-heightで上限を設ける(18行目)と良いでしょう。

サイズ調整による画像の縦横比の崩れは、object-fitプロパティで対処(19行目)できます。

object-fitの値としてcoverを指定すると、表示範囲に埋まるようにリサイズされ、ハミ出た部分はトリミングされます。

(※object-fitプロパティは主要ブラウザで対応が進められていますが、IEでは未対応です。)

スクロールバーのデザインに関しては22行目以降の値を調整してみてください。

最後に、レスポンシブ対応としてメディアクエリ(37行目)を追記しておきましょう。

各リストの横幅を90%⇒45%に変更(40行目)します。

一度に複数リストを表示するには?

こうすることで、ボックス内に2つ分のアイテムを表示できます。

一度に表示するアイテム数をもっと増やしたい場合は、「各リストの横幅×アイテム数=100%以下」になるよう調整してみてください。

3.CSSでテーブルを横スクロールさせるには?

データをまとめ、ユーザーに伝えるのに役立つテーブルですが、何かと横長になってしまうのが悩みの種です。

例えば下図のように、横長のテーブルを小さな画面で閲覧した時、各セルが縮小し過ぎてしまったり。

小さな画面で見た時のテーブルの挙動

あるいは横幅に上限を設けてみたものの表示範囲からハミ出てしまい、十分な情報をユーザーに提供できない…なんてことも。

このように豊富なデータ量を持つテーブルを任意の範囲内にすっきり収納つつ、可読性を確保したい時にも横スクロールは有効です。

横スクロールを実装したテーブル

と言っても、ここまで紹介してきたテクニックに比べると、非常にシンプルなコーディングで処理できます。

まず、HTMLから確認してみましょう。

上記のようにテーブルタグをブロック要素で囲みます。

CSSは以下の通りです。

テーブルタグを囲む親要素に対してoverflowプロパティを適用(3行目)するだけですね。

横幅の上限(2行目)はページのレイアウトに合わせて調整してください。

また、親要素の横幅に合わせてテーブルが縮まないよう、white-space: nowrapを指定(7行目)しておくの忘れずに。

まとめ

  • 商品や投稿の一覧をコンパクトに表示するなら「横スクロール」がおすすめ
  • CSSで横スクロールを実装するには、一覧化したいアイテムを親要素で囲もう
  • アイテムを横並べするにはFlexboxが便利
  • overflow-xプロパティにallまたはscrollを指定することで、横スクロールを実装できる