スマホの横スクロールUIをCSSで実装する方法

スマホの横スクロールUIをCSSで実装する方法

スマホページで最近増えているのがフリックできる横スクロールです。リストで表示するより小スペースで一覧を表示できる便利なUIです。

楽天市場やYahooショッピングのページでも使われていて、自分でも同じような横スクロールを実装したいと考え作ってみました。

基本的なHTMLとCSSだけで作成できるので、コピペで簡単に実装することができます。

それでは具体的な方法を順を追って説明していきます。サクッとデモだけ確認したい方は目次より移動してください。

Advertisement

参考にした横スクロールUI

僕が参考にしたのは楽天市場のスマホページに載っている横スクロールです。

商品ページの下の方に「この商品を買った人はこれも」、「ショップの人気商品ランキング」といった横スクロールがあります。

楽天市場の横スクロール

今回はこれらの横スクロールデザインを参考に作っています。

実装する横スクロールのポイント

レスポンシブに対応

スマホとPCで表示方法を変えたレスポンシブ対応です。

スマホでは横スクロール、PCでは横一列で並びます。

Javascriptを不使用

HTMLと簡単なCSSだけで動作します。

お好みでCSSを使って装飾してください。

場所を取らない

スマホページをPCと同じボリュームで作ると縦に長くなりがちです。

その点、横スクロールはUIは小さいスペースに複数の要素を並べられるため、グリッドUIと比べると場所を取りません

横スクロールを実装する

それでは具体的な横スクロール実装方法について解説していきます。

HTML

横並びにする要素の親要素にclass=”horizontal_scroll”を付与する。

class名は任意の名前に変更可能です。HTMLとCSSのclass名を合わせるようにしてください。

また、サンプルではul、liを使用していますが、div、sectionなどでも代用可能です。

CSS

CSSで大事なのは以下の2点です。

  • display: flex;
  • overflow-x: scroll;

display: flex;で要素を横並び、overflow-x: scroll;で横スクロールできるようにしています。

-webkit-overflow-scrolling: touch;はiOSでの横スクロールを滑らかな惰性スクロールにする効果があります。

また、画面幅が768px以上の時はoverflow-x: inherit;を指定して横スクロールを解除します。

デモ

実際に実装したデモを用意しました。どうぞご確認ください。

 

See the Pen スマホで横スクロールUI(ランキング形式) by ざきひー (@zakihiii) on CodePen.0

おまけ:デモ用のデザインCSS

デモはランキング形式の横スクロールです。デザインの体裁を整えるため、順位と価格表記のCSSを追加しています。

まとめ

横スクロールUIはPCには不向きですが、小スペースで設置できるためスマホに最適な解の一つです。

また、ネットショップの関連商品やランキングの表示に使えば回遊性が高まり非常に効果的でもあります。

 

最後に楽天市場に横スクロールを設置するときの注意点、

楽天市場アプリでは横スクロールをフリックでうまく動かせません(特にAndroid版)

スマホの商品説明文には横スクロールを設置しないようにしましょう。代わりに商品またはカテゴリページの共通パーツに設置することを推奨します。

 

それでは今回はこのへんで。

CSSカテゴリの最新記事