はじめに
今回は、divなりなんなりのボックスを、横にズラーーーーーっと並べて、はみ出し部分をスクロールさせる方法を紹介する。結論
sample.html
<div class="box1">
<div class="inner_box">1</div>
<div class="inner_box">2</div>
<div class="inner_box">3</div>
…
<div class="inner_box">99</div>
<div class="inner_box">100</div>
</div>scroll.css
.box1 {
display: flex;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
.box1 .inner_box {
display: inline-block;
vertical-align: top;
}解説
.box1
displayをflexに、overflow-xをscrollにすることで、延々とはみ出しで横スクロールをしてくれるようになる。-webkit-overflow-scrollingは、スクロールをぬるぬる慣性スクロールにしてくれるおまじない。
.inner_box
まずはdisplayをinline-blockとすることで、ボックスを横並びにする。普通ならば、横幅いっぱいまで並び終えると改行されるが、親要素のoverflow-xが効いているので、改行せずに延々と横並びになる。次に、おまけでボックスのトップが揃うように、vertical-alignを設定している。これでバラバラに並ぶことがなくなる。
底を揃えたければ、botttomにするだけ。centerもあります。
参考にしたサイト
横並びにした時に、改行せずにスクロールさせる方法
QiitaCommunitySignupLogin{"@context":"http://schem
@unimemo_blog
2019-03-14 23:05:03
📣過去のおすすめエントリー
今回は「スマートフォンでテーブルを横スクロールさせる方法」をご紹介します。
スマートフォンでテーブルを横スクロールさせる方法【CSS2行！】｜ゆにメモ https://t.co/T3U6c5tiua https://t.co/zN214shWc0
今回は「スマートフォンでテーブルを横スクロールさせる方法」をご紹介します。
スマートフォンでテーブルを横スクロールさせる方法【CSS2行！】｜ゆにメモ https://t.co/T3U6c5tiua https://t.co/zN214shWc0
@tora_kappa
2019-03-11 14:01:54
cssで横に無限ループしてスクロールするものを作りたいのですが、上手くいかなくて悩んでいます。
いくつかサイトみると、スクロールさせたい要素群を2つ作る。cssの「animation」でスクロールさせる領域に差異をつけることで、… https://t.co/TUbOSZv80F
いくつかサイトみると、スクロールさせたい要素群を2つ作る。cssの「animation」でスクロールさせる領域に差異をつけることで、… https://t.co/TUbOSZv80F