Bootstrap - ガッタ：完璧なスペースの秘密兵器

こんにちは、未来のウェブデザインスーパースターたち！? 私は、このエキサイティングな旅であなたのガイドを務めることができることに胸を躍らせています。Responsiveデザインが「無反応な学生に大声で話す」ことを意味していた時代を覚えている（具体的な年数は言いたくないけど、とにかく久しい?）コンピュータサイエンスの教師として、このゲームチェンジングな概念をあなたたちと共有するのが待ちきれません。

Bootstrap - Gutters

まずはガッタとは？

それでは、まず基本から始めましょう。ウェブデザインの世界では、ガッタとはレイアウト内の列間のスペースのことです。これらは、コンテンツが狭いと感じさせないための「息苦しい空間」のようなものです。エレベーターの中で人々が適度な距離を保つ礼儀正しい肘の長さのように、快適さのために必要ですが、車内全体に向かって叫ぶほどの広さではありません！

さあ、Bootstrapがガッタを扱うことをどれほど簡単にできるか探ってみましょう。

どのように動作する

Bootstrapのガッタシステムは、いくつかの主要な原則に基づいています：

ガッタは水平パディングを使用して作成されます。
行にはコンテンツを並べるためのネガティブマージンがあります。
列にはポジティブパディングがあり、スペースを作成します。

簡単な例を見てみましょう：

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

この設定では、Bootstrapは自動的に列間にガッタを追加します。魔法のようですが、実際にはその動作を理解できるので、より素晴らしいです！

水平ガッタ

さあ、水平ガッタを手を汚して見てみましょう。Bootstrapは、ガッタの幅を制御するためのクラスを提供しています。クラスはgx-*のパターンに従い、*は0から5までの数です。

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

この例では、gx-5が広い水平ガッタを作成します。食卓でのコンテンツに少し余裕を与えるようなものです。この値を調整して、デザインに最適なバランスを見つけることができます。

オーバーフロ機能の使用

時々、ガッタをコンテナの境界を超えて延長したい場合があります。Bootstrapはoverflow-hiddenクラスでそれをサポートしています：

<div class="container overflow-hidden">
<div class="row gx-5">
<div class="col">
<div class="p-3 border bg-light">カスタム列パディング</div>
</div>
<div class="col">
<div class="p-3 border bg-light">カスタム列パディング</div>
</div>
</div>
</div>

この便利なトリックにより、ガッタがコンテナの端でも一貫して見えることを確保します。テーブルクロスが全ての側で均一に垂れていることを確認するようなものです！

垂直ガッタ

水平スペースは素晴らしいですが、垂直スペースはどうでしょうか？gy-*クラスが登場します：

<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が行間に垂直スペースを追加します。カードや画像のグリッドに一貫したスペースを作成するのに最適です。

水平および垂直ガッタ

両方の好处を得たい場合は、水平および垂直ガッタを組み合わせることができます：

<div class="container">
<div class="row g-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>

g-5クラスは、gx-5およびgy-5の短縮形です。水平および垂直スペースの完美なブレンドでデザインを調味するようなものです！

行列ガッタ

Bootstrapは、行列のガッタも設定できます。これは、変数の列数を扱う際に特に便利です：

<div class="container">
<div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
<div class="col">
<div class="p-3 border bg-light">行列列</div>
</div>
<div class="col">
<div class="p-3 border bg-light">行列列</div>
</div>
<div class="col">
<div class="p-3 border bg-light">行列列</div>
</div>
<div class="col">
<div class="p-3 border bg-light">行列列</div>
</div>
<div class="col">
<div class="p-3 border bg-light">行列列</div>
</div>
</div>
</div>

この例では、異なるスクリーンサイズに応じて異なるガッタサイズを持つ応答型レイアウトを作成します。小さなアパートと広い家での家具の配置を異なるように適応させるのと同じです！

ガッタなし

時々、ガッタを完全に削除したい場合があります。Bootstrapはg-0クラスでそれを簡単にします：

<div class="row g-0">
<div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

これは、列間にスペースのない无缝なレイアウトを作成します。端から端までのデザインや、コンテンツが無断続けに流れる必要がある場合に最適です。

ガッタメソッドのチートシート

ここに、カバーしたすべてのガッタメソッドを要約した便利な表を示します：

メソッド	クラス	説明
水平ガッタ	`gx-*`	列間に水平スペースを追加
垂直ガッタ	`gy-*`	行間に垂直スペースを追加
両方方向	`g-*`	水平および垂直ガッタを追加
ガッタなし	`g-0`	すべてのガッタを削除
応答型ガッタ	`g-lg-`, `gx-md-`, など	特定のブレイクポイントでガッタを適用
オーバーフロ非表示	`overflow-hidden`	ガッタが水平スクロールを作成しないようにする

そして、それで全部です、皆さん！あなたは今、Bootstrapレイアウトのスペースをプロのように操作する知識を持ちました。素晴らしいデザインは、要素そのものと同じに、要素間のスペースに関連しています。ですから、練習を続け、好奇心を持ち、異なるガッタサイズで実験を恐れずに！完璧なレイアウトは、数えるほどのクラスからすぐに見つかるでしょう！

最後に、ある学生が私に言ったことが思い出されます。ガッタについて学ぶことで、ウェブデザインを全く新しい視点で見ることができたと言っていました。「これまでずっとテトリスをやっていたみたいで、ブロック間のスペースを調整できることを発見した！」?

練習を続け、好奇心を持ち、異なるガッタサイズで実験を恐れずに。完璧なレイアウトは、数えるほどのクラスからすぐに見つかるでしょう！

Credits: Image by storyset