【Bootstrap 4】ホームページのプログラムを簡単にやろう！（導入）
ホームページをPCとスマホに対応したりカルーセルを作ったりするのが大変ですよね。そこで、Bootstrap 4を使用すれば簡単にできますよ。というお話です。
目次
Bootstrapとは
今回紹介するBootstrapは、CSSのフレームワークです。あらかじめ良く使用されるスタイルがまとめてあります。
Twitter社が開発したCSSの「フレームワーク」です。通常CSSを書く場合、全てのスタイルを自分で作っていく必要がありますが、このフレームワークにはよく使われるスタイルがあらかじめ定義してあるので、ルールに沿って利用すると整ったデザインのページを作成できます。なんといっても無料！！
必要なファイル
以下の4つのファイルが必要です。
Bootstrap.js Bootstrap.css Download · Bootstrap
jquery(バージョン).js Download jQuery | jQuery
popper.js Releases · FezVrasta/popper.js · GitHub
Bootstrap.jsの取得方法
Download · Bootstrapをクリックしていただくと、こんな画面が表示されるので、
「Compiled CSS and JS」のダウンロードボタンをクリックしてください。
（Windowsの場合）
圧縮ファイルのダウンロードダイアログが出るので、そのまま「OK」を押してください。
圧縮ファイルを展開すると
この2つをこれから作業するフォルダにおいてください。
JQueryの導入
Download jQuery | jQueryをクリックしていただくと「Download the compressed, production jQuery 3.4.0」というのがあるので、ダウンロードしてください。（最新版でOKです）
右クリックして、リンク先を保存していただければOKです。
そして先ほどの、「js」フォルダの中においてください。
popper.jsの取得方法
Releases · FezVrasta/popper.js · GitHubをクリックしていただくと、先頭に「Latest release」のバージョンのファイルがあるので、zipかtar.gzのどちらかをダウンロードしてください。
展開した後に、中に「dist 」フォルダがあるので全てBootstrapの「js」フォルダに入れてください。
入れるとこんな感じになると思います。
vscodeで開いてみました。
簡単な紹介
ボタンの表示です。コピペで動作します。
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<title>Sample</title>
</head>
<body>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
動作させると以下の様に様々な色のボタンが表示されます。コード上ではclassでbtn-***を指定するだけである程度の色を設定できます。この様に大量にclassやjavascriptで動作が設定されており、呼び出すだけで簡単に作れます。
また、レスポンシブレイアウトも簡単に作れちゃいます。
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<title>Sample</title>
</head>
<body>
<div class="row m-t-1">
<div class="col-xs-10 bg-primary">① 0px以上で10列幅のボックス</div>
</div>
<div class="row m-t-1">
<div class="col-sm-6 bg-success">② 544px以上で6列幅のボックス</div>
</div>
<div class="row m-t-1">
<div class="col-md-2 bg-info">③ 768px以上で2列幅のボックス</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
実行結果
画面サイズ①
画面サイズ①（大きくしました。）
何が良いかというと、1つのhtmlファイル内でPC用とスマホ用の画面が簡単に作れることですね。いちいちPC用とスマホ用にCSSに設定を書き込む必要がなくて楽ちんです。
気になる点
色とかボタンの形とかは基本的に決められているため、Bootstrapをそのまま使ってたら丸わかりですしあまりかっこよく無いですね。（笑）
まとめ
Bootstrapは有名なCSSの「フレームワーク」で、使い勝手もいい感じです。ただし、レイアウトについては変更も加えていきたい所だと思います。また今度、変更方法をUPしますね。
