Bootstrap 5を使用した余白のない行（no gutters）の作成方法

Bootstrap 5では、行（row）クラスを使用して要素を水平方向にグリッドに配置します。通常、行の間には余白（gutters）がありますが、この余白を取り除くこともできます。

方法1: カスタムCSSを使用する方法

1. CSSファイルに次のスタイルを追加します:

.no-gutters > .col,
.no-gutters > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
}

2. 行（row）のクラスに「no-gutters」を追加します:

<div class="row no-gutters">
    <!-- コンテンツをここに追加 -->
</div>

これにより、行の両側の余白がなくなります。

方法2: Bootstrap 5の組み込みクラスを使用する方法 Bootstrap 5には、余白のない行を作成するための組み込みクラス「g-0」が用意されています。以下のように使用します:

<div class="row g-0">
    <!-- コンテンツをここに追加 -->
</div>

これにより、行の両側の余白がなくなります。

以上が、Bootstrap 5を使用して余白のない行（no gutters）を作成する方法です。これらの方法を使用することで、綺麗なレイアウトを実現することができます。詳細な情報や他のオプションについては、Bootstrap 5の公式ドキュメントを参照してください。