CSSでシンプルに水平スクロール（横スクロール）のリストを作る #CSS

横スクロールのUI

個々最近、カード型のコンテンツが横に並んでいてスクロールできるUIをよく見かけるようになりました。
例えばAirbnbのWebサイトではこんな感じ。

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

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

ソースコードはこんな感じ。

horizontal-scroll.html

<!DOCTYPE html>
<html>
<head>
  <title>Horizontal Scroll</title>
  <style>
    .horizontal-list {
      overflow-x: auto;
      white-space: nowrap;
      -webkit-overflow-scrolling: touch;
    }

    .item {
      /* 横スクロール用 */
      display: inline-block;
      width: 90%;

      /* 見た目調整 */
      height: 400px;
      margin: 16px;
      font-size: 48px;
      background: rgba(255, 0, 0, 0.4);
    }

  </style>
</head>
<body>
  <ul class="horizontal-list">
    <li class="item">
      <div>コンテンツ1</div>
    </li>
    <li class="item">
      <div>コンテンツ2</div>
    </li>
    <li class="item">
      <div>コンテンツ3</div>
    </li>
    <li class="item">
      <div>コンテンツ4</div>
    </li>
  </ul>
</body>
</html>

画面はこんな感じになります。チープですみません。