PCの時は画面内に横並びでモバイルの時は画面外からスワイプして横スクロール

最近のホームページでも、またはアプリケーションでも時々見かけますが、スマホで見る際に要素が画面外にまで伸びてて、スワイプするとその要素を画面内に横スクロールでするりと表示させるようなもの（表現がわかりにくいですね。ごめんなさい）のご紹介になります。

以前の記事（スマホサイトのナビゲーションに横スクロールを採用しては？）の改良版といいますか、PCの時は折り返しができて、スマホになると横並びでスクロールできるので、無駄なスペースを省き、UIの改善にもつながるのではないでしょうか？

完成イメージ

例えば画像付きのリスト表示をしたい際に、その数が多い場合、PCではいい感じに表示されるのに、スマホの場合だと多すぎるというか、縦に伸びすぎてしまって、それはそれでユーザーにストレスを与えてしまいかねません。そこでスマホの場合はある程度要素の幅を持たせながら、少し画面外に次の要素を見切れるように設置することで、ユーザーにスワイプしたら次の要素が表示できるんだと暗に示し、それでいてコンパクトに収まるような仕組みです。

実装方法

親要素にflexを使って横並びにし、PCなどの場合のみflex-wrap:wrapで折り返しを可能にします。-webkit-overflow-scrolling: touch（画面外からのスクロールにぬるっと動かすための指示）はもう不要なので（iPhoneのSafariがデフォルトでぬるっと動くようになりました。）入れなくて結構です。

子要素にPCの時に指定したい幅を指定します。

スマホ幅になったら親要素に折り返しを禁止します。（flex-wrap:no-wrap)同時にX軸のはみ出た部分にスクロールを可能にします。（overflow-x:scroll）

子要素にmin-widthを追加して、次の要素が見切れるようにします。

<div class="wrapper">
    <div class="youso">
    1
    </div>
    <div class="youso">
    2
    </div>
    <div class="youso">
    3
    </div>
    <div class="youso">
    4
    </div>
    <div class="youso">
    5
    </div>
    <div class="youso">
    6
    </div>
    <div class="youso">
    7
    </div>
    <div class="youso">
    8
    </div>
    <div class="youso">
    9
    </div>
    <div class="youso">
    10
    </div>
</div>

.wrapper{
display: -webkit-box;
display: flex;
}
.youso{
width:20%;
padding:5vw;
display: -webkit-box;
display: flex;
align-items: center;
justify-content: center;
}
@media screen and (min-width: 600px){
.wrapper{
flex-wrap: wrap;
}
}
@media screen and (max-width:599px){
.wrapper{
flex-wrap: nowrap;
overflow-x: scroll;
}
.youso{
width:100%;
min-width:60%;
}
}

 

完成デモ

デモがありますのでそちらご覧ください。

実装例

Bino佐賀武雄様サイトトップページのLINE UP部分にこの応用を利用しています。