Bootstrap - 列: 簡単に応答型レイアウトを構築する

こんにちは、ウェブ開発者の卵さんたち！今日は、Bootstrapの最も強力な機能の1つである列について深く掘り下げます。近所の親切なコンピュータ教師として、この旅を案内するのが楽しみです。信じてください、このチュートリアルの終わりまでに、プロのように応答型レイアウトを制作できるようになるでしょう！

仕組み

具体的な内容に入る前に、基本的なことを理解しましょう。Bootstrapのグリッドシステムは12列のレイアウトに基づいています。ピザを12枚のスライスに分ける thingを考えます - 自分で全部食べる（全幅の1列）也罢、友達とシェア也罢できます。

以下に簡単な例を示します：

<div class="container">
<div class="row">
<div class="col-sm-4">列1</div>
<div class="col-sm-4">列2</div>
<div class="col-sm-4">列3</div>
</div>
</div>

この例では、小画面では3つの等幅の列を作成しています。col-sm-4クラスは「小画面では12列のうち4列を占める」という意味です。まるで「12枚のピザのうち4枚をください」と言っているようなものです！

アラインメント

列を作成したので、次にアラインメントの方法を学びましょう。部屋の中で家具を並べる thingを考えてください - すべてが正好に見えるようにしたいですよね！

垂直アラインメント

列を垂直にアラインメントするには、行にクラスを使用します：

<div class="container">
<div class="row align-items-start">
<div class="col">上</div>
<div class="col">上</div>
<div class="col">上</div>
</div>
<div class="row align-items-center">
<div class="col">中央</div>
<div class="col">中央</div>
<div class="col">中央</div>
</div>
<div class="row align-items-end">
<div class="col">下</div>
<div class="col">下</div>
<div class="col">下</div>
</div>
</div>

ここでは、align-items-start、align-items-center、align-items-endを使用して、行の上、中央、下に列をアラインメントしています。

水平アラインメント

水平アラインメントには、justify-contentクラスを使用します：

<div class="container">
<div class="row justify-content-start">
<div class="col-4">One</div>
<div class="col-4">Two</div>
</div>
<div class="row justify-content-center">
<div class="col-4">One</div>
<div class="col-4">Two</div>
</div>
<div class="row justify-content-end">
<div class="col-4">One</div>
<div class="col-4">Two</div>
</div>
</div>

これらのクラス（justify-content-start、justify-content-center、justify-content-end）は、列をコンテナの左、中央、右にアラインメントします。

列の折り返し

時々、行に12列以上のユニットがあるかもしれません。心配しないでください、Bootstrapはあなたをサポートします！余分な列は自動的に新しい行に折り返されます：

<div class="container">
<div class="row">
<div class="col-9">列1</div>
<div class="col-4">列2</div>
<div class="col-6">列3</div>
</div>
</div>

この例では、9 + 4 = 13で、12を超えていますので、2番目の列が新しい行に折り返されます。

列の折り返し

新しい行を強制的に作りたい場合は、列の折り返しを使用します：

<div class="container">
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="w-100"></div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
</div>

<div class="w-100"></div>は100%の幅の折り返しを作成し、次の列が新しい行で始まるようにします。

並び替え

並び替えクラス

Bootstrapは、列の視覚的な順序を変更することができます：

<div class="container">
<div class="row">
<div class="col order-3">最初に見えるが最後</div>
<div class="col order-2">2番目に見えるが2番目</div>
<div class="col order-1">3番目に見えるが最初</div>
</div>
</div>

order-クラスは列の順序を決定します。まるで列に音楽椅子のゲームをさせるようなものです！

列のオフセット

オフセットクラス

時々、列の前にスペースを追加したい場合があります。その際はオフセットクラスを使用します：

<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
</div>

offset-md-4クラスは、4列に相当するマージンを追加し、2番目の列を右に押しやります。

応答ブレイクポイントでの列のクリア

レイアウトが異なる画面サイズで変更される際に、フロートした列をクリアする必要があるかもしれません：

<div class="container">
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="w-100 d-none d-md-block"></div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
</div>

ここでは、d-none d-md-blockは小画面では非表示だが、中画面以上では表示されるようにしています。

マージンユーティリティ

Bootstrapは、迅速なスペース調整のためのマージンユーティリティを提供しています：

<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
</div>

ml-autoクラスは、2番目の列を右に自動調整するマージンを追加します。

単独列クラス

最後に、行のラッパーなしで列クラスを使用することで、より多くの柔軟性を得ることができます：

<div class="container">
<div class="col-3 bg-light p-3 border">
.col-3: 25%の幅
</div>
<div class="col-sm-9 bg-light p-3 border">
.col-sm-9: smブレイクポイント以上で75%の幅
</div>
</div>

このアプローチにより、特に複雑なデザインに対してレイアウトの制御が強化されます。

そして、皆さん！Bootstrapの列についての詳細を学びました。実践が完璧を生むことを忘れないでくださいので、これらの概念を試してみてください。すぐに、経験豊富なウェブ開発者さながらの応答型レイアウトを作成できるようになるでしょう！

以下に、今回取り上げた列クラスの簡単な参照表を示します：

クラス	説明
col-*	基本列クラス (*は1-12)
col-sm-*	小画面以上の列
col-md-*	中画面以上の列
col-lg-*	大画面以上の列
col-xl-*	ekstra large画面以上の列
offset--	オフセット列 (*はsm, md, lg, xl)
order-*	列の順序 (*は1-12)

ハッピーコーディング、そしてあなたのレイアウトが常に応答型であることを祈っています！

Credits: Image by storyset