CSS:横スクローーーーール!

〽️ SEO無視のタイトル。


TOP




一覧要素を横スクロールさせたい!

こんにちは。「ふ」です。

最近のwebページでよく見かける、商品一覧、記事一覧の部分だけ横にスクロールさせて閲覧できる機能、あれをCSSで実現させたいと思います。


使うのはこれ。


display:flex; overflow-x:scroll;


見慣れないプロパティかもしれません。ちょっと解説。




display:flex;

これはFlexboxというレイアウトモジュールを定義しています。直下の子要素をいろんなスタイルで配置できる便利なものですが、その詳細については長くなる(、というか「ふ」も詳しく把握していない)ので省略。。


ただこのFlexboxを定義してやると、初期値では直下の子要素が左から右へ横並びに配置されます。「float」などを駆使して横並びレイアウトを仕込むよりもずっとお手軽ですね。



overflow-x:scroll;

overflowプロパティは、要素がboxに収まりきらずにはみ出た時(overflowした時)の対処を設定します。
値を「scroll」に設定することで、overflowした部分をscroll表示させることができるようになります。

「overflow-x」とすることで、x方向にはみ出したときの処理、すなはち横スクロールを実現させます。



では早速作っていきましょう。



幅指定は相対値で。

画像を用意します。

cyan.png
magenta.png
green.png

yellow.png
red.png
blue.png

HTMLに画像を貼り付け、キャプション(説明文)も添えます。
その外側をdivで囲いましょう。class名は「yoko」としました。

HTML

シアン!
マゼンタ❤️
グリーン!
イエロー🍛
レッド!
6人そろって・・

まずはモバイルファーストでつくっていきます。
CSSで、先ほどの横並びとスクロールを設定します。ついでにキャプションも中央揃えにしておきます(ここはお好みで)。

CSS

.yoko { display:flex; overflow-x:scroll; 「「1//キャプションを中央揃えに。」」 text-align:center; }

画像のwidthを調整しておきましょう。「横スクロールできますよ」感をユーザに認識してもらえるように、3つ目の要素の左端が少し画面内に顔を出しているように表示させたい。

このときwidthの値を「px」などの絶対値で指定すると、デバイスの幅が変わるとイメージ通りの表示ができません。



今回は相対値「vw」を使いましょう。あとpaddingも設定しておきます。

CSS

.yoko img { width:35vw; padding:2vw; }

ビルドしてみます。

シアン!
マゼンタ❤️
グリーン!
イエロー🍛
レッド!
6人そろって・・

できました!上の部分▲は実際のCSSを仕込んであるので、スクロールさせてみてください。



PC表示用にメディアクエリ。

PCでの見え方についても仕上げていきましょう。
まずそのまま表示させてみます。









大きーーーーい。






・・・imgの幅を「vw」で設定したため、このようになってしまいました。
メディアクエリを使って、PC用に場合分けしましょうね。html全体についても、最大幅を1000pxとし、中央に寄せておきます。

html { max-width:1000px; margin: 0 auto; } 「「3//記入済みのコード。 .yoko img { width:35vw; padding:2vw; } 」」 @media only screen and (min-device-width: 1000px) { .yoko img { width:16em; padding:0.5em; } }

PC表示の場合に使う相対値は「em」としました。値についてはその都度プレビューしながら微調整していきます。

PCでのプレビュー



PCでもスッキリ表示できました。

うまくいきましたね。お疲れ様でした ♪

扨(さて)今回は、CSSの横スクロール実装に挑戦してみました。
コード自体は単純なもので便利なのですが、デバイスの種類に応じたサイズ調整が少し手間がかかります。

あと、メディアクエリの設定は「標準のCSS」→ 「メディアクエリ」の順番で記述しないと、うまく表示されませんでした。今後それについても検証していきたいと思います。





「ふ」です。

swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。

🐧 twitter 🐧