本記事ではBootstrapを使ったことが無い方向けに、Bootstrapの使い方を説明をしています。
Bootstrapのバージョンは4.3.1に対応しています。
目次
Bootstrapの使い方(CDN)
Bootstrapを使うためには、1つのCSSファイルと、3つのJavaScriptファイルが必要です。
しかし、Bootstrapが用意しているCDN(Content Delivery Network)を使うことで、CSSやJavaScriptファイルを作ることなくBootstrapが使えるようになります。
以下で手順を説明しますのでごらんください。
1. htmlファイルの作成
まずは、htmlファイルを作りましょう。
本記事では、以下のフォルダにhtmlファイルを作成します。
- 保存フォルダ: C:\Users\Public\Documents\start-bootstrap
- ファイル名 : start-bootstrap-cdn.html
2. htmlのソースコードを保存
次に、1で作成したファイル(start-bootstrap-cdn.html)に、下のソースコードをコピペして、保存しましょう。
copy
<!doctype html>
<html lang="ja">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Start Bootstrap</title>
</head>
<body>
<div class="container">
<h2>Start Bootstrap</h2>
<p>Bootstrapを使う準備は完了です、とても簡単ですね!</p>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
3. ブラウザでhtmlファイルを開く
保存したhtmlファイルをChromeなどのインターネットブラウザで開いて確認してみましょう。
ブラウザでの開き方は、【ファイル(start-bootstrap-cdn.html)を右クリック 】→ 【プログラムから開く】 → Google Chromeをクリック】することで可能です。
4. ブラウザで表示を確認
実際に開いてみると以下のような画面が表示されます。これでBootstrapを使うことができます!
Bootstrapの使い方(ファイルダウンロード)
cssやJavaScriptをファイルとして保存したい方は、以下の方法で必要なファイルをダウンロードして、ファイルを適切な場所に配置してください。
最終的には以下のようなフォルダ構造になります。
1. フォルダとファイルの作成
以下のように、フォルダとファイルを作成します。
なおCDNの時と同じように、start-bootstrapフォルダのパスは以下になります。
- 保存フォルダ : C:\Users\Public\Documents\start-bootstrap
2. Bootstrapのファイルをダウンロード
Bootstrapのファイルを以下のページからダウンロードしてください。
zipフォルダを解凍するとcssフォルダとjsフォルダがあります。それぞれにたくさんファイルが入っていますが、以下の2つのファイルを使用します。
- js \ bootstrap.bundle.min.js
- css \ bootstrap.min.css
以下を参考にして、cssのファイルと、javascriptのファイルを保存してください。
3. jQueryのファイルをダウンロード
jQueryのファイルを以下のページからダウンロードします。
リンクを左クリックすると、ファイルがダウンロードされずにソースコードが表示されてしまいます。
そのため、以下のようにリンクを【右クリック】 →【名前を付けてリンク先を保存】をしてファイルを保存してください。
ファイルをダウンロード出来たら、以下を参考にjavascriptのファイルを保存してください。
4. htmlのソースコードを保存
cssとJavaScriptのファイルを保存したら、htmlファイルに以下のソースコードをコピーしてファイルを保存しましょう。
copy
<!doctype html>
<html lang="ja">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Start Bootstrap</title>
</head>
<body>
<div class="container">
<h2>Start Bootstrap</h2>
<p>Bootstrapを使う準備は完了です!ファイルのURLを間違えないように気を付けましょう!</p>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script type="text/javascript" src="javascript/jquery-3.4.1.js"></script>
<script type="text/javascript" src="javascript/bootstrap.bundle.min.js"></script>
</body>
</html>
5. ブラウザで表示を確認
実際に開いてみると以下のような画面が表示されます。これでBootstrapを使うことができます!
レスポンシブデザインの入力フォームを作る
次は「ラベル」と「テキストボックス」を配置して入力フォームを作成します。
- 入力フォームを作成する場合には、まずformタグを作成する。
- formタグの中に「ラベル+テキストボックス」ごとにform-groupクラスを持つdivタグを作成する。
- その中にlabelタグとinputタグを入れる。
- inputにはform-controlクラスを設定する。
copy
<!doctype html>
<html lang="ja">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>ログインフォーム</title>
</head>
<body>
<!-- containerクラスで囲むことで、レスポンシブ対応します -->
<div class="container">
<h2>ログインフォーム</h2>
<!-- 入力フォーム -->
<form>
<div class="form-group">
<label for="exampleInputEmail">メールアドレス</label>
<input type="email" class="form-control" id="exampleInputEmail" aria-describedby="emailHelp" placeholder="xxx@gmail.com">
</div>
<div class="form-group">
<label for="exampleInputPassword">パスワード</label>
<input type="password" class="form-control" id="exampleInputPassword" placeholder="英数字8文字以上">
</div>
<button type="submit" class="btn btn-primary">ログイン</button>
</form>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
こちらのソースコードもコピペして、htmlファイルを開きなおしてください。
下の様に表示されていれば入力フォームの完成です。
そして、レスポンシブデザインになっていることを確認するために、画面の幅を小さくしてみましょう。
テキストボックスの大きさが、画面の大きさに合わせて小さくなっていることが確認できます。これだけでレスポンシブデザインの画面が作成できるのがBootstrapを使うメリットのひとつですね。
参考 Bootstrap公式のフォーム作成ページBootstrapまとめ
公式ページからコードをコピーして貼り付けることで、Bootstrapは簡単に始めることが出来ます。
公式ページにはWebページを作成するための様々なクラスが存在するので、試しながら作成して見てはいかがでしょうか。
僕は最近、Bootstrapのみを使って、以下の様なログイン画面と登録・一覧画面を作成しました。
一覧画面ではmediaクラスを使用しています。
クライアントサイドはBootstrap、サーバーサイドはPHPを使用して、簡単な登録画面を作成しました。
1. ログインユーザ作成
2. ログイン
3. 商品登録
4. 商品一覧 pic.twitter.com/LPRd3zHXF2— たけのこ (@takenoko_blog) June 16, 2018
関連記事
ランディングページを作成したい方はこちらもどうぞ。

今回はBootstrapだけでしたが、次はBootstrapとjQueryを使って簡単なTODOリストを作成する記事を書きました。
こちらもソースコードを貼ってあるので、コピペするだけで実装可能となっています。

この記事を読んだ方におすすめのサイト
Bootstrapの知識をさらに深めたい方には、UdemyのBootstrap4のコース がおすすめです。
Bootstrapを使用して、おしゃれなサンプルページを5つ作成することができるので、このコースを利用して実際に手を動かせば、かなり実践的な知識を得ることができます。