Bootstrapの幅と高さを完全理解！初心者でもわかるサイズ・幅高さユーティリティ入門

1. Bootstrapのサイズユーティリティとは何か

1. Bootstrapのサイズユーティリティとは何か

Bootstrapには、CSSを自分で書かなくても見た目を整えられる便利な仕組みがたくさん用意されています。 その中の一つがサイズユーティリティです。これは、要素の横幅や高さをクラス名だけで指定できる機能です。 プログラミング未経験の人に例えると、家具の幅を定規で測らなくても「半分サイズ」「全部サイズ」とラベルを貼るだけで調整できるような感覚です。 難しそうに見えても、実際は数字の意味を知るだけで使えるようになります。

2. w-25・w-50・w-100の数字の意味

2. w-25・w-50・w-100の数字の意味

wは幅を意味する英単語の頭文字です。25や50、100はパーセントを表しています。 つまりw-25は「親要素の横幅の25パーセント」、w-50は半分、w-100は全体いっぱいという意味です。 親要素とは、その要素を包んでいる外側の箱のことです。段ボール箱の中に入っている小箱を想像するとわかりやすいです。 画面全体ではなく、入れ物の大きさが基準になる点が重要です。

3. w-100を使った基本的な例

3. w-100を使った基本的な例

まずは一番わかりやすいw-100を使った例を見てみましょう。 画像やボックスを横いっぱいに広げたいときによく使います。 CSSを一切書かなくても、クラスを指定するだけで実現できます。

<div class="border w-100">
    横幅いっぱいのボックス
</div>

4. w-50とw-25の違いを体感する

4. w-50とw-25の違いを体感する

次にw-50とw-25を見てみましょう。これは横幅が半分、または四分の一になります。 スマートフォン画面で例えると、画面の半分だけ使うカードや、小さな案内枠を作るときに便利です。 数字が小さいほど細くなる、と覚えるだけで問題ありません。

<div class="border w-50 mb-2">
    横幅50パーセント
</div>
<div class="border w-25">
    横幅25パーセント
</div>

5. h-100の正しい考え方

5. h-100の正しい考え方

hは高さを意味します。h-100は高さを100パーセントにする指定です。 ここで多くの初心者が勘違いしやすいのが、画面いっぱいになると思ってしまう点です。 実際には、親要素の高さが基準になります。 親の高さが決まっていないと、h-100を指定しても高さは変わりません。 これは水を注ぐコップがないと水位を決められないのと同じです。

6. 高さを指定した親要素とh-100

6. 高さを指定した親要素とh-100

h-100を正しく使うには、親要素に高さを指定する必要があります。 以下の例では、外側の箱に高さを決め、その中の要素をいっぱいに広げています。 これにより、h-100の効果が目で見てわかるようになります。

<div style="height:200px;" class="border">
    <div class="h-100 bg-secondary text-white">
        高さ100パーセント
    </div>
</div>

7. 画像サイズ調整とw-100の組み合わせ

7. 画像サイズ調整とw-100の組み合わせ

Bootstrapの幅ユーティリティは画像との相性もとても良いです。 画像がはみ出して困るときは、w-100を指定するだけで親の横幅に収まります。 写真をアルバムにきれいに並べるイメージで考えると理解しやすいです。

<img src="/img/sample150-100.jpg" class="w-100" alt="サンプル画像">

8. サイズユーティリティを使うメリット

8. サイズユーティリティを使うメリット

サイズユーティリティを使う最大のメリットは、難しいCSSを書かなくてよい点です。 クラス名を見るだけで意味がわかるため、後からコードを見直しても理解しやすくなります。 また、Bootstrapは多くの現場で使われているため、同じ書き方を覚えることで他の人のコードも読みやすくなります。 初心者のうちは、まずw-25、w-50、w-100、h-100の4つをしっかり覚えるだけで十分です。