Bootstrapカードの等高化を完全解説！初心者でもわかる.h-100と.align-items-stretchの使い方
生徒
「Bootstrapでカードを並べたら、高さがバラバラになってしまいました。どうすればそろいますか？」
先生
「カードの中身が違うと、高さも変わってしまいますね。Bootstrapには高さをそろえる便利な方法があります。」
生徒
「パソコンをほとんど触ったことがなくても使えますか？」
先生
「大丈夫です。ブロックを同じ箱に入れるイメージで考えると、とても簡単ですよ。」
1. Bootstrapのカードとは何かをやさしく理解しよう
Bootstrapのカードとは、文字や画像をひとまとめにして表示できる便利な部品です。チラシや名刺を同じサイズのケースに入れて並べるような感覚で使えます。Webページでは、商品紹介、ブログ一覧、プロフィール表示などでよく使われます。
初心者の方が最初につまずきやすいのが、カードを横に並べたときに高さがそろわない問題です。これは、中に入っている文章の量や画像サイズが違うために起こります。
2. カードの高さがバラバラになる理由
カードは中身の量に合わせて自動的に高さが決まります。文章が長いカードは背が高くなり、短いカードは低くなります。これは、お弁当箱に入れる量が違うと、ふたの高さが変わるのと同じ考え方です。
見た目をきれいにそろえたい場合は、カード同士の高さをそろえる工夫が必要になります。ここで活躍するのが、Bootstrapの高さ調整用クラスです。
3. h-100を使ってカードを同じ高さにする方法
h-100は「高さを100パーセントにする」という意味のBootstrapクラスです。親の高さに合わせて、子の高さを最大まで広げてくれます。風船を箱いっぱいにふくらませるイメージです。
<div class="row">
<div class="col-md-4">
<div class="card h-100">
<img src="/img/sample150-100.jpg" class="card-img-top">
<div class="card-body">
<h5 class="card-title">カードA</h5>
<p class="card-text">短い文章です。</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card h-100">
<img src="/img/sample150-100.jpg" class="card-img-top">
<div class="card-body">
<h5 class="card-title">カードB</h5>
<p class="card-text">こちらは少し長めの文章が入っています。</p>
</div>
</div>
</div>
</div>
4. align-items-stretchでカードを引き伸ばす考え方
align-items-stretchは、Flexという並び方の中で使われる設定です。難しく聞こえますが、「横に並んだ箱を同じ高さまで引き伸ばす」と考えるだけで十分です。
Bootstrapのrowは、最初からFlexの仕組みを使っています。そのため、rowにこの設定を加えるだけで、カードが自然に同じ高さになります。
<div class="row align-items-stretch">
<div class="col-md-6">
<div class="card">
<div class="card-body">
<h5>カードC</h5>
<p>文章が少ないカードです。</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-body">
<h5>カードD</h5>
<p>文章が多く、高さが変わりやすいカードです。</p>
</div>
</div>
</div>
</div>
5. h-100とalign-items-stretchを一緒に使う実践例
実際の現場では、この二つを組み合わせることがよくあります。親で引き伸ばし、子で高さを最大にすることで、どんな内容でもきれいにそろいます。
<div class="row align-items-stretch">
<div class="col-md-4">
<div class="card h-100">
<div class="card-body">
<h5>商品1</h5>
<p>説明が短い商品です。</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card h-100">
<div class="card-body">
<h5>商品2</h5>
<p>説明が少し長めの商品説明が入ります。</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card h-100">
<div class="card-body">
<h5>商品3</h5>
<p>さらに詳しい説明文が入る商品です。</p>
</div>
</div>
</div>
</div>
6. 画像付きカードでも高さをそろえるコツ
画像が入ると、高さがさらにズレやすくなります。しかし考え方は同じです。カード全体を同じ高さにし、中身をその中に収めるだけです。
<div class="row align-items-stretch">
<div class="col-md-6">
<div class="card h-100">
<img src="/img/sample120-120.jpg" class="card-img-top">
<div class="card-body">
<p>画像付きカードです。</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card h-100">
<img src="/img/sample120-120.jpg" class="card-img-top">
<div class="card-body">
<p>文章が長くても高さはそろいます。</p>
</div>
</div>
</div>
</div>
7. 初心者がつまずきやすい注意点
カードにh-100を付けても、高さがそろわない場合があります。その原因の多くは、親の高さが決まっていないことです。親がふにゃふにゃだと、子も伸びようがありません。
rowとcolの構造を守り、横並びの状態を作ることが大切です。箱を並べるための土台を、まずしっかり作るイメージで考えてみてください。
まとめ
ここまでBootstrapのカードを等高にそろえる方法について、基礎から順番に解説してきました。カードレイアウトは、商品一覧、ブログ記事一覧、サービス紹介、プロフィール表示など、さまざまな場面で使われます。そのため、カードの高さがそろっているかどうかは、見た目の印象や読みやすさに大きく影響します。高さがバラバラな状態では、せっかく内容が良くても、どこか雑然とした印象を与えてしまいます。
今回学んだポイントの一つ目は、カードの高さが自動で決まる仕組みです。Bootstrapのカードは、中に入っている文章や画像の量によって高さが変わります。これはブラウザが自然に計算している動きであり、間違いではありません。しかし、一覧表示では見た目を整えるために、あえて高さをそろえる工夫が必要になります。
二つ目のポイントは、h-100クラスの役割です。h-100はカード自身に指定することで、親要素の高さを基準に最大まで広がる設定です。ただし、親の高さが決まっていなければ効果が出ません。そのため、rowとcolの構造を正しく使い、横並びの状態を作ることがとても重要になります。土台が安定していないと、その上に置いた箱もきれいに並ばない、という考え方が理解の助けになります。
三つ目は、align-items-stretchの考え方です。これはFlexの仕組みを利用して、横に並んだ要素を同じ高さまで引き伸ばす設定です。BootstrapではrowがFlexになっているため、rowにalign-items-stretchを指定するだけで、列全体の高さが自然にそろいます。難しい専門用語を覚えるよりも、「横に並んだ箱を同じ高さまで伸ばす」というイメージで理解すると、初心者の方でも迷わず使えるようになります。
四つ目のポイントは、h-100とalign-items-stretchを組み合わせる実践的な使い方です。親で高さをそろえ、子で高さを最大に広げることで、文章量や画像の有無に関係なく、安定したカードレイアウトを作れます。実務の現場でもよく使われる組み合わせであり、この形を覚えておくと応用が効きます。
さらに、画像付きカードの場合でも基本は同じです。画像が入ると高さがずれやすくなりますが、カード全体を等高にしておけば、中身が多少違っても見た目は整います。これにより、商品一覧やギャラリー表示でも、統一感のあるデザインを実現できます。
最後に注意点として、h-100を付けても高さがそろわない場合の原因を理解しておくことが大切です。その多くは、親要素の高さや構造が正しく設定されていないことにあります。rowとcolの基本構造を守り、横並びを意識することで、ほとんどの問題は解決できます。
まとめ用サンプルプログラム
<div class="row align-items-stretch">
<div class="col-md-4">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">サンプルA</h5>
<p class="card-text">文章が短いカードです。</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">サンプルB</h5>
<p class="card-text">こちらは少し長めの説明文が入っていますが、高さはそろいます。</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">サンプルC</h5>
<p class="card-text">さらに説明が多い場合でも、見た目は整ったままです。</p>
</div>
</div>
</div>
</div>
生徒
「カードの高さがそろわない理由が、文章量や画像の違いだと分かりました。」
先生
「そこに気づけたのは大きいですね。まず仕組みを知ることが大切です。」
生徒
「h-100はカードに付けて、align-items-stretchはrowに付ける、という役割分担も理解できました。」
先生
「親と子の関係で考えると、自然に覚えられますね。」
生徒
「最初は難しそうでしたが、箱をそろえるイメージで考えると安心しました。」
先生
「その感覚を忘れなければ、他のレイアウトでも応用できますよ。」
【60分集中】CSSを1行も書かない！？Bootstrap 5ユーティリティクラス活用で開発工数を50%削減
「スピード」が武器になる。Bootstrap 5で商用クオリティのWebサイトを高速構築。
本講座では、世界シェアNo.1のフレームワークBootstrap 5を使いこなし、ゼロからレスポンシブサイトを組み上げる「現場最速のワークフロー」を学びます。単なる導入に留まらず、ユーティリティクラスを活用した効率化と、実務で必須となるカスタマイズ技法を60分で完全習得します。
具体的なワークショップ内容と環境
【つくるもの】
モダンなランディングページ（LP）やダッシュボードのプロトタイプを作成します。ナビゲーション、ヒーローセクション、カードレイアウト、フッターなど、Bootstrapのコンポーネントを組み合わせて「一瞬で形にする」感動を体験してください。
【開発環境】
VS CodeにBootstrap 5専用のSnippet（補完機能）を導入し、手入力を最小限にする環境を構築。最新のCDN利用法や、表示速度（Core Web Vitals）を意識した最適な読み込み設定など、プロの初期設定を伝授します。
この60分で得られる3つの革新スキル
スマホ・タブレット・PCでレイアウトを自由自在に切り替える「ブレイクポイント」の極意を学びます。
CSSを1行も書かずに、マージン・パディング・カラーを制御。開発工数を半分以下にする実戦術を習得します。
「Bootstrap感」を消し、独自のブランドイメージに合わせるための、上書きの作法とデザインの整え方を伝授します。
※本講座は、HTML/CSSの基本を理解した方向けの「実践加速講座」です。制作会社のコーダーや副業フリーランスとして「案件の回転率」を上げ、市場価値を最大化させたい方をモクモクがバックアップします。
Bootstrap 5を楽しみながら、一緒に学びましょう！
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
