Bootstrap5のレイアウト方法をマスターしよう【図解たっぷりBootstrap5入門】

吉田先生

Bootstrapを使用すればクオリティの高いWebページの作成が可能です。
少し慣れてきたら本レッスンで紹介するComponentや、独自CSSクラスを組み合わせて使用してみてください。デザイン性がぐっと高まります。

シンプルなレイアウトのページを作る
Webページの構成とパーツ
【実習】ページを作ってみよう
◎まとめ

シンプルなレイアウトのページを作る

ここまでで、グリッドシステムについて理解を深めてきました。
次は、グリッドシステムを使用してシンプルなレイアウトのページを作成する手順を見ていきましょう。

Webページの構成とパーツ

一般的によく使われるWebサイト/ページのレイアウトには以下のようなものがあります。

今回は、以下のように２カラムと３カラムが１つのページに混在するレイアウトに挑戦します。
よく見かけるWebページのレイアウトです。

このレイアウトのページに設置する、Bootstrapのコンポーネントについても学んでいきます。

Bootstrapのコンポーネント

Bootstrap5の公式ドキュメントでは、ボタンやアラートなど様々なコードの書き方が掲載されています。

ボタンやナビゲーションバーなど、ページを構成するためのパーツのことをComponents（コンポーネント）と呼びます。
パソコンで見ている場合は左側のメニュー、Componentsというグループがあると思います。

URL：https://getbootstrap.jp/docs/5.3/getting-started/introduction/

Components下では、Accordion、Alerts、Badge……などなど、よくWebページに使われているパーツごと別れています。

例えば、アラート機能を加えたい時は「Alerts」をクリックしてページを開きます。
そうすると、アラート機能のサンプルが表示されます。

サンプル（見本）の下には、サンプルコード・使い方の解説が表示されます。

サンプルを見ながら、使いたいデザインを選ぶ。
そのコードをコピーして、作成中のファイルにペーストすれば、あっという間に実装できるというわけです。

以下では、その方法を見ていきます。

ナビゲーションバー（navbar）

タグを書き、リンクタグを書き…と自分で１から作ると手間がかかるナビゲーションバー（メニュー）。
Bootstrapで用意されているテンプレートを使えば簡単です。

ナビゲーションバーのテンプレートコードも、公式ドキュメントから取得する事が出来ます。
Componentsグループから「Navbar」の項目をクリック。

ナビゲーションバーのコードがあるページが開きます。

2番めの見出し、サポートコンテンツのところを見てみてください。
ナビゲーションバーの見本、見本を実装するのに使うHTMLのコードがあります。

URL：https://getbootstrap.jp/docs/5.3/components/navbar/

このコードをコピー・アンド・ペーストで貼り付けるだけで、制作中のHTMLに掲載されているアイテムが追加できます。
以下のコードです。

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

これを自分のhtmlファイルに貼り付けると、以下のようなナビゲーションバーを作る事が出来ます。

また、Bootstrapテンプレートのナビゲーションバーは、最初からレスポンシブ対応。
画面サイズが小さくなると、ハンバーガーメニューに切り替わります。とても便利ですね。

カードデザイン（card）

Bootstrapは、カードデザインにも対応しています。
カードデザインとは、以下のようなものです。

カードデザインは、シンプルで、分かりやすく美しいのが特徴です。

カードデザインに使うテンプレートコードやカスタマイズ方法も、Bootstrap公式ドキュメントに用意されています。
こちらはComponentsグループの中の、Cardのページです。

URL：https://getbootstrap.jp/docs/5.3/components/card/

ビッグイメージ

ビッグイメージとは、ヒーローエリアと呼ばれる部分に配置される画像の事です。

ヒーローエリアは、サイトを訪れたユーザーが最初に見る領域の事。ファーストビューとも言います。

最初に開いたページで、画像が大きく使われているというサイトをよく見かけると思います。
それも、Bootstrapを使えばCSSクラスの指定だけで実現できます。

<img src="images/●●●.jpg" class="img-fluid" alt="...">

まず、『2.Bootstrapのグリッドを理解する』でも登場したimg-fluidクラス。
img-fluidクラスは、max-width（最大幅）が100％の指定がされているので、親要素の幅に合わせて画像のサイズが縮小します。
スマホ幅の時にもはみ出さず、親要素の幅ピッタリになる＝画像がレスポンシブ対応するようになります。

Big imageのような場合は、もう一つw-100というクラスも加えると良いです。

<p><img src="images/●●●.jpg" class="w-100 img-fluid" alt="..."></p>

w-100クラスには、width: 100%;のスタイル指定が入っています。
こちらを加えておくことで、親要素の幅よりも画像が小さかったときも、画像が途切れずに拡大して表示されます。

【実習】ページを作ってみよう

