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

吉田先生

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

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

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

まず、一般的によく使われるレイアウトには以下のようなものがあります。

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

このレイアウトのページに設置するコンポーネント（ナビゲーションバーやボタンなどのパーツ）についても学んでいきます。

navbar

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

ナビゲーションバーのテンプレートは、Bootstrapサイトで取得する事が出来ます。
Bootstrapサイトを開いて、ヘッダーナビゲーションから「ドキュメント」をクリック。

サイドメニュー内Componentsをクリックしましょう。

Componentsの中には、テンプレートや、カスタマイズ用のコードが用意されています。
「navbar」の項目をクリックして、ナビゲーションのコードがあるページを開いてください。

ページ内には、テンプレートコードがいくつか掲載されています。
コードをコピー・アンド・ペーストで貼り付けるだけで、制作中のHTMLに掲載されているアイテムが追加できます。

navbarのページで、upported contentという見出しの下にあるテンプレートコードを使ってみましょう。
以下のコードです。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <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="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <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テンプレートのナビゲーションバーは、最初からレスポンシブ対応。
画面サイズが小さくなると、ハンバーガーメニューに切り替わります。とても便利ですね。

◎コンポーネントの探し方

「Components」にはボタンやアラートなど様々なコードのサンプルが掲載されています。

今回はアラート機能を例にします。
検索ボックスに「alert」と入力します。
候補がいくつか表示されるので、今回はAlert/Exampleを選択してみましょう。

するとアラート機能のサンプルと下部にサンプルコードが表示されます。

使用したいコードをコピーして、作成中のファイルにペースト。
ナビゲーションバーの下に張り付けると下図のようになりますよ。

Big image

Big imageとは、ヒーローエリアと呼ばれる部分に配置される画像の事です。

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

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

まず、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%;のスタイル指定が入っています。
こちらを加えておくことで、親要素の幅よりも画像が小さかったときも、画像が途切れずに拡大して表示されます。

card

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

カードデザインは、シンプルで、分かりやすく美しいのが特徴です。
カードデザインも、Navbarと同じくBootstrap公式サイトの「Components」にテンプレートが用意されています。

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

では、ここまでで学んだコンポーネントやグリッドシステムを使って、シンプルなレイアウトのページを作成してみましょう。
今回作成するレイアウトの完成形はこちらです。
２カラム・３カラムが混在したレイアウトで、ナビゲーションバーやフッターの他、カードデザインも取り入れてみます。

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

layout.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title></title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>



  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>

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

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

最初に、ナビゲーションバーを設置します。
先ほどの「navbar」の項目を参考に、HTMLファイルに「Supported content」の下にあるテンプレートコードをコピーしてください。

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

上図のように薄いグレーベースのナビゲーションが表示されていたら成功です。
カスタマイズ用のCSSクラスを使い、ダークグレーのナビゲーションバーに変更してみましょう。
コードの変更箇所は以下です。

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

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

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

layout.html

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

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

見本よりも、かなり画像が縦に長く表示されていますね。
この画像の高さを指定するために、自分でもクラスを作って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で親要素（コンテナ）に高さを設定して、はみ出した部分は非表示にするように設定する必要があります。

 

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

オリジナルCSSファイル（layout.css）へ、以下のように記述してください。

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

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

layout.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title></title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <!-- オリジナルCSSの読み込み -->
  <link rel="stylesheet" type="text/css" href="layout.css">
</head>
<body>

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

3.カードの配置

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

カードが広がりすぎると見にくいので、広がりすぎないようにコンテナ(.container)のdivを用意します。

layout.html

<div class="container">

</div>

用意したdivの中に、カードを入れます。
https://getbootstrap.jp/docs/5.0/components/card/「Grid cards」項目の最後に掲載されているコードをコピー・アンド・ペーストします。

ここまででベースは出来ました。
下記２点を編集して

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

layout.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 img-fluid" 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-muted">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-muted">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-muted">Last updated 3 mins ago</small>
        </div>
      </div>
    </div>
  </div>
</div>

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

layout.css

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

4.２カラム部分の作成

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

これは、前章で学んだグリッドシステムを使用して作ります。
以下のように、カラムを作成しましょう。

layout.html

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

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

追加するCSSプロパティは「container-m」と同じですから、このクラスをdivタグに追加してしまいましょう。
先ほど作成したクラス「container-m」を再利用するイメージです。

layout.html

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

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

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

こちらでも「img-hidden」クラスを「col-md-4」のdivに追加しましょう。
また、余白をとりたいので先ほどの「container-m」クラスも使います。

layout.html

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

6.footerの配置

最後に最下部固定のフッターを作ります。
以下のような、コードを書きましょう。

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

そのままだと、サイト全体を見たときに見にくいですよね。
オリジナルのcssファイルを使って色を設定しましょう。
また、テキストの位置も真ん中に設定します。

 

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

layout.html

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

7.完成

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

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

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

◎まとめ

  • グリッドシステムは、カスタマイズして使う事が出来る
  • Bootstrapのテンプレート（コンポーネント）は、基本的にレスポンシブに対応している
  • オリジナルのCSSクラスを追加して、コンポーネントのデザインなどをカスタマイズする
前のレッスン 次のレッスン レッスン一覧へ

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

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

無料講座一覧を見る

×