モバイルファースト時代は横スクロール。css一行で実装する方法。

世はモバイルファースト時代です。
PCでスマホの画面の開発をするというなんとも不思議な時代です。
そしてスマホ世代にとってスクロールは「面倒」なもの。
そこで出てくるのが「横スクロール」です。

一行で終わる？

一行で終わると書いていますが、ものによります。基本はこれをスクロールしたい領域に着けるだけ。

　　overflow-x: scroll;

ただ、いくつかの要素は画面の端に達すると自動で改行してくれるようになっています。
それを改行しないようにしたいので、要素によってはこの一行も追加します。

    white-space: pre-wrap;

後は高さを指定したりスクロールする要素を並べるだけ。
以下がその例。

See the Pen x-scroll by blue (@aoiBlue) on CodePen.0

綺麗にレイアウトしてみる。

横スクロールデザインを色々綺麗にして以下のようにしてみた。

See the Pen x scroll by blue (@aoiBlue) on CodePen.0

こうすると、甘いものが好きなユーザーは横スクロールすれば詳細を見れるし、
甘いものが好きではないユーザーは縦にスクロールを少しだけすれば次の要素に行くことができる。

ページ上部へ飛ぶウィジェットを実装するといった記事も書きましたが、
スクロール上下が長くなると不便に感じるユーザーは多いです。
それがページの離脱につながることも少なくないので、スクロールは極力少なくするか、
横スクロールを織り交ぜたり、上部へ飛ぶウィジェット等を用意してユーザーの指の上下移動を減らしてあげましょう。

スクロール自体をしない？

そもそも縦スクロールが廃れつつある背景には、
SNS等で動画共有が一般的になっていることも挙げられると思います。
実際、字を目で追っていくより、動画で勝手に流れて行った方が見ている側は楽だし、視覚的にわかりやすい。
コンテンツが長くなる場合は、横スクロールに限らずいろいろと見せ方を工夫していく必要があるかもしれません。