では、ここまでで学んだコンポーネントやグリッドシステムを使って、シンプルなレイアウトのページを作成してみましょう。

今回作成するレイアウトの完成形はこちらです。
２カラム・３カラムが混在したレイアウトで、ナビゲーションバーやカードデザインも取り入れてみます。

皆さんもテキストエディタを使ってやってみてください。
layout.htmlなど分かりやすい名前を付け、bootstrapのcssとjsコードを貼り付けておいてください。

layout.html

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>レイアウト方法</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
  </head>
  <body>


    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
  </body>
</html>

使用している画像は【2.Bootstrapのグリッドを理解する】の素材内、imagesフォルダの物です。
ご自身でお好きな写真を用意していただいても構いません。

1.ナビゲーションの作成

最初に、ナビゲーションバーを設置します。
Navbarのページ、見出し“サポートコンテンツ ”の下にあるテンプレートコードをコピーしてください。

新しく作ったlayout.htmlの、<body>タグの下にペーストします。
ファイルを上書き保存して、ブラウザで表示を確認してみましょう。

上図のように薄いグレーベースのナビゲーションが表示されていたら成功です。

2.ビッグイメージの配置

次に、Bigimageを設置しましょう。
先程追加したnavタグの下に、imgタグでBigimageに使いたい画像を呼び出します。

どんな画面幅でも、画像が幅いっぱいに表示されるように、img-fluidクラスとw-100クラスを指定します。

layout.html

<img src="images/a.jpg" class="img-fluid w-100">

ブラウザで表示を確認してみましょう。

見本よりも、かなり画像が縦に長く表示されていますね。
この画像の高さを指定するために、自分でもクラスを作ってCSSを設定してみましょう。

独自のスタイル指定を追加する

【1.オリジナルのCSSクラス作成】

画像の高さを調整しやすいよう、画像をdivタグで囲います。

divタグには、オリジナルのCSSを記述するためのimg-hiddenというCSSクラスを加えます。
（このオリジナルのクラス名は、任意のものに変更して頂いても構いません。）

layout.html

<div class="img-hidden">
  <img src="images/a.jpg" class="img-fluid w-100">
</div>

Bootstrapで用意されているクラスだけではなく、オリジナルのimg-hiddenクラスを作ってCSSを記述する理由は、デザイン的に調整が必要な部分が出てくるためです。

今回の場合ですと、a.jpgは大きい画像を使用しています。
画像が大きすぎるサイズで表示されてしまわないよう、cssで親要素（コンテナ）に高さを設定して、はみ出した部分は非表示にするように設定する必要があります。

【2.スタイル指定を記述する】

BootstrapのCSSとは別に、オリジナルのスタイルを書くcssファイルを作成しましょう。
ファイル名は何でも構いませんが、解説では「layout.css」にします。

作成したCSSファイルを使って、img-hiddenクラスに対するスタイル指定を書きます。
以下のように記述してください。

layout.css

.img-hidden {
  max-height: 300px;
  overflow: hidden;
}

【3.独自CSSファイルの読み込み】

components.htmlから、作ったcomponents.cssを読み込みます。
オリジナルCSSファイルは、bootstrap.min.cssの下で読み込んでください。

components.html

<!DOCTYPE html>
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>レイアウト方法</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
    <!-- オリジナルCSSの読み込み -->
    <link rel="stylesheet" type="text/css" href="components.css">
  </head>
  <body>
    ...

ファイルを保存して、ブラウザで表示を確認してみましょう。
追加したCSSで、下図のように画像の高さが短くなっていれば成功です。

3.カードデザインの追加

ここからは、コンテンツ部分です。
Bigimageの下に、カードを横並びで３つ配置してみましょう。

【1.コンテナの用意】

PCモニターでも横いっぱいにカードが広がると、ちょっと見にくいですね。
あらかじめbootstrapのコンテナを用意して、最大幅を設定しておきましょう。

ビッグイメージの下に、divタグを追加し、containerクラスを指定します。

components.html

<div class="img-hidden">
    <img src="images/a.jpg" class="img-fluid w-100">
</div>
<div class="container">

</div>

【2.テンプレートコードの貼り付け】

用意したdivの中に、公式ドキュメントからカードデザインのテンプレートコードを貼り付けます。

Cardのページを開き、右側にある項目（ページ内メニュー）から「グリッドカード」をクリック。
スクロールダウンしていくと下図のように、薄いグレーのフッターが付いたカードレイアウトがあります。

URL：https://getbootstrap.jp/docs/5.0/components/card/

こちらのコードをコピー。
components.htmlに貼り付けてください。

この段階では、ブラウザで見ると以下のようになります。

【3.見た目を整える】

下記２点を編集して、見た目を整えます。

３枚のカードの画像を設定する（imgタグに画像パスを入れる）
コンテナのdivにオリジナルクラスcontainer-mを加える。

