WEBサイト制作

ショッピングサイト制作

システム開発

コンテンツ制作

TORATについて

制作の流れ

プライバシーポリシー

お問い合わせは
こちらから

TOP

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

2020年02月18日

投稿者: TORAT

スマホで横にスクロールしている様子

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

タイル状に並べて表示

タイル状のスマホ画面

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

scroll

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;
}
}

ソースコードの解説

width:90%;を指定

横幅を width:100%; と指定をすると、コンテンツが画面いっぱいの状態でスクロールして見えるので、 width:90%; に指定してコンテンツが見切れて見えるようにしています。

overflow-x: auto;を指定

overflow-x はボックスの範囲内に収まらないコンテンツを水平方向に表示します。 また同様に、ボックスの範囲内に収まらないコンテンツを垂直方向に表示したいときは overflow-y を指定します。

white-space: nowrap;を指定

white-space: nowrap; ではみ出たコンテンツを折り返さないように横並びに指定しています。

スクロールの指定

overflow-scrolling: touch;-webkit-overflow-scrolling: touch; でスクロールを滑らかにする指定をしています。

最後に

Javascriptなどを導入せず、CSSだけで簡単に指定できます。

アイデア次第でいろいろなページに使えて、場合によっては見てもらいやすくなりますので、ぜひお試しくださいね。

この記事の投稿者

管理者

TORAT

スマートフォンページ幅対策

2011年11月22日 TORAT

なぜできた?画像の下にできてしまった隙間を無くすCSS

2019年12月25日 TORAT

2020年5月6日 ヨッシー

cssレイアウト崩れの原因 — バグ回避方法 —

2010年5月7日 TORAT

ブログ一覧へ

書いた人

WRITERS