親要素ぶち抜きの手段はいくつか持っておかないとかんたんに詰む。
はじめに
スマホを筆頭に横スクロールのコンテンツを導入することは珍しくなくなってきた。マウス操作でもドラッグでのスクロールに対応させたりとかして、スマホに寄せてる風潮がある。世の中がよく使いだしてるので、自分たちが導入してもユーザビリティ的な問題は無いんじゃないのっていうね。下手に目新しいものを入れると使い勝手が悪くて不評を買う事があるんで、新しめのギミックは後追いの姿勢が無難だと思う。で、iframeとかでスクロールさせるのとかで慣れたつもりでいても、意外と親要素をぶち抜く子要素を作るのは難しい。
子要素は親要素の枠内に収まろうとする性質がある。幅を満たしたら下に折り返す横書きのイメージ。もしくは子要素の設定を無視してでも、折り返さずに親要素に収まろうとする。縦並びなら問題ないけど横並びだとどうなのよって。そんな感じで、横並びだと意図するようなぶち抜きは標準では起きない。簡単にぶち抜いちゃう仕様だったらピーキーすぎるから、そういう意味では現状の仕様でいいんだけどね。
基礎
こんな感じのがあったとする。
<div class="wrap">
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>cssをこうすると横にスクロールする。
.wrap{
width: 250px;
overflow-x: scroll;
}
.parent{
width: 400px;
display: flex;
flex-direction: row;
}
.child{
width: 90px;
height: 100px;
margin: 0 5px;
background: #eee;
}.childを縦並びにした縦スクロール（overflow-y）であれば.parentはなくていいけど横スクロール（overflow-x）はそうはいかない。overflowを書いてる要素の直下を実数で指定しないと枠に収まるように勝手に調整される。
.parentの幅が決まっていればいいんだけど、.childの数とか幅が不定なコンテンツだったら.parentの幅を定めたら余ったり足りなかったりのリスクしかない。汎用性としては微妙。
格納する内容に合わせたoverflow-x:scroll;
これから書くやつは.childがいくつあっても大丈夫なやつ。幅は不定でいいんだけど1つの縛りとして、高さは決める。
<div class="wrap">
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>positionでやる。
.wrap{
width: 100%;
height: 120px;
overflow-x: scroll;
position: relative;
}
.parent{
display: flex;
flex-direction: row;
position: absolute;
top: 0;
left: 0;
}
.child{
width: 200px;
height: 100px;
margin: 0 5px;
background: #eee;
}.parentの幅を書かなくて良くなった。
試しのために.childのwidthに実数値を突っ込んでるけど、display:inline-block;とかにしてランダムにテキストを突っ込めばもっといい感じに分かると思う。
子要素の自動改行対策
.childをこんな感じで組んだとする。
<div class="child">あああああああああああああ</div>親要素周りは前項のとおりでいいんだけど、それでも子要素は親要素に収まろうとするので改行したりして調子を取ろうとするのでちょっとめんどい。
この1行で解決する場合がある。
.child{
white-space: nowrap;
}テキストを自動改行させないって内容。子要素の内容によってはこれで片付かないこともあるだろうけど、とりあえず試してみるといいです。
コメント