CSS、横スクロールをflexで作成。

水平方向にスクロールさせたい。

こんにちは、「ふ」です。
今回は⬆︎のような、横向きにスクロールする仕組みを作っていきましょう。

今回ポイントとなるプロパティは２つ。

・display : flexで子要素を横並びに。
・はみ出した部分をスクロール仕様にする、overflowプロパティ。

親要素のコンテナに対して子要素を横並びに配置し、はみ出した部分をスクロールで表示させる仕様にしていきます。
この横スクロールは実装する場面が多々あります。内容を理解しながらマスターしていきましょう。

子要素をflexで横並びに。

それでは実装していきます。
はじめに親子要素を配置してみましょう。

<div class = "soto">
    <div class = "naka">
        <img src = "elm1.svg">    
    </div>
    <div class = "naka">
        <img src = "elm2.svg">    
    </div>
    <div class = "naka">
        <img src = "elm3.svg">    
    </div>
</div>

親要素のclass名を「soto」とし、その中に子要素「.naka」を３つ配置します。
様子が観察しやすいように、子要素の中には画像を１つづつ入れておきました。

.soto {
    width:60%;
    border:solid 1px;
}
.naka {
    width:60%;
}

親要素「.soto」のwidthを60%とし、1pxのborder(枠線)をつけています。親コンテナの範囲を観察しやすくするためです。
子要素「.naka」の幅は親要素に対して60%の大きさに指定しました。子要素は３つあるので、横並びにすると親要素のコンテナからはみ出すことになります。

このようにスクロールコンテナを作成するためには、スクロール方向に対して親/子の大きさを明確に指定する必要があります。
今回は横方向なので、それぞれのwidthを決めておきました。

現在の状態⬆︎です。まだ子要素は縦方向に配置されていますね。
ここからdisplay : flexを使い、子要素を横並びにしましょう。

CSSのdisplayプロパティ。
初期値（何も指定しないバヤイ）は「block」で、内部にある子要素は上から縦方向に配置されていきます。値を「flex」とすると、子要素が左から横方向に並べられていきます。

.soto {
    width:60%;
    border:solid 1px;
    「「１display:flex;」」
}

親要素に対して「display:flex」を追記しました。

display:flexにより、子要素が横並びに配置されました。
が................

ちっちゃくなった。

子要素は１つあたりのwidthが60%なので、３つ並べると親要素からはみ出して表示されるはず。しかし実際には子要素が縮小されて、親要素内部にすっぽり収められてしまいました。
これでは「はみ出し」が実現できません。

display:flexは子要素を水平方向に配置すると同時に、親要素に子要素が全て収まるように縮小させてしまうという性質を持っているのです。
ここは子要素にmin-widthプロパティを指定して、60%の幅をキープできるようにしましょう。

.naka {
    「「１min-width:60%;」」
}

ただの「width」から「min-width」に指定を書き換えました。
min-widthプロパティは、画面幅の変更など、外的影響があったとしても「指定した値より小さくなることはない」ようにするものです。
この指定によりflexによる縮小処理があったとしても、１つあたり60%のwidthを維持することができます。

画像が縮小されることなく、親要素からはみ出させることができました。

overflow-x:scroll。

flexによる横並びはできました。
しかし現在、はみだし部分が表示されてしまっています。overflowプロパティを使い、はみ出し部分をスクロール仕様にしていきましょう。

overflowプロパティは親要素から子要素がはみ出している場合「その部分をどのように扱うか」を指定するものです。
初期値は「visible（表示させる）」となっており、現在はみ出し部分が見えてしまっているのはそのためです。
これを「scroll(スクロールさせて表示させる)」に指定しましょう。

.soto {
    width:60%;
    border:solid 1px;
    display:flex;
    「「１overflow-x:scroll;」」
}

overflowプロパティには「overflow（水平/垂直方向のはみ出し処理）」のほかに、

・overflow-x（水平方向のはみ出し）
・overflow-y(垂直方向のはみ出し)

という、方向に特化したプロパティも用意されています。
今回は横スクロールなので、overflow-xを使ってみました。

横スクロール、完成。

はみ出し部分が水平方向のスクロールによって表示されるようになりました。
これで完成です。おつかれさまでした！

「スクロールできます」感も大事。

ここまでCSSの横スクロールについて紹介してきましたが、ここで実装にあたっての注意点についてお話ししておきます。
通常、ユーザは縦方向のスクロールを前提としてページを閲覧していきます。 ですからあえて次の子要素を少し表示させ「横スクロールできる感」をアピールする必要があります。

⬆︎をみてください。
ここには３つの子要素が入っており、横スクロールで画像が表示されるようになっています。しかしながら１つ目の子要素が親要素にきっちりと収まっているため、ぱっと見は横スクロールができるような印象を与えません。
そのためユーザはそのまま縦にスクロールさせ、下にある内容を見に行ってしまうでしょう。

そこで、隣の子要素を部分的に見せておくようにします。
それによりユーザに「横にスクロールできそう」という思わせることができるのです。

実際の場面ではこのようにユーザに対しての「見せ方」についても配慮するようにしましょうね。

最後までお読みくださり、ありがとうございました。
ではまた〜 🎵