失敗コードからBootstrapのグリッドシステムを読み解く row編
はじめに
Bootstrapを使うことでcssを用意されたクラスで効率的に開発が可能です。
一方で、内部を知らずに掛けてしまうのは良し悪しあり、思わぬ動きに苦戦することもあります。
実際のコードを理解しておくことが重要だと思い、記事をしたためることにしました。
今回取り扱う要素
グリッドシステムに関連するBootstrapのrow要素を扱います。
グリッドシステムとは、ページのレイアウトを、行(縦に並べる)と列(横に並べる)で制御する仕組みです。
グリッドシステム - Bootstrap v5.3 CSS Flexbox Layout Guide | CSS-Tricks
サンプルコードについて
- 見た目上わかりやすいように上下に余白を作っています。(py-1)
- グリッドレイアウトで配置するコンテンツ本体を、自作クラスcontentで表現しています。(content)
サンプルコードを書いて理解を深める
シンプルなサンプルコード・失敗例コード・失敗を邪道なやり方で解消するコードの順番で以下に記載していきます。
コードの内容を通してrow要素の挙動の理解を深めていきます。
基本的なグリッドレイアウト
原則Bootstrapのrow,colを使ってグリッドレイアウトを作る場合は、row要素の中にcol要素を入れます。
<div class="row py-1">
<div class="col py-1">
<div class="content">content</div>
</div>
</div>
- 一番外の枠が、class="row"
- その中の枠が、class="col"
- 一番中のcontentの箱が、class="content"
※class="content"には、実際にはページのコンテンツが入るとイメージしてください。
更に並べるとこんな感じ
<div class="row py-1">
<div class="col py-1">
<div class="content">content</div>
</div>
<div class="col py-1">
<div class="content">content</div>
</div>
</div>
badパターン(rowの入れ子構造)
先ほどはrowの中にcol要素を配置しました。
もしrow要素の中にrow要素を入れたらどうなるでしょうか。
<div class="row py-1">
<div class="row py-1">
<div class="content">content</div>
</div>
</div>
ご覧のように、横軸の配置がおかしくなってしまいました。
rowの中にあるrowがズレていますね。
なぜなのか、Bootstrapのソースコードから読み解いてみましょう。
上記がrowに関するBootstrapのcssソースになります。
一旦は、gutterというフレーズと.row{}と.row > *{}という2つのブロックがあることを覚えておいてください。
※2025/09/28時点のソースコードから行数を抽出しています。おそらくv5.3.0以降のバージョンがリリースされたあとも当時のソースの行数が表示されると思われますが、表示位置が変わってしまったらごめんなさい！。
あえて邪道なソースコードで崩れを解消してみる
邪道1: gutterの制御
今回の表示崩れの原因となっているpaddingはgutterによって定義されています。
ガター・Bootstrap v5.3
よって、以下のように、ガターを0に設定することでも表示は整います。
<div class="row py-1">
<div class="row py-1 g-0">
<div class="content">content</div>
</div>
</div>
classの"g-0"の部分を追加することで表示が整いましたね。
ただし、このような方法ではなくグリッドシステムに従って設定するべきです。
ガターの制御自体は問題ないでしょうが、rowを入れ子にするために使うべきものではないです。
邪道2: 子要素でダメなら孫要素にする
rowクラスにまつわるbootstrap.css上はの記述は以下の2つです。
- row要素そのものを制御する.row{}
- rowの子要素を制御する.row > * {}
先に説明したように原則rowの中にcolを入れる前提なので、rowがrowの中にあると表示が崩れてしまいます。
ならば、2つのrowの間に適当(悪い意味で)な要素を入れたとしたら・・・？
<div class="row py-1">
<div>
<div class="row py-1">
<div class="content">content</div>
</div>
</div>
</div>
.row > * {}は、「rowの子要素」を指しています。
2つ以上中の要素は含みません。
よって、このようなコードでも一応表示は整います。
ただし、こちらも先ほどのものと同様、グリッドシステムに従って設定するべきです。
まとめ
今回扱ったBootstrapのrow要素は、複数の要素を組み合わせて使うものです。
システム開発においては人が作ったソースに手を入れることも、自分の作ったものを将来誰かが読むこともあります。
その点単一の要素で完結しないグリッドシステムの要素は、他の要素以上に、作法に則ったコーディングを行うことが重要ですね。
参考文献
執筆にあたりBootstrapのソースコードを引用しております。
Discussion