最近Webサイトを構築するとき、BootstrapというCSSフレームワークを利用することが多いので、その作業中に起きたある問題のお話をしたいと思います。
レイアウト構築にとても便利なCSSのプロパティ「flex」を用いて枠組み作るのは今の主流だと思います。
Bootstrapではあらかじめ設定されたクラスの組み合わせで枠組みや並び方などの調整が楽になります。
しかし、あるときWebページの枠組みをそれらの仕組みを使用し、どんどん作業を進めていたときのことです。
ブラウザの可変にスクロールバーが表示されていたのです。
そのスクロールバーを触ってみると、画面右端に数px分の空白が生まれていました。
何この空白？ほかのレイアウトはちゃんと縦に揃ってるんだけど？
とブラウザのWEB開発ツールなどで調べてもなかなか問題が見つからず・・・
色々とソースをたどってみるとある部分で問題となる箇所を見つけました。それは、rowとcolのクラスを利用してレイアウトを構築するグリッドシステムでした。
rowクラスを親として、子にcolクラスつけたタグが整列されるという仕組みなんですが、rowにもcolにもさらにサイズ指定することによって、ブラウザ幅の変化によって見え方が変わるようになります。
とても便利な仕組みなんですが、これをあいまいな認識で使っていたために数pxの隙間を生んでしまってました。
rowはcssではdisplay:flexを設定するようになっています。そしてrowとcolにmarginやpaddingなど見栄え良くするように色々とプロパティが設定されています。
自分としてはrowでflexをあてて整列させればいいという思いで使用していましたが、さらに使わなければならないクラスがちゃんと公式サイトでも書いていました。
それは、containerクラスをrowの親につけることでした。container、row、colのクラスを使用してグリッドシステムが完成する仕組みとなっていました。
ちゃんとドキュメントは読むべきだと思い、containerクラスをrowクラスの上についてない箇所には追加調整してみると、謎の隙間は消えました！
レイアウトに使う場合はcontainer、row、colを使用したグリッドシステム、パーツなど部分的な箇所で整列させたい場合はd-flexを使いましょう。