Blogブログ

TORAT | 2020.2.18

CSSだけでスマホの横スクロールを実装する

css
コピペ

ブログなどで関連記事を並べて表示したり、動画コンテンツを一覧表示する際などに、タイル状に並べるのも見やすくて良いんですが、記事の投稿数が増えてきたり、テキスト量が多いときなど、場合によっては横スクロールするようにすると便利だったりします。

タイル状に並べて表示

横スクロールできるように表示

CSSだけでスマホの横スクロールを実装

今回はリスト構造を使用して、実装する方法をご紹介します。

ソースコードの記述実例はこちらです。

html

<body>
  <ul class="scroll_list">
    <li class="list1"><img src="img/image1.jpg" alt="image1"></li>
    <li class="list2"><img src="img/image2.jpg" alt="image2"></li>
    <li class="list3"><img src="img/image3.jpg" alt="image3"></li>
  </ul>
</body>

css

@media screen and (max-width: 480px){
.scroll_list{
  margin: 0 auto;
  padding: 0;
  width: 90%;  /* コンテンツが見切れて見えるようにする */
  overflow-x: auto;  /* 横スクロールの指定 */
  white-space: nowrap;  /* 横スクロールの指定 */
  overflow-scrolling: touch;  /* スクロールを滑らかにする */
  -webkit-overflow-scrolling: touch;  /* スクロールを滑らかにする */
}
.scroll_list li{
  display: inline-block;  /* 横並びにする指定 */
  list-style: none;
  height: 450px;  /* 横スクロールする範囲の高さを指定 */
}
.list1{
  margin-left: 0;
}
.list2, .list3{
  margin-left: 30px;
}
}