CSSで水平スクロールを実装する

Horizontal Scroll
  • box1
  • box2
  • box3
  • box4
    ポイントは次のとおり。
  • - ulおよびliを使ってリスト構造を表現する
  • - ulに対してoverflow-x: auto;
  • white-space: nowrap;を指定
  • - liに対して、display: inline-block;を指定
  • - liに対してwidth: 90%;のような横幅を指定すると、コンテンツが見切れて見えるhorizontalになる
    横スクロールできることがuserに伝わりやすい

qiita.com