スマホ対応？知っておきたいBootstrap4の使い方

Webサイトを簡単にPC/スマホ両対応にすることが出来るCSSフレームワークとして、Twitter社が公開しているBootstrapがあります。CSSフレームワークとは、Webサイトのデザイン面の骨組みを提供してくれるもので、サイト構築の効率化を図れます。

CSSフレームワークは他にも多数ありますが、Bootstrapの情報がネット上には多くあるため、初心者にも使いやすくなっています。またBootstrapでは、レスポンシブデザインとなるため、同一のHTMLでPC/スマホに対応させる事が出来ます。

Bootstrap4とは？

Bootstrap4は、Twitter社製のCSSフレームワークで、javascriptによる動的処理も含まれるため、UI（ユーザーインターフェース）フレームワークとも言えます。Bootstrap3が2011/08公開から長く使われていましたが、2018/01にBootstrap4が公開されました。

Bootstrapでは、グリッドシステムという考え方が基本になります。Bootstrapのグリッドシステムとは、Webサイトの横幅を12カラムに分割し、表示領域にその12カラムでの配分を割り当てる考え方になります。例えば、サイドバーとメインコンテンツで構成されるサイトでは、サイドバー4カラム、メインコンテンツ8カラムのように割り当てる事になります。

Webサイトのスマホ対応を行なう場合、スマホの表示サイズは端末毎に異なるため、大まかなサイズの区切りでPC/スマホ/タブレットなどを分ける事になります。Bootstrap4では、5つの区分があり、各区分を分けるサイズはブレークポイントと呼ばれます。

css実装の流れとしては、対象となるHTML要素の横幅を決定し、クラス名の末尾に1-12の数値、またはautoを割り当てて、全体となる行で最大12となるように構成します。例えば.col-sm-4、.col-sm-8の要素を並べたり、.col-md-4、col-md-4、.col-md-4のように並べる事になります。全体で12カラム未満でも問題はありません。

Bootstrap4を使うには

最新のBootstrap4は公式サイトからダウンロードできます。ダウンロードしたzipファイルには複数のファイルが含まれていますが、読み込み用に使用するのは、bootstrap.bundle.min.jsとbootstrap.min.cssになります。Bootstrap4では、Popper.jsというライブラリが必要になりますが、bundle.min.jsには含まれているので、こちらを読み込むことでPopper.jsの入手は不要になります。

またBootstrap4では、jQueryを利用しているので、jQueryも必要になります。

<!-- Bootstrap4を利用する --> <link rel="stylesheet" href="css/bootstrap.min.css"> <script src="js/jquery-3.3.1.slim.min.js"></script> <script src="js/bootstrap.bundle.min.js"></script> <!-- CDNからBootstrap4を利用する --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Bootstrap4適用の基本構造

Bootstrapのcssを適用するには、タグ構成とクラス名を仕様通りにする必要があります。グリッドシステムによるレスポンシブデザインを行なう場合は、class="container"のHTML要素内に、行となるclass="row"の要素を配置し、その中にclass="col"を列として配置していきます。

<div class="container"> <div class="row"> <div class="col-2">1</div> <div class="col-2">2</div> <div class="col">2</div> </div> </div>

上の例では、各ブレークポイント毎の最大幅の固定幅で表示されます。つまり自動幅、540px、720px、960px、1140pxの5段階の幅で表示されます。常に自動幅とする場合はclass="container-fluid"を使用します。

<div class="container-fluid"> <div class="row"> <div class="col-2">1</div> <div class="col-2">2</div> <div class="col">2</div> </div> </div>

Bootstrap4でよく使われるコンテンツ

Bootstrapでは、よく使用されるタグにもデザイン変更が施されています。SEO対策で重要とされるh1〜h6タグからul、ol、dl、tableタグなどでクラスが用意されています。また画像は、class="img-fluid"で親要素の幅で表示されるレスポンシブ化が行えます。

