【CSS】特定の要素だけを横スクロールさせて表示する

2023年5月17日

スマホ表示の時は料金表とか横スクロールで表示させたいなぁ･･･

というわけで今回は特定の要素だけを横スクロールさせる方法について説明していきます！

特定の要素を横スクロールさせる方法

今回のケースは、ブログトップで動画を載せておりますが、スマホ表示の際は
横スクロールさせて、PC表示の時は全画面で表示させたいというケースでした。

この実装、実は普段良く使っているプロパティを使用します。

今回の実装で使用するのはこの「overflow」プロパティ。
よく、画像とかに「overflow:hidden;」とか使用してると思います。

今回は「overflow-x:scroll;」というプロパティを使用します。

まずはコードを見て行きましょう。
ページトップ動画の料金表コードになります。

.p-price__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: rem(15);
    margin-top: rem(25);
    overflow-x: scroll;
}

overflowプロパティ以外は普通のコードです。ブロックを並べる指定をしたもの。
クラス「p-price-cards」は料金表を大きく括ったクラスになります。
overflow-x: scroll;を無くすと以下の様な表示になります。

gridの指定通り、3枚を横1列に表示させる形ですね。
上記画像はPC表示のものですが、このままスマホ表示にすると料金表がインナーを突き破り
表示が大きく崩れてしまいます。

スクロールバーは閲覧環境によって表示が異なるようです。
実装の際は色々なブラウザで確認してみましょう！！

というわけで今回は特定の要素だけを横スクロールさせる方法についてお話しました！
レスポンシブとかで割と使うかもなので是非使えるようにしておきましょう！！

よかったらフォローしてね！！