Bootstrap5のアイコンサイズを完全理解！font-size・line-heightと幅高さユーティリティの関係をやさしく解説

1. Bootstrapアイコンとfont-sizeの基本

1. Bootstrapアイコンとfont-sizeの基本

Bootstrapアイコンは画像ではなく文字と同じように表示されます。そのため、アイコンサイズを変更する場合はfont-sizeが重要になります。font-sizeとは文字の大きさを決める設定です。アイコンも文字として扱われるため、この値を変えると大きさが変わります。

たとえば、同じ家のアイコンでもfont-sizeを変えるだけでサイズが変わります。これは文字を大きくしたり小さくしたりするのと同じ仕組みです。Bootstrap5ではfs-1からfs-6までのクラスが用意されていて、簡単に文字サイズを変更できます。

<p class="fs-1"><i class="bi bi-house"></i> 大きいアイコン</p>
<p class="fs-4"><i class="bi bi-house"></i> 中くらいのアイコン</p>
<p class="fs-6"><i class="bi bi-house"></i> 小さいアイコン</p>

このようにBootstrapのfont-sizeユーティリティを使えば、初心者でも簡単にアイコンサイズを統一できます。

2. line-heightとは何か

2. line-heightとは何か

line-heightとは行の高さのことです。むずかしく聞こえますが、文字の上下の余白のようなものです。アイコンをボタンの中に入れたときに、上下がずれて見えることがあります。その原因の一つがline-heightです。

たとえば、同じfont-sizeでもline-heightが大きいと上下に余白が増えます。小さいと詰まって見えます。Bootstrapにはlh-1やlh-baseといったクラスがあり、行の高さを簡単に調整できます。

<div class="fs-2 lh-1 border p-2">
<i class="bi bi-star"></i> 行の高さを小さく
</div>

<div class="fs-2 lh-base border p-2 mt-2">
<i class="bi bi-star"></i> 標準の行の高さ
</div>

アイコンサイズの統一では、font-sizeだけでなくline-heightも確認することが大切です。

3. 幅と高さユーティリティとの関係

3. 幅と高さユーティリティとの関係

Bootstrap5にはw-25やh-100などの幅高さユーティリティがあります。これは箱の大きさを決めるものです。しかし、アイコン自体は文字なので、幅や高さを変えてもfont-sizeを変えない限りアイコンそのものは大きくなりません。

ここが初心者が混乱しやすいポイントです。箱だけ大きくなって、中のアイコンが小さいままになることがあります。

<div class="border w-25 p-3 text-center">
<i class="bi bi-heart fs-5"></i>
</div>

<div class="border w-25 p-3 text-center mt-2">
<i class="bi bi-heart fs-1"></i>
</div>

幅高さユーティリティは箱のサイズ、font-sizeはアイコンのサイズと覚えると理解しやすくなります。

4. ボタン内のアイコンサイズをそろえる方法

4. ボタン内のアイコンサイズをそろえる方法

ボタンの中にアイコンを入れる場合、font-sizeとline-heightの両方を意識するときれいに揃います。ボタンは高さが決まっているため、line-heightが大きすぎると上下にずれて見えます。

その場合はlh-1を指定して、行の高さを詰めると整います。

<button class="btn btn-primary">
<i class="bi bi-send fs-5 lh-1"></i> 送信
</button>

<button class="btn btn-success ms-2">
<i class="bi bi-check-circle fs-5 lh-1"></i> 完了
</button>

BootstrapボタンとBootstrapアイコンを組み合わせるときは、サイズの統一がデザインの美しさにつながります。

5. CSSでさらに細かく調整する

5. CSSでさらに細かく調整する

Bootstrapのクラスだけでは足りない場合、自分でCSSを書くこともできます。たとえば特定のアイコンだけサイズを固定したい場合です。

styleタグの中にfont-sizeとline-heightを指定すれば、より細かいコントロールができます。

<style>
.icon-large {
    font-size: 40px;
    line-height: 1;
}
</style>

<p><i class="bi bi-alarm icon-large"></i> 固定サイズのアイコン</p>

このようにBootstrapとCSSを組み合わせることで、Webデザインの自由度が高まります。

6. 画像アイコンとの違いも理解しよう

6. 画像アイコンとの違いも理解しよう

画像ファイルのアイコンはwidthやheightで直接サイズを変えます。しかしBootstrap Iconsは文字なのでfont-sizeで変えます。この違いを理解しておくことが大切です。

たとえば画像なら次のように指定します。

<img src="/img/sample120-120.jpg" class="w-25" alt="サンプル画像">

画像は幅高さユーティリティで直接変わりますが、文字アイコンはfont-sizeが中心です。ここをしっかり区別することで、Bootstrap5のサイズ調整がスムーズにできるようになります。

まとめ

まとめ

Bootstrap5のアイコンサイズ調整を正しく理解するためには、Bootstrapアイコンが画像ではなく文字として描画されるという基本構造を深く理解することが重要です。Bootstrap Iconsはフォントベースのアイコンであり、font-sizeがそのままアイコンサイズに直結します。そのため、wやhの幅高さユーティリティだけではアイコンそのものの拡大縮小は行われません。まずはfont-sizeユーティリティであるfs-1からfs-6の使い分けを覚えることが、Bootstrap5デザイン設計の第一歩になります。

また、line-heightの理解も欠かせません。line-heightは行の高さを制御するCSSプロパティであり、アイコンの上下の余白やボタン内の垂直位置に大きく影響します。特にBootstrapボタン内でBootstrapアイコンを使用する場合、line-heightが適切でないと中央揃えが崩れます。lh-1やlh-baseを状況に応じて活用することで、より美しいUI設計が可能になります。

さらに、幅高さユーティリティとの違いを正確に理解することがWeb制作初心者にとって重要です。w-25やh-100は要素の箱の大きさを決定するためのクラスであり、フォントアイコンの拡大とは仕組みが異なります。この違いを理解せずにBootstrapレイアウトを組むと、意図しないデザイン崩れが発生します。

実務レベルでは、Bootstrap5のユーティリティクラスとカスタムCSSを組み合わせて使うことが一般的です。特定のアイコンサイズを統一したい場合は、専用クラスを定義し、font-sizeとline-heightを固定することで、プロジェクト全体のUI一貫性が保たれます。これはWebデザイン最適化やユーザビリティ向上にも直結します。

<style>
.icon-unified {
    font-size: 32px;
    line-height: 1;
}
</style>

<div class="d-flex gap-3">
<i class="bi bi-house icon-unified"></i>
<i class="bi bi-heart icon-unified"></i>
<i class="bi bi-star icon-unified"></i>
</div>

このようにクラスを統一することで、Bootstrap5のアイコンサイズ統一が簡単に実現できます。font-sizeとline-heightをセットで考えることが、レスポンシブデザインやモダンUI設計において重要なポイントです。

Bootstrap5アイコンサイズ調整の基本は、文字サイズ制御、行間制御、箱サイズ制御の三つを区別して理解することです。この考え方を身につけることで、Bootstrapボタン、ナビゲーションバー、カードデザイン、フォーム装飾などあらゆる場面で安定したデザイン構築が可能になります。Web制作初心者から実務開発者まで、必ず押さえておきたい基礎知識です。