Bootstrapの使い方を初心者にも分かりやすく解説
2022.01.11
Webサイトを制作する場合、HTMLやCSSのコードを1から書いていくことが多いとは思います。
しかし1からコーディングをすると時間がかかり、なかなか早くWebサイトを作れないこともあるのではないでしょうか。
そんな方におすすめなのが、CSSのフレームワークである「Bootstrap」です。
今回はBootstrapのメリットと基本的な使い方について、解説します。
Bootstrapとは
「Bootstrap」とはCSSのフレームワークのことです。
「フレームワーク」とは「プログラミング言語やアプリケーションの汎用的な機能をまとめて提供するソフトウェア」のことでフレームワークを利用することで開発の大幅な効率化や共同開発の推進が見込めます。
そんなBootstrapを使用するメリットは以下の3つです。
- コーディングの時間を短縮できる
- 優れたデザインのWebサイトを簡単に作れる
- レスポンシブデザインが簡単
コーディングの時間を短縮できる
Bootstrapはコーディングに必要なコードや設定が最初から用意されており、これらを書く必要がないので、作業時間の短縮ができます。
また、通常だとWebサイトのレイアウト調整にはCSSを使う必要がありますが、Bootstrapにはボタンや表など、よく使用するレイアウトのCSSが最初から用意されており、そのクラス名をHTMLタグに追加するだけでデザインを適用できます。
CSSのコード量を削減することは、Webサイト自体の軽量化にもつながるので、そういった面でもBootstrapはおすすめできるフレームワークです。
優れたデザインのWebサイトを簡単に作れる
BootstrapにはCSSのコンポーネント（部品）が用意されているので、このコンポーネントを使用していけば、デザイン知識がない人でも簡単に美しいWebサイトを作成できます。
また、ネット上にもコンポーネントが大量に存在しているので、好きなコンポーネントを組み合わせて使うことも可能です。
レスポンシブデザインが簡単
Bootstrapはパソコンやスマートフォンなどのデバイスの画面幅に応じてWebサイトのスタイルを変化させる、レスポンシブデザインにも対応することができます。
Bootstrapで最初から用意されているCSSには、レスポンシブ対応させるための記述がされているので、レスポンシブ対応のコーディング時間を短縮できるというメリットもあります。
Bootstrapの使い方
続いて、Bootstrapの使い方を具体的に解説していきます。
Bootstrapを使うための準備
出典：Bootstrap
実際にBootstrapを使用するためには、まずセットアップを行います。
Bootstrapの公式サイトにアクセスした後、「GetStarted」をクリックし、CSSのコードとJavaScriptのコードをコピーします。
コピーしたCSSとJavaScriptのコードは、ローカルに配置したindex.htmlの<head>タグに貼り付けます。
公式サイトのGetStarted をクリックして表示されるページには、「Starter template」という項目があり、そこには<head>や<body>タグの汎用テンプレートが用意されているので、こちらもindex.htmlに貼り付けて使用してください。
また、公式サイトのDownloadボタンをクリックすると、上記が書かれたファイルを入手することが可能です。
グリッドシステムとは
「グリッドシステム」とは、Bootstrapの機能の要であり、レスポンシブデザインを表現するために必須の仕組みとなっています。
グリッドシステムは「HTMLのクラス名に画面を12分割した数字を入れることで、画面幅を指定できる」仕組みであり、
col-sm-7、col-md-12などの数字を指定して要素の横幅を指定していきます。
数字の前に指定するcol-〇〇の〇〇に入るのは画面サイズごとの接頭辞であり、例えば画面サイズ576px以下は「eXtra Small」で表され、「xs」と記述します。
画面サイズに応じ、Bootstrapでは以下の6つの接頭辞（prefix）を使用可能です。
- col-xs-〇〇：最大幅Auto
- col-sm-〇〇：最大幅540px
- col-md-〇〇：最大幅720px
- col-lg-〇〇：最大幅960px
- col-xl-〇〇：最大幅1140px
paddingとmarginの使い方
画面の余白を設定するためのpaddingとmarginは、それぞれの頭文字＋上下左右の指定位置＋余白の幅で指定します。
例えばmarginを設定する場合、mt-○○は上に余白、mb-〇○は下に余白となります。
- mt-○○：上に余白
- ml-○○は左に余白
- mr-○○は右に余白
- mb-○○は下に余白
paddingを設定する場合も同様に、pt-〇〇で上、pb-〇〇で下に余白を設定可能です。
- pt-〇〇で上に余白
- pl-〇〇で左に余白
- pr-〇〇で右に余白
- pb-〇〇で下に余白
フォームの設置
フォームを設置する場合は以下の方法で行います。
- formタグ内にdivタグを用意し、そのクラス名を「form-group」に指定することでフォーム要素をまとめられる
- inputタグなどの各フォーム要素のクラス名には、「form-control」を指定する
<div class="container">
<form>
<div class="form-group">
<label>Eメール</label>
<input type="email" class="form-control" placeholder="Email">
</div>
<div class="form-group">
<label>パスワード</label>
<input type="password" class="form-control" placeholder="Password">
</div>
<button type="submit" class="btn btn-success ">ボタンだ</button>
</form>
</div>
ボタンの設置
ボタンは用途ごとに「btn btn-〇〇」というクラス名を指定します。
ボタンのクラス名ごとには、以下の想定された目的があります。
- btn btn-primary:青
- btn btn-secondary:灰色
- btn btn-success:緑
- btn btn-danger:赤
- btn btn-warning:黄色
- btn btn-info:水色
- btn btn-light:白
- btn btn-dark:黒
- btn btn-link:リンクボタン
また、ボタンのクラス名に「text-nowrap」クラスを追加することで、ボタン内のテキストを折り返さないようにできます。
<button type="button" class="btn btn-primary text-nowrap"> Primary</button>
「btn-outline-〇〇」クラスを使うと、枠線だけを残して背景を透過可能です。
<button type="button" class="btn btn-outline-primary">Primary</button>
これらはaタグやinputタグでも使えますので、詳しくは公式サイトを確認してみてください。
表の設置
表を設置するには、tableタグに「table」クラスを指定し、デザインごとに以下のクラス名を指定します。
- table-bordered：テーブルセルに枠線
- table-striped：1行ずつ交互にテーブルの色を変える
- table-hover：カーソルを乗せた行をハイライト表示
- table-responsive：レスポンシブテーブルにし、水平方向へのスクロール機能を持たせる
<table class="table table-striped">
<thead>
<tr>
<th scope="col">番号</th>
<th scope="col">大会名</th>
<th scope="col">日時</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>空手試合</td>
<td>1/15</td>
</tr>
<tr>
<th scope="row">2</th>
<td>柔道試合</td>
<td>2/15</td>
</tr>
<tr>
<th scope="row">3</th>
<td>剣道試合</td>
<td>3/15</td>
</tr>
<tr>
<th scope="row">4</th>
<td>少林寺拳法試合</td>
<td>4/15</td>
</tr>
<tr>
<th scope="row">5</th>
<td>合気道試合</td>
<td>5/15</td>
</tr>
</tbody>
</table>
画像の設置
画像はimgタグなどに以下のクラス名を付けることで、レスポンシブ対応にできます。
- img-responsive：画面サイズごとに画像サイズを変更
- img-thumbnail：画像の枠線に丸みを持たせ、サムネイルとして表示
- img-circle：画像をサークル状に表示する
- rounded float-left（right）：画像の表示位置を左（右）に指定
<div class="img ">
<img src="image-sample.jpg" class="img-thumbnail">
</div>
まとめ
Bootstrapのメリットと使い方について解説しました。
Bootstrapはデザインに優れたレスポンシブ対応のWebサイトを簡単に作れるフレームワークであり、Webサイト開発の時間を大幅に短縮できます。
Bootstrapを使いこなし、Webサイト制作の作業時間を短縮していきましょう。
関連
Webサイト制作Web開発
Webサイト制作Webデザイン
