Webレイアウトをマスターしよう！Bootstrapグリッドシステムのネストされた行

2024-07-01

Bootstrap グリッドシステムにおけるネストされた行

ネストされた行を使用すると、より複雑なレイアウトを作成できます。これは、既存の列内に新しい行と列を追加することで行うことができます。これにより、サイドバー付きのメインコンテンツ領域、複数の列を含むヘッダーなどを作成できます。

ネストされた行を作成するには、次の手順に従います。

親となる列に .row クラスを追加します。
ネストされた行内に、必要な数の列を作成します。各列には、.col-* クラスを追加する必要があります。列の幅は、このクラスによって決まります。
ネストされた行内のコンテンツを追加します。

例

<div class="container">
  <div class="row">
    <div class="col-sm-8">
      <div class="row">
        <div class="col-sm-6">
          コンテンツ 1
        </div>
        <div class="col-sm-6">
          コンテンツ 2
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      サイドバー
    </div>
  </div>
</div>

この例では、 .col-sm-8 列内にネストされた行が作成されています。このネストされた行には、 .col-sm-6 列が2つ含まれています。つまり、メインコンテンツ領域は2つの等幅の列に分割されます。

ネストされた行を使用する際の注意点

ネストされた行内の列の合計幅は、親列の幅を超えてはいけません。
ネストされた行は、Bootstrapのグリッドシステムの他のすべてのルールと同様に機能します。
ネストされた行を使用すると、レイアウトが複雑になる可能性があります。ネストを多用しすぎると、コードが読みづらくなる可能性があるため、注意が必要です。

ネストされた行を使用した Bootstrap グリッドシステムのサンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ネストされた行の例</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-sm-8">
        <div class="row">
          <div class="col-sm-6">
            <h2>コンテンツ 1</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec diam eget ligula porta auctor. Maecenas sit amet lectus ut lacus ullamcorper hendrerit.</p>
          </div>
          <div class="col-sm-6">
            <h2>コンテンツ 2</h2>
            <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam leo vel augue faucibus, eget ullamcorper quam tincidunt.</p>
          </div>
        </div>
      </div>
      <div class="col-sm-4">
        <aside>
          <h2>サイドバー</h2>
          <ul>
            <li><a href="#">リンク 1</a></li>
            <li><a href="#">リンク 2</a></li>
            <li><a href="#">リンク 3</a></li>
          </ul>
        </aside>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>

このコードを実行すると、次のようになります。

メインコンテンツ領域は、2つの等幅の列に分割されています。左側の列には見出しと段落が含まれ、右側の列にはサイドバーが含まれています。

この例は、ネストされた行を使用してより複雑なレイアウトを作成する方法を示すほんの一例です。 Bootstrap グリッドシステムを使用して、さまざまなレイアウトを作成できます。

ネストされた行以外でBootstrapグリッドシステムを使用する方法

列のオフセットを使用して、列をグリッド内の特定の位置に配置することができます。これにより、サイドバー付きのメインコンテンツ領域、複数の列を含むヘッダーなどを作成できます。

<div class="container">
  <div class="row">
    <div class="col-sm-4 offset-sm-4">
      コンテンツ
    </div>
  </div>
</div>

この例では、 .col-sm-4 列が .offset-sm-4 クラスを使用してグリッドの右側4列にオフセットされています。つまり、コンテンツはグリッドの右側4列に表示されます。

グリッド列を追加することで、より複雑なレイアウトを作成できます。たとえば、3つの列を含む行を作成するには、次のコードを使用します。

<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>