「簡単に綺麗なWEBデザインができたらなぁ。。。」
これはWEBサイト・サービスを作成している多くのエンジニア・クリエイターの悩みだと思います。WEB画面のデザインは意外と大変で、まずは画像ソフトで画面イメージを作って、そこからCSSでスタイリングをして・・・という作業はなかなか骨が折れます。
そんな時に便利なのがBootstrapです。様々なWEB画面のデザインに活用されていて、簡単に綺麗なスタイリングができます。レスポンシブWEBデザインにも対応しているため、スマホやタブレットで閲覧される事が多いWEBサイトを作る場合等には非常に便利です。
この記事では、そんなBootstrapの使い方について紹介をしていきたいと思います。
Bootstrapって？
BootstrapはWEBの画面を作るための「CSSのフレームワーク」です。
※フロントエンドフレームワークとも呼ばれます
本来、WEB画面を作る際は自分でスタリングをするために大量のCSSを記述する必要があります。ただ、CSSのフレームワークを使えば少量で簡単な記述のみで、綺麗にWEB画面をデザインする事ができます。CSSのフレームワークは数多くありますが、Bootstrapはその中でも特に有名で、数々のWEBサイトで活用されています。
ちなみに、BootstrapはTwitter社で開発されたフレームワークで、TwitterのWEB画面を作成するために使用されていました。そのため、フレームワークとして一般に公開されてからも、当初は「Twitter Bootstrap」と呼ばれていました。世界中のWEBサイトで使用される様になってからは「Bootstrap」と呼ばれる様になり、今もバージョンアップされています。
■以下の様な特徴もあるので併せて覚えておきましょう。
- BootstrapはHTML、CSS、JavaScriptによって作られている
- BootstrapはMITライセンス（無料で使用可能だが、著作権表示・本許諾表示が必要）
Bootstrapのメリットとデメリット
Bootstrapを使う事でどの様なメリット・デメリットがあるのでしょうか？
メリット
- 少量で簡単な記述で綺麗なスタイリングができる
※様々なレイアウト・UIコンポーネントを使用可能 - レスポンシブWEBデザインに対応している
- HTMLとCSSでスタイリングする場合と比較すると制作スピードが速く、コストを削減できる
- 数々のWEBサイトで使用された実績がある
- ほとんどのブラウザに対応している（IEだけは未対応のものもある）
- Twitter社のWEBサイトで様々な使い方が紹介されている
デメリット
- 多くのWEBサイトで活用されているので、他のサイトと同じようなデザインになってしまう事がある
Bootstrapを使う目的
Bootstrapを使用する目的は上述した「Bootstrapのメリット」部分に載せた内容がほとんどですが、ビジネス的には特に以下を目的として活用される事が多いので、もう少し詳しく紹介します。
WEBデザイン・スタイリングの工数を削減したい
世の中には数多くのWEB制作会社・WEB系の開発チーム等が存在しています。競合が数多くいる中で、最小の工数でWEBデザインを行える事はビジネス的な強みになります。
自分で独自のスタイリングをすれば、それなりの工数がかかりますが、Bootstrapであれば、最小の工数でデザインする事も可能になります。
WEB画面のプロトタイプとして活用したい
最終的にはフレームワークを使用せずに独自のデザインを行いたい。でも、まずは大まかな画面イメージは作っておきたい。という場合にCSSのフレームワークが活用される事が多いです。
Bootstrapは使い方も用意であるため、おおまかな画面を作成する際に使用される事があります。
Bootstrapの使い方
ここから具体的にBootstrapの使い方を紹介していきます。
BootstrapのオフィシャルWEBサイト
BootstrapはWEB上に公開されたフレームワークになります。
実際に使用する際には、オフィシャルサイトからBootstrapのライブラリをダウンロードするか、CDN経由で使用する事になります。
オフィシャルサイトには、サンプルや活用事例等も紹介されています。こちらも非常に参考になります。
「https://getbootstrap.com/」
「https://getbootstrap.jp/」（日本語版）
Bootstrapを使うための準備
Bootstrapを使うためには準備が必要です。準備といってもする事は簡単で、自分が作成するWEBサイトで「Bootstrapの読み込み」をしてあげればOKです。
読み込み方法は以下の２種類になります。
- Bootstrapのライブラリファイルをオフィシャルサイトからローカルにダウンロードして読み込む（HTML内に読み込むためのコードを記述）
- オフィシャルサイトのライブラリファイルをCDN経由で読み込む（こちらもHTML内に読み込むためのコードを記述）
使用する際はどちらの方法でもかまいませんが、今回はCDN経由で読み込む方法でこの先の話を進めたいと思います。
CSSとJavaScriptの記述
オフィシャルサイトの「Documentation」のページに「Quick start」という見出しがあります。ここに記述されているCSSとJSの部分をコピーすると簡単にBootstrapを使用できます。
- CSSの部分をコピーしてheadタグの中に記述
- JSの部分をコピーしてbodyタグの中に記述
■「Documentation」のページにある「Quick start」の見出し
viewportの指定
併せてviewportの指定も記述しておきましょう。
※Responsive meta tagの見出し部分に記述されています。
viewportの指定をするとスマホ、タブレット、PC等々、様々なデバイスに対応したページを簡単に作成できる様になります。
■「Documentation」のページにある「Responsive meta tag」の見出し
スターターテンプレートを活用してもOK
スターターテンプレートもあるので、こちらのテンプレートをを使用すれば、そのままテンプレートとして活用できます。上記のCSS、JS、viewportの指定もこちらに含まれています。
※Starter templateの見出し部分に記述されています。
■「Documentation」のページにある「Starter template」の見出し
英語版サイトのスターターテンプレートを使用する際は一つ注意点があります。
HTMLファイルの頭にある「<html lang=”en”>」を「<html lang=”ja”>」に書き換えておきましょう。これで日本語対応のHTMLファイルになります。
※日本語サイトの場合は最初から日本語対応となっているはずです
HTMLファイルを作成してブラウザで開く
スターターテンプレートをコピーして空のHTMLファイルに貼り付けましょう。
※これくらいなら簡単な記載内容なのでメモ帳に貼り付けてHTMLファイルとして保存するだけでも全然OKです。
HTMLファイルを保存したら、それをchrome等のブラウザで開いてみましょう。テンプレート内に記述された「Hello,world!」の文字が表示されると思います。
■ブラウザで開いたHTMLファイル（スターターテンプレート）
Bootstrapの活用例
Bootstrapを実際に活用して画面を作成してみましょう。
Bootstrapのオフィシャルサイトにあるサンプルコードを組み合わせるだけでそれなりに見栄えのする画面はすぐにできてしまいます。まして、プロトタイプの画面であれば、これでも十分です。
オフィシャルサイトの「Documentation」のページある「components」メニューを選択すると、WEB画面を作る上での基本的なコンポーネントのサンプルが載っています。それらを組み合わせて、画面を作ってみましょう。
ナビゲーション（Navs）、ボタン（Buttons）、フォーム（Forms）、ジャンボトロン（Jumbotron）等を使用してサンプルのページを作成してみました。サンプルコードも載せておきますので参考にして下さい。
※ちなみにhtmlファイルを保存する際の注意点があり、htmlファイル内に日本語が混じっていると文字化けしてしまう事があります。この場合は特に指定等がなければUTF-8の形式でファイル保存をすれば文字化けが解消します。業務等で使用する場合は指定の文字コードがあると思いますので、ルールに従いましょう。
■htmlコードサンプル（bodyの中身のみになります。）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<h1>サンプルサイト</h1> <ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" href="#">リンク1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">リンク2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">リンク3</a> </li> <li class="nav-item"> <a class="nav-link" href="#">リンク4</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">リンク5</a> </li> </ul> <div class="container"> <h2>サンプル <span class="badge badge-secondary">見出し1</span></h2> ボタンのサンプル<br> <button type="button" class="btn btn-primary">ボタン1</button> <button type="button" class="btn btn-success">ボタン2</button> <button type="button" class="btn btn-danger">ボタン3</button> <button type="button" class="btn btn-warning">ボタン4</button> <button type="button" class="btn btn-info">ボタン5</button> <br><br> <h2>サンプル <span class="badge badge-secondary">見出し2</span></h2> <div class="container"> <form> <div class="form-group"> <label for="exampleInputEmail1">メールアドレス</label> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="メールアドレスの入力"> </div> <div class="form-group"> <label for="exampleInputPassword1">パスワード</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="パスワードの入力"> </div> <div class="form-group form-check"> <input type="checkbox" class="form-check-input" id="exampleCheck1"> <label class="form-check-label" for="exampleCheck1">規約を確認しました。</label> </div> <button type="submit" class="btn btn-primary">送信</button> </form> </div> <br> <h2>サンプル <span class="badge badge-secondary">見出し3</span></h2> <div class="container"> <div class="jumbotron"> <p class="lead">ジャンボトロンのサンプルです。</p> <hr class="my-4"> <p>ジャンボトロンのサンプルです。</p> <a class="btn btn-primary btn-lg" href="#" role="button">ボタン</a> </div> </div> </div> |
■WEB画面
まとめ
今回はBootstrapってそもそも何なのか？という事やBootstrapの使い方について解説をしました。
記事の中でもお伝えしている通り、開発のコストを抑えて素早くWEBサイトを作成したいという場合には、非常に重宝します。
当然、作りこみをすればかなりリッチなサイトも作成できる様になります。
WEBサイトの作成にぜひ便利なBootstrapを役立ててみて下さい。
