Webデザインの知識がなくてもOK！Bootstrapの使い方【入門者向け】
HTML/CSSといったWebデザインの知識がない人でもわかる【Bootstrap】の使い方。Bootstrapのダウンロード方法、サンプルコードがあってすぐに実践可能。グリッドシステムやテーブルなどの使い方あり。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
独学でHTML/CSSを勉強してもデザインがいまいち…という経験はないでしょうか。そんなときに便利なBootstrapの使い方を初心者向けに解説します。
HTML/CSSがわからない方も読むことができますが、HTMLの書き方、CSSの書き方は理解しておいた方がスムーズに読み進めることができるでしょう。
なお、今回はBootstrapのバージョン「3.3.5」を使用します。
本記事は、オンライン完結のBootstrap講座のカリキュラムをもとに執筆しています。
なお、今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。
田島メンター！！Bootstrapというのは何ですか〜？
Bootstrapはレスポンシブデザインに対応したフロントエンドのフレームワークだよ。
フロントエンドというとHTML・CSS・JavaScriptですか？
そうだね。シンプルな指示でグリッドシステムを使用できたり、本格的なフォームやボタンを作成できたりと非常に便利なんだ。基本の使い方を見てみよう。
目次
本記事では、Bootstrapの基礎をおさえた上で、よく使う、グリッドシステム、テーブル、ボタン、フォームの具体的な使い方を順番に紹介します。
Bootstrapとは
BootstrapはTwitter社が開発したCSSの「フレームワーク」です。通常CSSを書く場合、全てのスタイルを自分で作っていく必要がありますが、このフレームワークにはよく使われるスタイルがあらかじめ定義してあるので、ルールに沿って利用するだけで整ったデザインのページを作成できます。
もともとTwitter社内で作られたもので、以前は「Twitter Bootstrap」と呼ばれていましたが、現在では「Bootstrap」のみで呼ばれるようになっています。
Bootstrapを使うメリット
Bootstrapを使うメリットとして、レスポンシブWebデザインに対応しているという点があります。通常、スマートフォンやタブレットなど個別に対応するスタイルを作っていると大変手間がかかります。BootstrapはCSS3のメディアクエリを使用しているので、ブラウザの横幅サイズを判断基準として、レイアウトデザインを柔軟に調整することが可能です。
このページから確認できますが、バージョン3.3.5ではこちらのブラウザに対応しています。
この際の注意点ですが、Internet Explorer 7以下とFirefox 3.6以下はサポートされません。これは、CSS3メディアクエリがサポートされていないブラウザだからです。
Bootstrapを使う準備
実際にBootstrapを使う前の準備が必要ですので、まずはこちらに着手しましょう。PCだけあればすぐに準備できます。
Bootstrapを使用するには、BootstrapとjQuery（JavaScriptのライブラリ）を読み込む必要があります。読み込みの方法は下記の2パターンです。
- ソースをダウンロードして、ローカルに配置して読み込む
- すでにホストされているファイルをインターネット経由で読み込む
今回は、前者の方法を紹介します。
ダウンロードするには、BootstrapのTOPページにアクセスしましょう。
「Download Bootstrap」のボタンをクリックしてください。
次に表示されるページで、左にある「Download Bootstrap」をクリックするとダウンロードが始まります。
ダウンロードしたZIPファイルを解凍すると、「css」、「js」、「fonts」の3つのフォルダがあることがわかるはずです。
続いてHTMLファイルを用意しましょう。Bootstrapのページにもテンプレートが用意されていますが、コメントアウトが日本語の方がわかりやすいと思いますので、TechAcademyで用意しています。こちらのコードをコピーして「index.html」としてHTMLファイルを作成してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Sample</title>
<!-- BootstrapのCSS読み込み -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery読み込み -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- BootstrapのJS読み込み -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
作成したファイルは、先ほどダウンロードしたBootstrapのフォルダの中に保存してください。
index.htmlのファイルをブラウザで開くと「Hello, world!」とだけ表示されます。
コピーしたコードを解説
先ほどコピーしたコードを簡単に解説します。
これはInternetExplorerのブラウザではバージョンによって崩れることがあるので、互換表示をさせないために設定するmetaタグです。
<meta http-equiv="X-UA-Compatible" content="IE=edge">
これはレスポンシブWebデザインを使うために必要なmetaタグです。
<meta name="viewport" content="width=device-width, initial-scale=1">
ここで重要なのは、BootstrapのJavaScriptよりも、jQueryを先に読み込むということです。そうしなければ、BootstrapのJavaScriptを使う動きが動作しないのでご注意ください。
<!-- BootstrapのCSS読み込み --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- jQuery読み込み --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- BootstrapのJS読み込み --> <script src="js/bootstrap.min.js"></script>
事前の準備は以上です。
次からは、グリッド・テーブル・ボタン・フォームの具体的な使い方について紹介します。その際のサンプルコードは、<h1>Hello, world!</h1> の部分を置き換えて使用してください。
jQueryとBootstrapのJavaScriptの読み込みは、jQueryの方を先に記述するようにしよう。
分かりました！
次は基本的な機能の使い方を紹介するよ。グリッドシステム・テーブル・ボタン・フォームだね。
グリッドシステムの使い方
グリッドシステムとは、スマートフォンやタブレットなどデバイスに応じて構造を変化させるための仕組みです。グリッドシステムを使うことで、簡単にレスポンシブWebデザインでレイアウトを作成することができます。
使用ルール
以下のルールでスタイルをつけると、レスポンシブWebデザインに対応した横幅を分割するスタイルを簡単に作ることができます。
- class=”container”か”container-fluid”の中に
- class=”row”の中に
- class=”col-{prefix}-{columns}”の形式で
- {columns}は合計値が12になるように指定
サンプルコード
実際にサンプルコードを使ってやってみましょう。
先ほど用意したindex.htmlのファイルの<h1>Hello, world!</h1> の部分を下記のコードに置き換えてみてください。
<header style="background-color:gray">Header</header>
<div class="container-fluid">
<div class="row">
<div class="col-sm-2" style="background-color:red;">Red</div>
<div class="col-sm-8" style="background-color:blue;">Blue</div>
<div class="col-sm-2" style="background-color:yellow;">Yellow</div>
</div>
</div>
<footer style="background-color:gray">Footer</footer>
ブラウザで表示すると、PCのブラウザでは縦1✕横3で、赤2:青8:黄2の横幅の割合になります。
この時、モバイル以下のブラウザサイズ（PCのブラウザで横幅を調整してもOK）では縦3✕横1で表示されます。
上記のコードのcol-sm-2のように、col-{prefix}-{columns} の形式で合計値12を振り分けることで、簡単にマルチデバイスに対応したレイアウトを作成できるのがグリッドシステムの特徴です。
実際に使う際は、グリッドシステムのprefixの画面サイズの対応表も参考にしてください。
| 対応デバイス | 画面サイズ | prefixの指定方法（*は数値） | prefixの意味 |
| デスクトップ | 1200px以上 | col-lg-* | Large |
| デスクトップ | 992px以上、1200px未満 | col-md-* | Medium |
| タブレット | 768px以上、992px未満 | col-sm-* | Small |
| モバイル | 768px以下 | col-xs-* | Xtra Small |
オプション：表示/非表示の制御
visible-{prefix} や hidden-{prefix} を指定することで、画面サイズによってレイアウトを表示/非表示を制御することができます。PCやタブレットでは表示したいが、モバイルでは非表示にしたい、ということが簡単にできます。
例えば、先ほどのサンプルコードでBlueの部分をタブレットサイズ（768px以上、992px未満）の時だけ非表示にする場合はhidden-smように記述します。
<header style="background-color:gray">Header</header>
<div class="container-fluid">
<div class="row">
<div class="col-sm-2" style="background-color:red;">Red</div>
<div class="col-sm-8 hidden-sm" style="background-color:blue;">Blue</div>
<div class="col-sm-2" style="background-color:yellow;">Yellow</div>
</div>
</div>
<footer style="background-color:gray">Footer</footer>
すると、タブレットサイズ（768px以上、992px未満）では「Blue」の部分が非表示となります。
その他のグリッドシステムのオプションはBootstrapの公式サイトを確認しましょう。
テーブルの使い方
Bootstrapでは、tableタグでテーブルレイアウト（表組み）を簡単に装飾できます。
使用ルール
先ほどのグリッドシステムのようにルールがあります。
- class=”container”の中に
- table要素に対してclass=”table”をつける
サンプルコード
実際にサンプルコードを使ってやってみましょう。
先ほど用意したindex.htmlのファイルの<h1>Hello, world!</h1> の部分を下記のコードに置き換えてみてください。
<div class="container">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>名前</th>
<th>メールアドレス</th>
<th>電話番号</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>煌木 太郎</td>
<td>taro.kirameki@example.com</td>
<td>09011112222</td>
</tr>
<tr>
<th scope="row">2</th>
<td>煌木 次郎</td>
<td>jiro.kirameki@example.com</td>
<td>09033334444</td>
</tr>
<tr>
<th scope="row">3</th>
<td>煌木 花子</td>
<td>hanako.kirameki@example.com</td>
<td>09055556666</td>
</tr>
</tbody>
</table>
</div>
ブラウザではこのように表示されるはずです。
オプション：1行間隔で背景色を変える
基礎がわかったところでオプションを使ってみましょう。
table要素のclassにtable-stripedを追加すれば、1行間隔で背景色を変えることができます。
<table class="table table-striped"> ... </table>
これだけで1行間隔で背景色が変わりました。
オプション：枠線を付ける
先ほどと同じように、table要素のclassにtable-borderedを追加すれば、枠線を付けることができます。
<table class="table table-bordered"> ... </table>
ブラウザではこのように表示されるはずです。
オプション：テーブルをレスポンシブ対応する
タブレットやスマートフォンを使用する際、テーブルが全て表示されない場合に、table要素内にスクロールバーを付けることができます。div class=”container” とtable要素の間にdiv class=”table-responsive”を追加するだけです。
<div class="container">
<div class="table-responsive">
<table class="table table-bordered">
...
</table>
</div>
</div>
ブラウザの幅を変えるとスクロールバーが表示されました。
その他のテーブルのオプションはBootstrapの公式サイトを確認しましょう。
ボタンの使い方
Bootstrapでは、簡単にボタンにスタイルが付けられます。
使用ルール
a要素、button要素のclassに“btn btn-{プロパティ名}”を追加するだけです。プロパティ名は下記のようなものがあります。
| プロパティ名 | 表示 |
| default | 白地に黒文字 |
| primary | 青地に白文字 |
| success | 緑地に白文字 |
| info | 水色地に白文字 |
| warning | オレンジ色地に白文字 |
| danger | 赤色地に白文字 |
| link | 白地に青文字 |
サンプルコード
実際にサンプルコードを使ってやってみましょう。
先ほど用意したindex.htmlのファイルの<h1>Hello, world!</h1> の部分を下記のコードに置き換えてみてください。
<button type="button" class="btn btn-default">Default</button> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-info">Info</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-link">Link</button>
このようにボタンが表示されるはずです。
オプション：ボタンサイズの指定
a要素、button要素のclassに“btn-{プロパティ名}”を追加すると、ボタンのサイズの指定ができます。具体的にはこのように記述します。
<p> <button type="button" class="btn btn-primary btn-lg">Large button</button> <button type="button" class="btn btn-default btn-lg">Large button</button> </p> <p> <button type="button" class="btn btn-primary">Default button</button> <button type="button" class="btn btn-default">Default button</button> </p> <p> <button type="button" class="btn btn-primary btn-sm">Small button</button> <button type="button" class="btn btn-default btn-sm">Small button</button> </p> <p> <button type="button" class="btn btn-primary btn-xs">Extra small button</button> <button type="button" class="btn btn-default btn-xs">Extra small button</button> </p>
ブラウザで表示するとボタンのサイズが変わることがわかります。用途によって使い分けてください。
オプション：ブロックレベルのボタン指定
ブロックレベルボタンを使うと、一般的なブラウザでは前後に改行が入ります。a要素、button要素のclassに“btn-block”を追加すると、ブロックレベルのボタンを指定することが可能です。具体的にはこのように記述します。
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button> <button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
このように表示されます。
その他のボタンのオプションはBootstrapの公式サイトを確認しましょう。
フォームの使い方
最後にフォームを扱います。Bootstrapでは、簡単にデザインの整ったフォームを作ることが可能です。
使用ルール
以下のルールでフォームを作ります。
- formタグの中に
- class=”form-group”を入れて
- inputタグにclass=”form-control”を付ける
サンプルコード
実際にサンプルコードを使ってやってみましょう。
先ほど用意したindex.htmlのファイルの<h1>Hello, world!</h1> の部分を下記のコードに置き換えてみてください。
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
ブラウザではこのように表示されます。
オプション：インラインフォーム
フォームを下記のようにインラインに並べたい場合は、formタグにclass=”form-inline”を付けます。
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
ブラウザで表示するとこうなります。
オプション：フォーム項目を水平に配置
フォーム項目をフォームと垂直に並べるのではなく、水平に並べたい場合は、formタグにclass=”form-horizontal”を付けます。
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
ブラウザではこのように表示されるはずです。
その他のフォームのオプションはBootstrapの公式サイトを確認しましょう。
ここまで、Bootstrapの基本をおさえた上で、グリッド、テーブル、ボタン、フォームの具体的な使い方について解説してきました。今回の知識だけでも、デザインの整ったページが作れるはずです。
あとは、Bootstrapの公式サイトなどを見ながら、どんどん自分で使ってみてください！
Bootstrapではこのようなことができるんだ。
Webサイトに使う色々な要素が、分かりやすい方法で本格的に作成できるんですね。
今回はファイルをダウンロードする方法を紹介したけれど、ファイルをダウンロードしなくても「Bootstrap CDN」というものによって更に手軽にBootstrapを利用することができるよ。
そちらの方法も調べてみます。ありがとうございました！
[お知らせ]TechAcademyではオンライン完結のBootstrap講座を開催しています。わからないことをチャットで質問すると、現役のWebデザイナーが毎日すぐに回答します。
また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。
