こんにちは。アトリエKW 代表の 渡邉響子です。
2021年５月に正式リリースされた Bootstrap Ver.5 の使い方などを紹介しています。
簡単にレスポンシブなコンテンツを並べることができて便利な Bootstrap の .row と .col クラス。
でもその中身の高さがそろわない！ということありませんか？
Bootstrap のバージョン 4 以上 だと簡単にそろえられます。そのそろえる方法をお伝えします。
- .row .col でのレイアウトのしかたは知ってるけれど各コンテンツの高さがそろわなくてつらい！
目次
.h-100 クラスをつければいい
結論から先に言います。
単純に、高さをそろえたい<div>要素に .h-100 クラスをつけてあげるだけです。
下のソースコードのように、高さをそろえたい<div> (4, 7, 10 行目) に .h-100 クラスを付けます。
高さをそろえたい<div> に .h-100 を付けた場合：
<div class="container">
<div class="row g-2">
<div class="col-4">
<div class="border bg-light p-1 h-100">この中に文章を書きこみます。長い文章です。長いんです。本当に長いんです。本当に長いんです。本当に長いんです。本当なんです。</div>
</div>
<div class="col-4">
<div class="border bg-light p-1 h-100">ここは短い文章。</div>
</div>
<div class="col-4">
<div class="border bg-light p-1 h-100">中くらいの文章をここに書いていきます。中くらいなんです。本当です。</div>
</div>
</div>
</div>
結果は下のように、中身の文章の長さが違っていてもそれぞれの高さがそろいます。
この .h-100 クラスは、高さ100% の指定（ height : 100% )で、親要素の高さ目いっぱい使ってねというもので、Bootstrap の バージョン 4 から追加になっています。
Bootstrap5 のリファレンス Sizing(サイジング)
ちなみに、.h-100 を付けない場合は下のようになります。
4，7，10行目の<div>に .h-100 がついていない場合：
<div class="container">
<div class="row g-2">
<div class="col-4">
<div class="border bg-light p-1">この中に文章を書きこみます。長い文章です。長いんです。本当に長いんです。本当に長いんです。本当に長いんです。本当なんです。</div>
</div>
<div class="col-4">
<div class="border bg-light p-1">ここは短い文章。</div>
</div>
<div class="col-4">
<div class="border bg-light p-1">中くらいの文章をここに書いていきます。中くらいなんです。本当です。</div>
</div>
</div>
</div>結果：
実はそもそも .col クラスは高さがそろっている
Bootstrap4 から、 .row .col クラスは Flexbox になっていて、.col クラスをつけた <div> 要素は高さがそろっています。
.col クラスがついている<div> 要素は高さがそろっている
<div class="container">
<div class="row g-2">
<div class="col-4 border bg-light p-1">この中に文章を書きこみます。長い文章です。長いんです。本当に長いんです。本当に長いんです。本当に長いんです。本当なんです。</div>
<div class="col-4 border bg-light p-1">ここは短い文章。</div>
<div class="col-4 border bg-light p-1">中くらいの文章をここに書いていきます。中くらいなんです。本当です。</div>
</div>
</div>結果：
上のソースコードは、今まで説明で使ったものと似ていますが違いがあります。
最初のコードと何が違うのかというと、最初のコードは、.col クラスがつけられた<div>の中に、さらに <div>要素を置いてコンテンツを配置していたのに対し、上記のコードでは、.col クラスがつけられた<div> に直接コンテンツを配置しているということです。
最初のコード：
<div class="col-4">
<div class="border bg-light p-1">ここは短い文章。</div>
</div>今回のコード：
<div class="col-4 border bg-light p-1">ここは短い文章。</div>つまり、.col クラスがつけられた<div>要素は高さがそろっているのですが、その中にまた <div> 要素を配置した場合、その <div> 要素の高さは何も指定しないと中身のコンテンツに依存することになり、高さがまちまちになるということなのです。
なるほど高さをそろえるなら、 .col クラスをつけた<div> の中でさらに <div> を置かないようにすればいいなと思われるかもしれませんね。
それも一つの手なのですが、各 <div> ごとにガター（すきま）を置きたいときは、その方法はうまくいきません。
下の結果を見比べてください。
.col クラスのある<div> に直接コンテンツを置いた場合：ガターがありません
.col クラスのある <div> の下にさらに<div>を配置した場合：ガターがあります
ガターを持たせて高さもそろえたいという場合は、.colクラスがある<div>要素に直接コンテンツを置く方法では対応できないのです。
Bootstrap5 で追加になったガター
ガターは、.row クラスを付与した<div> につけることで、各カラムのパディングを指定できる便利なクラスです。
ここで注意すべきなのは、各カラムのマージンではなくパディングだということです。
マージンとパディングの違いは、マージンは要素の外側の余白のことを意味し、パディングは、要素の内部の余白のことを意味しします。
Bootstrap5 のガターは、各カラムのパディング、つまり各カラムの内部の余白を指定することによってつくられています。
分かりやすくするために、.col のある<div> に赤い枠線をつけました( .border クラス)
<div class="container">
<div class="row g-3">
<div class="col-4 border border-danger">
<div class="border bg-light p-1 h-100">この中に文章を書きこみます。長い文章です。長いんです。本当に長いんです。本当に長いんです。本当に長いんです。本当なんです。</div>
</div>
<div class="col-4 border border-danger">
<div class="border bg-light p-1 h-100">ここは短い文章。</div>
</div>
<div class="col-4 border border-danger">
<div class="border bg-light p-1 h-100">中くらいの文章をここに書いていきます。中くらいなんです。本当です。</div>
</div>
</div>
</div>
結果： 赤い枠線が .col のついた<div> の領域。その内部で余白がついているのが分かると思います。
つまるところ、ガターをもたせたかったら、.col クラスをつけた<div>要素の中に、さらに<div>要素を配置して、そこにコンテンツを配置しなければいけないということです。
私は Bootstrap5 を使い始めたころ、これがうまく理解できていなくて苦労しました(^^;
まとめ
- 高さをそろえたいときは、 .h-100 クラスをつけてみる。
- ガター（隙間）を持たせたい場合は、.col クラスのついた<div>要素の下にさらに<div>要素を配置して、そこにコンテンツを配置する
今回は、高さをそろえる方法をお伝えしました。
また次回、Bootstrap5 の便利な使い方をお伝えしたいと思います。
ご注意事項
- 全ての環境で動作する保証はありません。
ウェブサイト制作関連の技術情報は、当方の動作環境で動作を確認しておりますが、全ての環境で動作を保証するものではありません。 - 紹介した情報の適用は、自己責任でお願いします。
細心の注意をはらって記事を書いています。ですが記事中の情報を適用したことにより問題が発生することがあるかもしれません。
その場合、当方はその責任をとることができません。
あらかじめご両翼ください
