Bootstrapとは
BootstrapはTwitter社が開発したCSSの「フレームワーク」1です。通常CSSを書く場合、全てのスタイルを自分で作っていく必要がありますが、このフレームワークにはよく使われるスタイルがあらかじめ定義してあるので、ルールに沿って利用するだけで整ったデザインのページを作成できます。
Bootstrapでできること
-
レスポンシブWebデザインに対応している
通常、スマートフォンやタブレットなど個別に対応するスタイルを作っていると大変手間がかかります。BootstrapはCSS3のメディアクエリを使用しているので、ブラウザの横幅サイズを判断基準として、レイアウトデザインを柔軟に調整することが可能です。 -
デザイン部品が使える
フォーム・ボタン・ナビゲーションなど、すでにデザインされた部品が使用できます。
他にも公式リファレンスに色々載っていますのでご確認ください。 -
画面のレイアウトがササっと作れる
レイアウトを作るために便利な「グリッドシステム」があり、画面を12分割した数字を入れるだけで、簡単に要素を指定することができます。
https://websae.net/twitter-bootstrap-grid-system-21060224/ - たくさんのアイコンが使える]
Bootstrapには「FontAwesome」というアイコン集が収録されており、様々なデザインのアイコンを使用することができます。
https://getbootstrap.jp/docs/4.3/extend/icons/#preferred
https://primer.style/octicons/
使う準備
Bootstrapを使用するには、BootstrapとjQuery（JavaScriptのライブラリ）を読み込む必要があります。読み込みの方法は下記の2パターンです。
- ソースをダウンロードして、ローカルに配置して読み込む
- すでにホストされているファイルをインターネット経由で読み込む
今回は、前者の方法を紹介します。
以下のサイトから「コンパイルされた CSS と JS」をダウンロードします。
https://getbootstrap.jp/docs/5.0/getting-started/download/
zipファイルを解凍すると、cssとjsの２つのフォルダがあればOKです。
次にBootstrapを使用するindex.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のJavaScriptは、jQueryを読み込んだ後に読み込みましょう！
以下metaタグの説明。
<meta http-equiv="X-UA-Compatible" content="IE=edge">
InternetExplorerのブラウザではバージョンによって崩れることがあるので、互換表示をさせないために設定するmetaタグ。
<meta name="viewport" content="width=device-width, initial-scale=1">
レスポンシブWebデザインを使うために必要なmetaタグ
実際にBootstrapを使用してみましょう
まずは、フォームを例に画面に描画させていきます。以下ソースをコピーしてbodyタグ内に貼り付けてみましょう。
画面を確認すると、スタイルを定義していないのにも関わらず、よくありそうなボタンが表示されているかと思います。これらはBootstrapですでに定義されているスタイルが適用されており、簡単にデザインされたものを使用することができます。
<h2>フォーム</h2>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input
type="email"
class="form-control"
id="exampleInputEmail1"
aria-describedby="emailHelp"
placeholder="Enter email"
/>
<small id="emailHelp" class="form-text text-muted"
>We'll never share your email with anyone else.</small
>
</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 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1" />
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
</form>
次に、ボタンを画面に描画させていきます。以下ソースをコピーしてbodyタグ内に貼り付けてみましょう。こちらもすでにデザインされたボタンが表示されているかと思います。
<!-- BootstrapからコピーしたボタンのHTML -->
<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>
<button type="button" class="btn btn-link">Link</button>
グリッドシステムについて
Bootstrapにはレスポンシブデザインを作るときに便利なグリッドシステムという機能があります。少し複雑で難しいかと思いますが、理解するとより効率的にページを作成することができます。
以下サイトを参考に説明していきます。
https://websae.net/twitter-bootstrap-grid-system-21060224/
機能の拡張について
余裕があればこちらもご確認ください。
Bootstrapではすでにスタイルが定義されていますが、それしか使えない訳ではありません！
そのスタイルを拡張してカスタマイズすることも可能です。
https://blog.yuhiisk.com/archive/2016/03/22/customize-the-css-of-bootstrap.html
参考
-
開発を行う際に、頻繁に必要とされる基礎的な機能をまとめて提供してくれるものです。そのため、枠組みを使って作業（プログラミング）をするのがフレームワークになります。 ↩