<!-- 見出し --> <h1>h1 見出し</h1> <h2>h2 見出し</h2> <h3>h3 見出し</h3> <h4>h4 見出し</h4> <h5>h5 見出し</h5> <h6>h6 見出し</h6> <!-- h1-h6タグを使用せずに同じサイズで表示 --> <p class="h1">h1 見出し</p> <p class="h2">h2 見出し</p> <p class="h3">h3 見出し</p> <p class="h4">h4 見出し</p> <p class="h5">h5 見出し</p> <p class="h6">h6 見出し</p> <!-- h1より大きい見出し --> <p class="display-1">大きい見出し1</p> <p class="display-2">大きい見出し2</p> <p class="display-3">大きい見出し3</p> <p class="display-4">大きい見出し4</p> <!-- 文節を大きくして目立たせる --> <p>文章の中の特定の<span class="lead">センテンス</span>を大きく表示</p> <!-- 文節を背景色で目立たせる --> <p>テキストを<span class="mark">ハイライト</span>で表示する</p> <!-- リストをマークなしで表示 --> <ul class="list-unstyled"> <li>リスト1</li> <ul class="list-unstyled ml-3"> <li>子リスト1</li> </ul> <li>リスト2</li> </ul> <!-- リストを横並びで表示 --> <ul class="list-inline"> <li class="list-inline-item">メニュー1</li> <li class="list-inline-item">メニュー2</li> <li class="list-inline-item">メニュー3</li> </ul> <!-- 画像をレスポンシブ表示 --> <img src="" alt="" class="img-fluid"> <!-- 画像をサムネイル風表示 --> <img src="" alt="" class="img-thumbnail"> <!-- テーブルを表示 --> <table class="table"> <caption>テーブルの表題</caption> <thead> <tr> <th>#</th> <th scope="col">見出し</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>テーブルのセル</td> </tr> </tbody> </table> <!-- マウスオーバーで行の背景色が変わるテーブル表示 --> <table class="table table-hover"> <caption>テーブルの表題</caption> <thead> <tr> <th>#</th> <th scope="col">見出し</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>テーブルのセル</td> </tr> </tbody> </table>

Bootstrap4でよく使われるコンポーネント

Bootstrapでは、Webサイトでよく使われるHTML要素群を部品として利用できるようになっています。例えばボタンやバッチ、アラート表示、パンくずリスト、ナビゲーションメニューなどがあります。ナビゲーションメニューは、レスポンシブ対応で自動的にハンバーガーメニューになります。

<!-- ボタン 9種類 --> <button type="button" class="btn btn-primary">primary</button> <button type="button" class="btn btn-secondary">secondary</button> <button type="button" class="btn btn-info">info</button> <button type="button" class="btn btn-success">success</button> <button type="button" class="btn btn-warning">warning</button> <button type="button" class="btn btn-danger">danger</button> <button type="button" class="btn btn-light">light</button> <button type="button" class="btn btn-dark">dark</button> <button type="button" class="btn btn-link">link</button> <!-- バッジ 8色 --> <span class="badge badge-primary">primary</span> <span class="badge badge-secondary">secondary</span> <span class="badge badge-info">info</span> <span class="badge badge-success">success</span> <span class="badge badge-warning">warning</span> <span class="badge badge-danger">danger</span> <span class="badge badge-light">light</span> <span class="badge badge-dark">dark</span> <!-- バッチ付きリスト --> <ul class="list-group"> <li class="list-group-item d-flex justify-content-between align-items-center"> リスト1 <span class="badge badge-primary badge-pill">120</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> リスト2 <span class="badge badge-primary badge-pill">70</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> リスト3 <span class="badge badge-primary badge-pill">30</span> </li> </ul> <!-- 閉じるボタン付きアラート --> <div class="alert alert-warning alert-dismissible fade show" role="alert"> <strong>注意!</strong> 変更は保存されませんでした <button type="button" class="close" data-dismiss="alert" aria-label="閉じる"> <span aria-hidden="true">×</span> </button> </div> <!-- パンくずリスト --> <nav aria-label="パンくずリスト"> <ol class="breadcrumb mb-1"> <li class="breadcrumb-item"><a href="#">ホーム</a></li> <li class="breadcrumb-item"><a href="#">カテゴリ</a></li> <li class="breadcrumb-item active" aria-current="page">セクション</li> </ol> </nav> <!-- ナビゲーションメニュー --> <nav class="navbar navbar-expand-md navbar-light bg-light"> <a class="navbar-brand" href="#">サイト名</a> <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#nav" aria-controls="nav" aria-expanded="false" aria-label="ナビゲーションの切替"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="nav"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">商品紹介 <span class="sr-only">(現位置)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">お問い合わせ</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input type="search" class="form-control mr-sm-2" placeholder="検索..." aria-label="検索..."> <button type="submit" class="btn btn-outline-success my-2 my-sm-0">検索</button> </form> </div> </nav>

