コピペでできる画面崩れせずhtmlとcssで横スクロールする方法

シリーズ物など横に並べる物がいっぱいある時にパソコンだと横幅が長いから並べることができますがスマホでは無理ですよね。

画面崩れせずに横に並べる方法がありコピペでできるのでやり方の解説をします。

デモは↓になります。

Contents

コードの解説

コードを↓にします。

横に並べたい内容を「liタグ」で書きます。

必要なのは20行目、38行目、39行目だけで他は調節であるだけです。

20行目はスクロールしたい内容を横並びにするためです。

liはブロック要素なので<ul class=”horizontal”>に「display:flex;」を使えばうまくいきそうですがうまくいきませんでした。

38行目にoverflowプロパティがありますが今回はoverflow-xです。

値にvisible、auto、scroll、hiddenがありますが「auto」にすると横にスクロールできるようになります。

その際にスクロールバーもつきます。

値についてはこのサイトで詳しく説明していますのでそれを見てください。

39行目で折り返しがなくなります。(折り返しにすると画面がスクロールできなくなります)

white-spaceプロパティも色々あるので詳しく知りたい方はこのサイトを見てください。

場合によってはスクロールバーを無くしたい時もあるはずです。

手軽にやる方法と手軽にできない方法があり手軽にできない方法はこのサイトで解説していますがやってみて私はダメでした。

気軽にやる方法はいつ使えなくなるかが分かりません。

コードを↓にします。(サイトを見る端末でcssがほんの少し変わります)

これで↓になります。

サイト閲覧者は画面を横スクロールするのに慣れていないから横スクロールに気が付きにくいです。(私が初めて見た時はビックリしました)

↓だと緑が少し出ているので画面を横スクロールできると気がつきますが横に並べる内容が画面にピッタリ収まるとサイト閲覧者が気が付かないので少し見切れる（緑色の部分を少し出して横スクロールに気がつくようにする）ようにした方がいいです。

●いいねをつけてもらえると励みになります。