Bootstrapを使用すればクオリティの高いWebページの作成が可能です。少し慣れてきたら本レッスンで紹介するCSSクラスを使用してみてください。デザイン性がぐっと高まります。
シンプルなレイアウトのページを作る
ここまでで、グリッドシステムについて理解を深めてきました。次は、グリッドシステムを使用してシンプルなレイアウトのページを作成する手順を見ていきましょう。
まず、一般的によく使われるレイアウトには以下のようなものがあります。
今回は、以下のように２カラムと３カラムが１つのページに混在するレイアウトに挑戦します。一般的なWebページのレイアウトですね。このレイアウトのページに設置するコンポーネント（ナビゲーションバーやボタンなどのパーツ）についても学んでいきます。
navbar
タグを書き、リンクタグを書き…と自分で１から作ると手間がかかるナビゲーションバー（メニュー）も、Bootstrapで用意されているテンプレートを使えば簡単です。 このテンプレートは、Bootstrapのサイトで取得する事が出来ます。
「Get started」を押下して、サイドメニュー内「Components」をクリックしましょう。
テンプレートや、カスタマイズ用のコードが用意されています。 「navbar」の項目をクリックします。
サンプルコードの使い方は、そのテンプレートをコピペで貼り付けるだけです。 例えばナビゲーションバーを作りたいのであれば、「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>
すると以下のようなナビゲーションバーを作る事が出来るのです。
また、レスポンシブ対応になっていて画面サイズが小さくなると、ハンバーガーメニューに切り替わります。とても便利ですね。
コンポーネントの探し方
「Components」にはボタンやアラートなど様々なコードのサンプルが掲載されています。
今回はアラート機能を例にします。検索ボックスに「alert」と入力します。候補がいくつか表示されるので、今回はAlert/Exampleを選択してみましょう。
するとアラート機能のサンプルと下部にサンプルコードが表示されます。
使用したいサンプルコードをコピーして、作成中のファイルにペーストします。
ナビゲーションバーの下に張り付けると下図のようになりますよ。
Big image
Big imageとは、ヒーローエリアと呼ばれる部分に配置される画像の事です。 ヒーローエリアとは、サイトを訪れたユーザーが最初に見る領域の事です。最初に開いたページで、画像が大きく使われているというサイトをよく見かけると思います。それも、Bootstrapを使えばCSSクラスの指定だけで実現できます。
<p><img src="..." class="img-fluid" alt="..."></p>
レッスン2.Bootstrapのグリッドを理解する、でも登場した「img-fluid」クラスを使用します。 img-fluidに対してBootstrapが設定してくれているスタイルのおかげで、親要素の幅に合わせて 画像のサイズが拡大・縮小する＝画像がレスポンシブ対応するようになります。
card
Bootstrapは、カードデザインにも対応しています。カードデザインとは、以下のようなものです。カードデザインは、シンプルで、分かりやすく美しいのが特徴です。
はNavbarと同じく、Bootstrap公式サイトの「Components」にテンプレートが用意されています。
footer
自分で１からHTML/CSSを書いていると、footerが画面最下部から少し浮いた状態になってしまうことがあります。これは、コンテンツの量が少ない為に起こることです。
ですが、Bootsstrapで用意されているテンプレートを使えば、コンテンツの量に関わらずfooterを画面最下部に固定する事が出来ます。 方法は、以下のコードを使うだけです。
<footer class="footer"></footer>
◆4.ページを作ってみよう
では、ここまでで学んだコンポーネントやグリッドシステムを使って、シンプルなレイアウトのページを作成してみましょう。皆さんもテキストエディタを使ってやってみてください。【◆1.CDNでBootstrapを使えるようにする】で作成したindex.htmlを使用します。
今回作成するレイアウトの完成形はこちらです。
２カラム・３カラムが混在したレイアウトで、ナビゲーションバーやフッターの他、カードデザインも取り入れてみます。
※ご用意している画像と違う画像が異なりますが、レイアウト重視で進めてください。 ご自身でお好きな写真を用意していただいても構いません。
ナビゲーションの作成
最初に、ナビゲーションバーを設置します。 先ほどの「navbar」の項目を参考にHTMLファイルにBootstrapサイトの「Supported content」の項目のテンプレートをコピペしてください。ただし、このテンプレートは白いナビゲーションバーのテンプレートです。カスタマイズ用のCSSクラスを使いダークグレーのナビゲーションバーにしてみましょう。コードの変更箇所は以下です。
ビッグイメージの配置
次に、Bigimageを設置しましょう。「container-fluid」で「img-fluid」を囲います。コードは以下です。これで、画面幅いっぱいに画像が広がります。
<div class="container-fulied img-hidden">
<img src="images/a.jpg" class="img-fulied">
</div>
divタグに追加した「img-hidden」は オリジナルのCSSを記述するためのCSSクラスです。 このクラス名は、任意のもので構いません。
Bootstrapで用意されているクラスだけではなく、オリジナルの「img-hidden」というクラスを作ってCSSを記述する理由は、デザイン的に調整が必要な部分が出てくるためです。
今回の場合ですと、a.jpgは大きい画像を使用しています。 画像が大きすぎるサイズで表示されてしまわないよう、cssで親要素（コンテナ）に高さを設定して、はみ出した部分は非表示にするように設定する必要があります。
オリジナルのCSSの記述は、以下のようにしてください。
div.img-hidden {
height: 300px;
overflow: hidden;
}
カードの配置
次は、コンテンツ部分です。まず、カードを横並びで３つ配置してみましょう。 カード間に余白を付けられるテンプレートを使います。
<div class="container container-m">
<div class="card-deck">
<div class="card">
<img class="card-img-top" src="images/b.jpg" alt="Card image cap">
<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="images/b.jpg" 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="images/b.jpg" 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を追加するためのオリジナルクラス「.container-m」を記述しています。 これは、テンプレートのままだとbigimageとぴったりとくっついてしまうので余白を指定する必要があるからです。CSSは以下のように記述します。
div.container-m {
margin-top: 80px;
}
2カラム部分の作成
次に、２カラムレイアウト部分を作っていきます。これは、前章で学んだグリッドシステムを使用します。以下のように、カラムを作成しましょう。
<div class="container">
<div class="row">
<div class="col-md-4 img-hidden">
<img src="images/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を追加しなくては上のカード部分とぴったりとくっついてしまいます。
やりたいことはカード部分の時と同じく、margin-topを追加して間隔をあける。 追加するCSSプロパティは「container-m」と同じですから、このクラスをdivタグに追加してしまいましょう。先ほど作成したクラス「container-m」を使いまわすイメージです。
↓
<div class="container container-m">
<div class="row">
<div class="col-md-4 img-hidden">
<img src="images/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="images/d.jpg" alt="img" class="img-fulied">
</div>
<div class="col-md-4 img-hidden">
<img src="images/d.jpg" alt="img" class="img-fulied">
</div>
<div class="col-md-4 img-hidden">
<img src="images/d.jpg" alt="img" class="img-fulied">
</div>
</div>
</div>
footerの配置
最後に最下部固定のフッターを作ります。 以下のような、コードを書きましょう。
<footer class="footer">© 2018 Bootstrap test</footer>
そのままだと、背景色が薄くサイト全体を見たとき統一感がなくなってしまうので、色をCSSで変えます。また、テキストの位置も真ん中にしましょう。
このままだと写真とくっついてしまっていますので、footerクラスのところにも「container-m」クラスを追加しておきましょう。
完成
これで、Webページが完成しました。シンプルですが、統一感のあるサイトがとても短時間で作る事が出来ました。また、ここまでの章でBootstrapの基本を、身につけることが出来たと思います。Bootstapにはこの他にも、たくさんコンポーネントがありますし、カスタマイズも行う事が出来ます。次回からは、そちらを学んでいきましょう。
◎まとめ
・グリッドシステムは、カスタマイズして使う事が出来る
・Bootstrapのテンプレート（コンポーネント）は、基本的にレスポンシブに対応している
・オリジナルのCSSクラスを追加して、コンポーネントのデザインなどをカスタマイズする