Bootstrap - CSS Grid: 基礎ガイド

こんにちは、未来のウェブ開発者たち！今日は、BootstrapのCSS Gridシステムの素晴らしい世界に飛び込みます。codingの経験がなくても心配しないでください - このエキサイティングな旅におけるあなたの親切なガイドとして、私はここにいます。コーヒー（または、あなたが好きな茶）を一杯取り、始めましょう！

Bootstrap - CSS Grid

仕組み

BootstrapのCSS Gridは、私たちがウェブページ上のコンテンツを整理するための魔法のようなレイアウトツールです。部屋に家具を並べることを想像して - これが私たちがやることですが、ウェブサイトの要素でやります！

グリッドシステムは12列のレイアウトに基づいており、ページを12等分することができます。これにより、レイアウトの設計に非常に柔軟性があります。簡単な例を見てみましょう：

<div class="container">
<div class="row">
<div class="col-4">カラム1</div>
<div class="col-4">カラム2</div>
<div class="col-4">カラム3</div>
</div>
</div>

この例では、3つの等しいカラムを作成し、それぞれが12列のうち4つの部分を占めます（4 + 4 + 4 = 12）。ピザを3等分するようなものです！

主な違い

今、あなたはおもがれているかもしれません、「BootstrapのCSS Gridは何が特別なの？」。ここであなたに教えます - それはすべてシンプルさとパワーについてです。従来のCSSレイアウトとは異なり、Bootstrapのグリッドシステムは以下の点で優れています：

flexboxを使用し、より柔軟で反応性があります
クイックなレイアウト作成のための簡単なクラスを提供します
異なるスクリーンサイズに対応するための内蔵の反応性があります

3つのカラム

もっと興味深いレイアウトを作成しましょう。異なるサイズの3つのカラムを考えてみます：

<div class="container">
<div class="row">
<div class="col-3">サイドバー</div>
<div class="col-6">メインコンテンツ</div>
<div class="col-3">右パネル</div>
</div>
</div>

この例では、サイドバーと右パネル（それぞれ3列）と、中央に大きなメインコンテンツエリア（6列）があります。リビングルームの壁の中央に大きなテレビを据え、両側に書架があるようなものです！

反応性

Bootstrapのグリッドの最も素晴らしい機能の1つは、その反応性です。私たちのレイアウトを異なるスクリーンサイズに簡単に適応させることができます。見てみましょう：

<div class="container">
<div class="row">
<div class="col-12 col-md-6 col-lg-4">カラム1</div>
<div class="col-12 col-md-6 col-lg-4">カラム2</div>
<div class="col-12 col-md-12 col-lg-4">カラム3</div>
</div>
</div>

このレイアウトは、小さなスクリーンでは垂直に積み上がり、中程度のスクリーンでは2列になり、大きなスクリーンでは3列になります。形状が変わるウェブサイトのようなものです！

例

簡単な反応型ブログレイアウトを作成しましょう：

<div class="container">
<div class="row">
<div class="col-12 col-lg-8">
<h1>私の素晴らしいブログ投稿</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>
<div class="col-12 col-lg-4">
<h2>最近の投稿</h2>
<ul>
<li>投稿1</li>
<li>投稿2</li>
<li>投稿3</li>
</ul>
</div>
</div>
</div>

このレイアウトでは、小さなスクリーンではメインコンテンツとサイドバーが積み上がり、大きなスクリーンでは並んで表示されます。本がどのように持つかによってページが並び替わるようなものです！

折り返し

時々、コンテンツがグリッドの幅を超えると、次の行に折り返すことがしたい場合があります。Bootstrapはこれを非常に簡単にします：

<div class="container">
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>9 + 4 = 13 > 12のため、この4列幅のdivは新しい行に折り返されます。</div>
<div class="col-6">.col-6<br>次のカラムは新しい行に続きます。</div>
</div>
</div>

この例では、カラムが12列の制限を超えると自動的に次の行に折り返されます。テトリスでレイアウトを遊ぶようなものです！

開始位置

私たちはカラムの開始位置をグリッド内で制御することもできます：

<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 class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
</div>

offset-*クラスを使用してカラムを右に移動させることができます。コンテンツがレースで先頭に立つようなものです！

自動カラム

Bootstrapは柔軟な、自動サイズのカラムもサポートしています：

<div class="container">
<div class="row">
<div class="col">1/3</div>
<div class="col-6">2/3 (広い)</div>
<div class="col">3/3</div>
</div>
</div>

ここでは、最初と最後のカラムが自動的に中央のカラムの周りにサイズ調整されます。空間に合わせて調整する智慧の家具のようなものです！

ネスト

私たちはグリッド内にグリッドをネストして、より複雑なレイアウトを作成することもできます：

<div class="container">
<div class="row">
<div class="col-sm-9">
レベル1: .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のグリッドシステムは非常にカスタマイズ可能です。カラムの数、ギャップ、ブレイクポイントを調整してニーズに合わせることができます。以下は、Sassを使用してグリッドをカスタマイズする例です：

$grid-columns: 15;
$grid-gutter-width: 20px;

@import "bootstrap/scss/bootstrap";

これにより、デフォルトの12列のグリッドを15列に変更し、ギャップの幅を調整します。自分のデジタル都市の建築家のようなものです！

ギャップ

Bootstrap 5はギャップの概念を導入し、カラム間のスペースを制御することができます：

<div class="container">
<div class="row gy-5">
<div class="col-6">
<div class="p-3 border bg-light">カスタムカラムパディング</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">カスタムカラムパディング</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">カスタムカラムパディング</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">カスタムカラムパディング</div>
</div>
</div>
</div>

gy-5クラスは行間に垂直スペースを追加します。レイアウトの要素間に息を入れさせるようなものです！

結論

そして、ここまでがBootstrapのCSS Gridシステムの旅です。基本的なレイアウトから反応型デザイン、ネスト、カスタマイズまで、あなたはウェブプロジェクトのための素晴らしいレイアウトを作成する力を持っています。

練習は完璧を生みます。これらの概念を試してみて、すぐにプロのようにレイアウトを作成できるようになるでしょう！幸せなコーディングをし、あなたのグリッドが常に完璧に整っていることを祈っています！?

Credits: Image by storyset