HTMLとCSSで実現するBootstrap 3 全高2カラムレイアウト

2024-06-14

Bootstrap 3 で作る2列全高レイアウト

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap 3 全高2カラム</title>
  <link rel="stylesheet" href="https://getbootstrap.com/docs/4.1/getting-started/download/">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-md-6 h-100" style="background-color: #f00;">
        コンテンツ1
      </div>
      <div class="col-md-6 h-100" style="background-color: #0f0;">
        コンテンツ2
      </div>
    </div>
  </div>
</body>
</html>

CSS

このHTMLコードでは、Bootstrap 3のグリッドシステムを使って2つの列を作成しています。各列には col-md-6 クラスを付与し、幅を50%に設定しています。

また、h-100 クラスを付与することで、各列の高さを100%に設定しています。さらに、style 属性を使って、各列に背景色を設定しています。

ポイント

Bootstrap 3のグリッドシステムを使って、簡単に2つの列を作成できます。
h-100 クラスを使って、列の高さを100%に設定できます。
style 属性を使って、列に背景色やその他のスタイルを適用できます。

補足

この例では、各列のコンテンツは単純なテキストですが、実際には画像やその他のコンテンツを配置することができます。
列の高さを均等に保ちたい場合は、各列に同じコンテンツを配置する必要があります。
列の幅を変更したい場合は、col-md-* クラスの代わりに、col-md-3、col-md-4 などのように、別のサイズを指定できます。

Bootstrap 3 サンプルコード：2列全高レイアウト

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap 3 全高2カラム</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-md-6 h-100 bg-danger">
        <h2>コンテンツ1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed lectus nec augue semper gravida. Donec id elit non mi porta elementum. Maecenas sit amet quam eget eros faucibus condimentum. Nullam et magna eget ligula pulvinar ullamcorper. Sed ac quam ac orci ultricies faucibus. Nullam eget quam ac orci ultricies faucibus. Sed ac quam ac orci ultricies faucibus.</p>
      </div>
      <div class="col-md-6 h-100 bg-info">
        <h2>コンテンツ2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur arcu erat, tincidunt at enim eget, ullamcorper pharetra quam. Sed ac lectus eget quam varius semper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec eleifend, libero et mollis faucibus, quam nulla tincidunt mauris, eget ullamcorper quam orci quis quam. Sed a quam nec odio aliquam interdum.</p>
      </div>
    </div>
  </div>
</body>
</html>

bg-* クラスを使って、列に背景色を簡単に設定できます。
コンテンツには、見出し (<h2>)、段落 (<p>) などのHTML要素を配置できます。

このサンプルコードは、以下の点に注意してご活用ください。

上記のコードはあくまで一例であり、必要に応じて変更することができます。
Bootstrap 3 を利用するには、CDN から CSS ファイルを読み込む必要があります。
本サンプルコードは Bootstrap 3.4.1 を使用しています。最新のバージョンの Bootstrap を使用する場合は、CDN の URL を変更する必要があります。

Bootstrap 3 で作る2列全高レイアウト：その他の方法

方法1：Flexbox を利用する

Flexbox は、CSS3 で導入されたレイアウト機能で、柔軟なレイアウトを作成することができます。Bootstrap 3 でも Flexbox を利用することで、2列全高レイアウトを作成することができます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap 3 全高2カラム（Flexbox）</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-md-6 d-flex flex-column h-100" style="background-color: #f00;">
        <div class="flex-item">コンテンツ1</div>
      </div>
      <div class="col-md-6 d-flex flex-column h-100" style="background-color: #0f0;">
        <div class="flex-item">コンテンツ2</div>
      </div>
    </div>
  </div>
</body>
</html>

このHTMLコードでは、各列に d-flex flex-column h-100 クラスを付与することで、Flexbox レイアウトと全高レイアウトを設定しています。

方法2：Viewport 高さを利用する

Viewport 高さを利用する方法では、CSS の vh ユニットを使って、列の高さをビューポートの高さに設定します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap 3 全高2カラム（Viewport 高さ）</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-md-6 h-100" style="background-color: #f00;">
        コンテンツ1
      </div>
      <div class="col-md-6 h-100" style="background-color: #0f0;">
        コンテンツ2
      </div>
    </div>
  </div>
</body>
</html>

方法3：JavaScript を利用する

JavaScript を利用する方法では、JavaScript でウィンドウの高さを取得し、列の高さをそれに設定します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap 3 全高2カラム（JavaScript）</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-md-6" id="column1">
        コンテンツ1
      </div>
      <div class="col-md-6" id="column2">
        コンテンツ2
      </div>
    </div>
  </div>

  <script>
    const column1 = document.getElementById('column1');
    const column2 = document.getElementById('column2');

    const windowHeight = window.innerHeight;
    column1.style.height = windowHeight + 'px';
    column2.style.height = windowHeight + 'px';
  </script>
</body>
</html>