components.html

<div class="container container-m">
    <div class="row row-cols-1 row-cols-md-3 g-4">
        <div class="col">
            <div class="card h-100">
                <img src="images/b.jpg" class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                </div>
                <div class="card-footer">
                    <small class="text-body-secondary">Last updated 3 mins ago</small>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card h-100">
                <img src="images/b.jpg" class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
                </div>
                <div class="card-footer">
                    <small class="text-body-secondary">Last updated 3 mins ago</small>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card h-100">
                <img src="images/b.jpg" class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
                </div>
                <div class="card-footer">
                    <small class="text-body-secondary">Last updated 3 mins ago</small>
                </div>
            </div>
        </div>
    </div>
</div>

オリジナルクラスオリジナルクラスcontainer-mを加えたのは、テンプレートのままだとbigimageとぴったりとくっついてしまうため。
container-mを使って、余白を指定することで間隔を作ります。

components.css

.container-m {
  margin-top: 80px;
}

4.２カラム部分の作成

カードの下に、２カラムレイアウト部分を作っていきます。

これは、前回までのレッスンで学んだグリッドシステムを使用して作ります。

以下のように、カラムを作成しましょう。
画像は、はみ出さないようimg-fluidクラスを加えます。

components.html

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <img src="images/c.jpg" alt="img" class="img-fluid">
    </div>
    <div class="col-md-8">
      <h1>Sample Text</h1>
      <p>Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text</p>
    </div>
  </div>
</div>

こちらも、上のカード部分とぴったりとくっついてしまっています。
カード部分の時と同じく、margin-topを追加して間隔をあけたいですね。

追加したいCSSはcontainer-mクラスと同じ。
ですので、このクラスをdivタグに追加してしまいましょう。

components.html

<div class="container container-m">
  <div class="row">
    <div class="col-md-4">
      <img src="images/c.jpg" alt="img" class="img-fluid">
    </div>
    ...以下略

すでに作成しているクラスを活用することで、作業時間を短縮し、コードもすっきりと仕上げられます。

5.３カラムのレイアウト

次は、３カラムレイアウトです。今回は中身のコンテンツは全て画像にしました。

こちらでも画像にはimg-fluidクラスを指定します。
また、余白をとるために自作したcontainer-mクラスも使います。

components.html

<div class="container container-m">
  <div class="row">
    <div class="col-md-4">
      <img src="images/d.jpg" alt="img" class="img-fluid">
    </div>
    <div class="col-md-4">
      <img src="images/d.jpg" alt="img" class="img-fluid">
    </div>
    <div class="col-md-4">
      <img src="images/d.jpg" alt="img" class="img-fluid">
    </div>
  </div>
</div>

6.footerの配置

最後に、最下部にフッターを作ります。
まずはシンプルにHTMLを書いてみましょう。

layout.html

<footer>
  © 2023 Bootstrap test
</footer>

左下に小さく表示されています。
そのままだと、非常に見にくいですね。

footerというクラスを新たに作り、オリジナルのcssファイルを使って背景色を設定しましょう。
また、テキストの位置を真ん中に設定し、少しpaddingを加えます。

layout.html

<footer class="footer">
    © 2023 Bootstrap test
</footer>

layout.css

.footer{
  background-color: #f8f9fa;
  text-align: center;
  padding: 1rem;
}

footerにもcontainer-mクラスを追加して、余白を持たせておきましょう。

layout.html

<footer class="footer container-m">
    © 2023 Bootstrap test
</footer>

7.完成

これで、Webページが完成しました。
シンプルですが、統一感のあるサイトがとても短時間で作る事が出来ました。

また、ここまでの章でBootstrapの基本を、身につけることが出来たと思います。
Bootstapにはこの他にも、たくさんコンポーネントがありますし、カスタマイズも行う事が出来ます。

次回からは、そちらを学んでいきましょう。

今回の実習見本

今回の実習で作ったhtmlとcssを素材としてアップロードしています。
確認用にご利用下さい。

なお、アップロードしているフォルダ内に画像は含まれていません。
ブラウザで表示確認をする際には、作成中のフォルダにファイルを移動させる・imgタグのパスを直すなどしてご確認下さい。

◎まとめ

Bootstrapのコンポーネントは、テンプレートコードを貼り付けるだけで実装可能。
Bootstrapのテンプレート（コンポーネント）は、基本的にレスポンシブに対応している
オリジナルのCSSクラスを追加することで、より自由度の高いカスタマイズができる

前のレッスン次のレッスンレッスン一覧へ

無料ビデオ講座のお知らせ

Skillhub [スキルハブ]では無料の動画講座を多数公開しています。他校だと数万円するような講座が無料で受講できます。

無料講座一覧を見る

コース素材一覧

レッスン素材一覧

practice-compone...