実務経験43日目、画面の横スクロールを実装するのは超簡単

画面の横スクロールの実装方法を解説

例えば↓みたいな1000px以上の横長の画像を並べる時にスマホで横に並べるのは不可能です。

iphone8やSE2の画面が一番小さいですが370px位です。

 

こういう時は画像を数枚に切り分けて横スクロールできるようにすればいいです、↓のコードを使います。

実装に必要なプロパティの横に「横にスライドするのに必要」とコメントしてます。

横に並べたい物を「li」で並べるから画像が2枚以上必要です、だから1枚の画像だけで横スクロールすることはできません。

試しに1枚でやってみたらダメでした。

実装した結果が↓のページの一番下にあります。

https://kyohayata.github.io/blume-ora/

 

画面横スクロールの欠点

実装して思ったのは↓みたいに画面右が見切れている場合はサイト閲覧者が「あっ横スクロールだ」って気がつくかもしれません。

 

でも画面が見切れてない場合はサイト閲覧者が気がつかないかもしれません。

特に一番下に横スクロールがある場合はスクロールに気がつくようにスクロール下に余白を付けないといけないと思いました。

 

cssだけで作れてすごく簡単なので横に長い画像を横スクロールしたい時に使ってみてはどうでしょうか？

シリーズ物のLPだといくつかの商品を横並びしないといけないのでそんな時に役立ちます。