Bootstrap - サイズ調整：初心者向けの包括ガイド

こんにちは、未来のウェブ開発者さんたち！今日は、Bootstrapのサイズ調整の興味深い世界に飛び込みます。あなたの近所の親切なコンピュータ教師として、私はこの旅をステップバイステップで案内します。プログラミングが初めての方でも心配しないでください - 基礎から始めて少しずつ進めていきます。では、コーヒー（またはあなたが好きなお茶）を飲みながら、始めましょう！

Bootstrap サイズ調整とは？

本題に入る前に、Bootstrapサイズ調整とは何かを理解しましょう。部屋を飾ることを考えてみてください。いくつかの家具を完璧に収めるように、いくつかは半分のスペースを占めるように、そして他のものは部屋のサイズに応じて調整するようにします。それと同じように、Bootstrapサイズ調整はウェブページ上の要素を調整する手助けをしてくれます！

親要素に対してのサイズ調整

まずは、親要素に対してサイズ調整を行う方法から始めます。これは、壁にかけた絵がどれだけのスペースを占めるべきかを決めるようなものです。

幅クラス

Bootstrapは、要素の幅を親要素の幅の百分率として設定するクラスを提供しています。以下はそのクラスの一覧です：

クラス	説明
w-25	幅 25%
w-50	幅 50%
w-75	幅 75%
w-100	幅 100%
w-auto	自動幅

これらを実行してみましょう：

<div class="container">
<div class="w-25 p-3" style="background-color: #eee;">幅 25%</div>
<div class="w-50 p-3" style="background-color: #ddd;">幅 50%</div>
<div class="w-75 p-3" style="background-color: #ccc;">幅 75%</div>
<div class="w-100 p-3" style="background-color: #bbb;">幅 100%</div>
<div class="w-auto p-3" style="background-color: #aaa;">自動幅</div>
</div>

この例では、5つの div 要素を作成し、それぞれ異なる幅クラスを適用しています。p-3 クラスは視認性を高めるためのパディングを追加します。それぞれの div が親コンテナの幅の異なる百分率を占めていることを確認してください。

高さクラス

同様に、Bootstrapは高さを設定するためのクラスも提供しています：

クラス	説明
h-25	高さ 25%
h-50	高さ 50%
h-75	高さ 75%
h-100	高さ 100%
h-auto	自動高さ

以下はその使用例です：

<div style="height: 200px;">
<div class="h-25 d-inline-block" style="width: 120px; background-color: #eee;">高さ 25%</div>
<div class="h-50 d-inline-block" style="width: 120px; background-color: #ddd;">高さ 50%</div>
<div class="h-75 d-inline-block" style="width: 120px; background-color: #ccc;">高さ 75%</div>
<div class="h-100 d-inline-block" style="width: 120px; background-color: #bbb;">高さ 100%</div>
<div class="h-auto d-inline-block" style="width: 120px; background-color: #aaa;">自動高さ</div>
</div>

この例では、親 div に固定された高さを設定し、子要素に高さクラスを適用しています。d-inline-block クラスはこれらの div 要素をインライン表示します。

ビューポートの幅に対してのサイズ調整

次に、ビューポートの幅に対して要素のサイズを調整する方法について話しましょう。これは、テレビ画面を異なる部屋のサイズに合わせて調整するようなものです。

Bootstrapは vw 単位を使用しており、これは「ビューポートの幅」を意味します。以下はそのクラスです：

クラス	説明
vw-100	幅 100vw
min-vw-100	最小幅 100vw
max-vw-100	最大幅 100vw

以下はその使用例です：

<div class="vw-100" style="background-color: #eee;">この div は 100vw 幅です。</div>

この div は常にビューポートの幅と同じ幅を持つます。

ビューポートの高さに対してのサイズ調整

同様に、ビューポートの高さに対して要素のサイズを調整するために vh 単位を使用できます。

クラス	説明
vh-100	高さ 100vh
min-vh-100	最小高さ 100vh
max-vh-100	最大高さ 100vh

以下はその使用例です：

<div class="vh-100" style="background-color: #eee;">この div は 100vh 高さです。</div>

この div は常にビューポートの高さと同じ高さを持つます。

ビューポートの幅と高さに対してのサイズ調整

最後に、ビューポートの幅と高さの両方に対してサイズ調整を行う方法を見ていきましょう。

最小幅 100%

<div class="min-vw-100" style="background-color: #eee;">100vw</div>

この div は少なくともビューポートの幅と同じ幅を持つますが、コンテンツが更多ければ拡張します。

最小高さ 100%

<div class="min-vh-100" style="background-color: #eee;">100vh</div>

同様に、この div は少なくともビューポートの高さと同じ高さを持つますが、必要に応じて拡張します。

すべてを組み合わせて

これらのサイズ調整オプションをすべてカバーしたので、それらを活用した楽しい例を作成してみましょう：

<div class="container">
<div class="row">
<div class="col-md-6">
<div class="w-75 p-3 mb-2" style="background-color: #e9ecef;">
私は親要素の 75% 幅です！
</div>
<div class="h-50 p-3" style="background-color: #ced4da;">
私は親要素の 50% 高さです！
</div>
</div>
<div class="col-md-6">
<div class="vw-100 p-3 mb-2" style="background-color: #adb5bd;">
私はビューポートの幅と同じ幅です！
</div>
<div class="vh-50 p-3" style="background-color: #6c757d; color: white;">
私はビューポートの半分の高さです！
</div>
</div>
</div>
</div>

この例では、幅、高さ、ビューポートに対するサイズ調整を組み合わせて、多様で応答性のあるレイアウトを作成しています。ブラウザのウィンドウをリサイズして、これらの要素がどのように適応するかを確認してみてください！

そして、それでして、皆さん！Bootstrapサイズ調整の世界に初めてのステップを踏み出しました。練習は完璧を生みますので、これらのクラスを自分のプロジェクトで実験してみてください。間もなく、応答性のあるレイアウトをプロのように作成できるようになるでしょう！

ハッピーコーディング、そしてあなたのウェブサイトが常に完璧にフィットするようになることを祈っています！?

Credits: Image by storyset