Bootstrap - グリッドシステム: 初心者向けのやさしいガイド

こんにちは、未来のウェブ開発者たち！今日は、Bootstrapのグリッドシステムの世界に楽しく飛び込んでみましょう。コードを書いたことがない人も心配しないでください。私はあなたと一緒に、ステップバイステップですべてを説明します。コーヒー（または、あなたの好み次第でティー）を一杯取り、一緒に進んでみましょう！

Bootstrapグリッドシステムとは？

始める前に、ちょっとした話をしましょう。本棚を整理しようとしているとします。本はすべて異なるサイズです。困るでしょう？でも、Bootstrapグリッドシステムは魔法の本棚のようなものです。どんなサイズや形のコンテンツも自动的に整理してくれます！

ウェブデザインの言葉では、グリッドシステムは強力なレイアウトツールで、响应型で構造化されたウェブページを作成する手助けをしてくれます。大きなデスクトップモニタから小さなスマートフォンスクリーンまで、どのデバイスでもコンテンツを完璧に並べます。

基本的な例

簡単な例から始めてみましょう。Bootstrapグリッドシステムの基本的な構造は以下の通りです：

<div class="container">
<div class="row">
<div class="col-sm">
3つのカラムのうちの1つ
</div>
<div class="col-sm">
3つのカラムのうちの1つ
</div>
<div class="col-sm">
3つのカラムのうちの1つ
</div>
</div>
</div>

ここで何が起きているのでしょうか？説明します：

1. containerクラスから始めます。これはすべてを保持する外側の箱のようなものです。
2. コンテナの中にはrowクラスがあります。これを本棚の棚と考えてください。
3. 行の中には3つのcol-smクラスがあります。これらは棚に並んでいる本です。

どのように機能する？

Bootstrapグリッドシステムは12列のレイアウトに基づいています。なぜ12なのか？ウェブデザインでは魔法の数字で、1、2、3、4、6で割れるため、柔軟性に富んでいます！

以下は視覚的な表現です：

1	2	3	4	5	6	7	8	9	10	11	12
カラム	カラム	カラム	カラム	カラム	カラム	カラム	カラム	カラム	カラム	カラム	カラム

これらのカラムは組み合わせて広いコンテンツエリアを作成できます。例えば、2列の6ユニットずつ、または3列の4ユニットずつにすることができます。ブロック遊びのようです！

自動レイアウトカラム

次に、面白い技を見てみましょう。Bootstrapはカラムの幅を自動的に処理してくれます。以下を見てください：

<div class="container">
<div class="row">
<div class="col">
2分割のうちの1つ
</div>
<div class="col">
2分割のうちの2つ
</div>
</div>
<div class="row">
<div class="col">
3分割のうちの1つ
</div>
<div class="col">
3分割のうちの2つ
</div>
<div class="col">
3分割のうちの3つ
</div>
</div>
</div>

この例では、カラムの幅を指定していません。Bootstrapはスペースをカラム間で均等に分割します。ロボットが本棚を整頓してくれるようなものです！

等幅

すべてのカラムが同じ幅で、コンテンツに関係なくなりたい場合は、簡単です！

<div class="container">
<div class="row">
<div class="col">
3分割のうちの1つ
</div>
<div class="col">
2分割のうちの2つ (広い)
</div>
<div class="col">
3分割のうちの3つ
</div>
</div>
</div>

中央のカラムには多いコンテンツがありますが、すべてのカラムは等幅のままです。本棚に収まる拡張可能な本のようなものです！

特定のカラム幅を設定

時々、特定のカラムが特定の幅を持つようにし、他のカラムは自動的に調整したい場合があります。以下のようにします：

<div class="container">
<div class="row">
<div class="col">
3分割のうちの1つ
</div>
<div class="col-6">
2分割のうちの2つ (広い)
</div>
<div class="col">
3分割のうちの3つ
</div>
</div>
</div>

この場合、中央のカラムは6ユニット（半分の幅）を占め、他の2つのカラムは残りのスペースを均等に分けます。

可変幅コンテンツ

コンテンツに基づいてカラムの幅を調整したい場合はどうなるでしょうか？Bootstrapはそれをサポートしています：

<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
3分割のうちの1つ
</div>
<div class="col-md-auto">
可変幅コンテンツ
</div>
<div class="col col-lg-2">
3分割のうちの3つ
</div>
</div>
</div>

col-md-autoクラスを使用すると、そのカラムはコンテンツに基づいて拡大または縮小します。隣接する本に合わせてサイズが変わる本のようなものです！

响應クラス

次に、レイアウトを响应型にするについて話しましょう。Bootstrapはブレイクポイントを使用して、スクリーンサイズに基づいてレイアウトを調整します。以下は主なブレイクポイントです：

ブレイクポイント	クラス接尾辞	尺寸
Extrasmall	None	<576px
Small	sm	≥576px
Medium	md	≥768px
Large	lg	≥992px
Extralarge	xl	≥1200px
Extrasmalllarge	xxl	≥1400px

すべてのブレイクポイント

以下のようにブレイクポイントを使用します：

<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
</div>

このレイアウトはすべてのスクリーンサイズで同じままです。部屋のどこから見ても同じように見える本棚のようなものです！

スタックから水平

スクリーンサイズに基づいてレイアウトを変更したい場合はどうなるでしょうか？以下を見てください：

<div class="container">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
</div>

小さなスクリーンではカラムが垂直にスタックされ、小さなスクリーンでは横に並びます。スペースが狭いときに本棚が塔のように変わるようなものです！

混合とマッチ

異なるスクリーンサイズでカラムサイズを混合して使用することもできます：

<div class="container">
<div class="row">
<div class="col-12 col-md-8">.col-12 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
</div>

このレイアウトは小さなスクリーンと中程度以上のスクリーンで異なる見た目になります。形を変える本棚のようなものです！

行カラム

等幅カラムを素早く作成するには、行カラムを使用します：

<div class="container">
<div class="row row-cols-2">
<div class="col">カラム</div>
<div class="col">カラム</div>
<div class="col">カラム</div>
<div class="col">カラム</div>
</div>
</div>

これは2列の行を作成し、いくつかのcolディブを追加しても同じように並びます。本棚がいつもペアで本を並べるようなものです！

ネスト

最後に、グリッドを中にグリッドを配置することもできます：

<div class="container">
<div class="row">
<div class="col-sm-3">
レベル1: .col-sm-3
</div>
<div class="col-sm-9">
<div class="row">
<div class="col-8 col-sm-6">
レベル2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
レベル2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>

これにより、グリッド内に別のグリッドを作成できます。大きな本棚の中に小さな本棚が入っているようなものです！

そして、ここまでがBootstrapのグリッドシステムへの初めてのステップです。実践が完璧にするものです。これらの例を試してみて、さまざまなクラスを混合して、何が起きるかを確認してください。すぐにプロのように美しい、响应型のレイアウトを作成できるようになるでしょう！

ハッピーコーディング、そしてあなたのウェブページがいつも完璧に整理されていることを祈っています！

Credits: Image by storyset