画像などのコンテンツを複数、自動的に順番に表示させるカルーセル（スライドショー）も適切なタグを設置するだけで実装できます。下記では、A,B,Cの部分を画像に置き換えるだけで、スライドショーを表示できます。

<!-- スライドショー --> <div id="slide" class="carousel slide" data-ride="carousel"> <!-- インジケータの設定 --> <ol class="carousel-indicators"> <li data-target="#slide" data-slide-to="0" class="active"></li> <li data-target="#slide" data-slide-to="1"></li> <li data-target="#slide" data-slide-to="2"></li> </ol> <!-- スライドさせるコンテンツの設定 --> <div class="carousel-inner"> <div class="carousel-item active"> A </div> <div class="carousel-item"> B </div> <div class="carousel-item"> C </div> </div> <!-- スライドコントロールの設定 --> <a class="carousel-control-prev" href="#slide" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">前へ</span> </a> <a class="carousel-control-next" href="#slide" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">次へ</span> </a> </div>

トップページで目立たせたい見出しやコンテンツの区切りなどに利用できるコンポーネントとして、ジャンボトロン（jumbotron）があります。

<!-- ジャンボトロン --> <div class="jumbotron jumbotron-fluid"> <div class="container"> <p class="display-4">ジャンボトロン</p> <p class="lead">Bootstrap4の機能や表示を確認できるページです。</p> </div> </div>

確認ダイアログのように、ウィンドウを閉じるまで外部への操作を受け付けなくさせるウィンドウの事をモーダルウィンドウと呼びます。Bootstrap4では、サイズの違いで3種類のモーダルウィンドウを表示できます。Webサイト上に確認を促すウィンドウを表示したり、入力欄をウィンドウ内に表示させる事も出来ます。

<!-- 大きめなモーダルウィンドウ --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal01">モーダル大</button> <div class="modal" id="modal01" tabindex="-1" role="dialog"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">モーダルのタイトル</h5> <button type="button" class="close" data-dismiss="modal" aria-label="閉じる"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p>表示させたいテキスト</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button> <button type="button" class="btn btn-primary">変更を保存</button> </div> </div> </div> </div> <!-- 標準となるモーダルウィンドウ --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal02">モーダル標準</button> <div class="modal" id="modal02" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">モーダルのタイトル</h5> <button type="button" class="close" data-dismiss="modal" aria-label="閉じる"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p>表示させたいテキスト</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button> <button type="button" class="btn btn-primary">変更を保存</button> </div> </div> </div> </div> <!-- 小さなモーダルウィンドウ --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal03">モーダル小</button> <div class="modal" id="modal03" tabindex="-1" role="dialog"> <div class="modal-dialog modal-sm" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">モーダルのタイトル</h5> <button type="button" class="close" data-dismiss="modal" aria-label="閉じる"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p>表示させたいテキスト</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button> <button type="button" class="btn btn-primary">変更を保存</button> </div> </div> </div> </div>

Bootstrap4用のテンプレート

一般的なサイドメニューとメインコンテンツのサイト構成のHTMLタグをテンプレート用に掲載します。またBootstrap4の動作確認ページを用意しました。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap4テンプレート</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <script src="js/jquery-3.3.1.slim.min.js"></script> <script src="js/bootstrap.bundle.min.js"></script> </head> <body> <!-- ナビゲーションメニュー --> <nav class="navbar navbar-expand-md navbar-light bg-light"> <a class="navbar-brand" href="#">サイト名</a> <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#nav" aria-controls="nav" aria-expanded="false" aria-label="ナビゲーションの切替"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="nav"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">商品紹介 <span class="sr-only">(現位置)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">お問い合わせ</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input type="search" class="form-control mr-sm-2" placeholder="検索..." aria-label="検索..."> <button type="submit" class="btn btn-outline-success my-2 my-sm-0">検索</button> </form> </div> </nav> <!-- ジャンボトロン --> <div class="jumbotron jumbotron-fluid"> <div class="container"> <p class="display-4">ジャンボトロン</p> <p class="lead">Bootstrap4の機能や表示を確認できるページです。</p> </div> </div> <!-- メインコンテンツ --> <div class="container"> <div class="row"> <div class="col-md-8"> メインコンテンツ </div> <div class="col-md-4"> サイドメニュー1 </div> </div> </div> </body> </html>