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

現行最新版（Bootstrap 5）講座をリリースしました

→Bootstrap 5講座のご受講はこちら

吉田先生

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

シンプルなレイアウトのページを作る
navbar
big image
card
footer
実際に作ってみる
まとめ

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

ここまでで、グリッドシステムについて理解を深めてきました。次は、グリッドシステムを使用してシンプルなレイアウトのページを作成する手順を見ていきましょう。まず、一般的によく使われるレイアウトには以下のようなものがあります。

今回は、以下のように２カラムと３カラムが１つのページに混在するレイアウトに挑戦します。一般的なWebページのレイアウトですね。このレイアウトのページに設置するコンポーネント（ナビゲーションバーやボタンなどのパーツ）についても学んでいきます。

◎navbar

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

「Get started」を押下して、サイドメニュー内「Components」をクリックしましょう。

テンプレートや、カスタマイズ用のコードが用意されています。そしてnavbarの項目ををクリックします。

コンポーネントの探し方

次のページにはボタンやアラートなど様々なコードのサンプルが掲載されています。今回はアラート機能を例にします。検索ボックスに「alert」と入力します。候補がいくつか表示されます。今回はAlert/Exampleを選択してみましょう。

するとアラート機能のサンプルと下部にサンプルコードが表示されます。使用したいサンプルコードをコピーして、ペーストします。

サンプルコードの使い方は、そのテンプレートをコピペで貼り付けるだけです。
例えばナビゲーションバーを作りたいのであれば、「navbar」と検索してそのコードを貼り付けるだけです。以下のコードを貼り付けてみましょう。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

すると以下のようなナビゲーションバーを作る事が出来るのです。

また、レスポンシブ対応になっていて画面サイズが小さくなると、ハンバーガーメニューに切り替わります。とても便利ですね。

◎Big image

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

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

上記コードは、画像をレスポンシブ対応させるためのコードです。「img-fluid」というCSSクラスを記述すると、親要素の幅に合わせて、画像のサイズが拡大・縮小します。

◎card

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

◎footer

自分で１からHTML/CSSを書いていると、footerが画面最下部から少し浮いた状態になってしまうことがあります。これは、コンテンツの量が少ない為に起こることです。ですが、Bootsstrapで用意されているテンプレートを使えば、コンテンツの量に関わらずfooterを画面最下部に固定する事が出来ます。方法は、以下のコードを使うだけです。

<footer class="footer"></footer>

◎実際につくってみる

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

ナビゲーションの作成

最初に、ナビゲーションバーを設置します。先ほどの「navbar」の項目を参考にHTMLファイルにBootstrapサイトの「Supported content」の項目のテンプレートをコピペしてください。ただし、このテンプレートは白いナビゲーションバーのテンプレートです。カスタマイズ用のCSSクラスを使いダークグレーのナビゲーションバーにしてみましょう。コードの変更箇所は以下です。

ビッグイメージの配置

次に、Bigimageを設置しましょう。「container-fluid」で「img-fluid」を囲います。コードは以下です。これで、画面幅いっぱいに画像が広がります。

<div class="container-fluid img-hidden">
  <img src="image/a.jpg" class="img-fulied">
</div>

上記img-fluid部分は、オリジナルのCSSを記述するためのCSSクラスです。このクラス名は、任意のもので構いません。オリジナルのCSSを記述する理由は、サイズの大きい画像などの場合には、親要素（コンテナ）に高さを設定して、はみ出した部分は非表示にするようにしないと、画像が大きすぎるサイズで表示されてしまうからです。オリジナルのCSSの記述は、以下のようにしてください。

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

カードの配置

次は、コンテンツ部分です。まず、カードを横並びで３つ配置してみましょう。カード間に余白を付けられるテンプレートを使います。以下`.../100px200/`部分は、画像の指定を行う所なので任意の画像を入れてください。

<div class="container container-m">
<div class="card-deck">
  <div class="card">
   <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px200/" alt="Card image cap">
    <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>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px200/" alt="Card image cap">
    <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>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>
</div>

カードデザインの為のテンプレートを、コンテナで囲っています。コンテナには、CSSを追加するためのクラスを記述しています。これは、テンプレートのままだとbigimageとぴったりとくっついてしまうので余白を指定する必要があるからです。CSSは以下のように記述します。

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

2カラム部分の作成

次に、２カラムレイアウト部分を作っていきます。これは、前章で学んだグリッドシステムを使用します。以下のように、カラムを作成しましょう。

<div class="container">
  <div class="row">
    <div class="col-md-4  img-hidden">
      <img src="image/c.jpg" alt="img" class="img-fulied">
    </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>

こちらも、CSSを追加する必要があるのですが、bigimageの時と同じCSSを使う形になるので「col-md-4」のdivにbigimageと同じクラスを追加しています。bigimageで使う為に書いたCSSを使いまわすイメージです。また、余白をとる為カードのコンテナにCSSを追加します。

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

↓

HTMLに上のクラスcontainer-mを追加します。

<div class="container container-m">
  <div class="row">
    <div class="col-md-4  img-hidden">
      <img src="image/c.jpg" alt="img" class="img-fulied">
    </div>
    ...

3カラムのレイアウト

次は、３カラムレイアウトです。以下のように、作成します。今回は、中身のコンテンツは全て画像にしました。こちらでも「img-hidden」クラスを「col-md-4」のdivに追加しましょう。また、余白をとりたいので先ほどの「container-m」クラスを使いまわします。コンテナのdivに追加してください。

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

footerの配置

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

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

そのままだと、背景色が薄くサイト全体を見たとき統一感がなくなってしまうので、色をCSSで変えます。また、テキストの位置も真ん中にしましょう。

完成

これで、Webページが完成しました。シンプルですが、統一感のあるサイトがとても短時間で作る事が出来ました。また、ここまでの章でBootstrapの基本を、身につけることが出来たと思います。Bootstapにはこの他にも、たくさんコンポーネントがありますし、カスタマイズも行う事が出来ます。次回からは、そちらを学んでいきましょう。

◎まとめ

・グリッドシステムは、カスタマイズして使う事が出来る

・Bootstrapのテンプレート（コンポーネント）は、基本的にレスポンシブに対応している

・オリジナルのCSSクラスを追加して、コンポーネントのデザインなどをカスタマイズする

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

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

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

無料講座一覧を見る