Bootstrapの基本
Bootstrapとは
Webサイト開発はここ数年で大きく変化した。大きな要因の1つがスマートフォンである。スマートフォンはPCより画面が小さく縦長なので、PC向けのページをそのまま表示すると小さく読みにくい。PC用とスマートフォン用のページを別々に用意すると、同じ内容を二重に更新しなければならず非効率である。
この問題を解決する考え方がレスポンシブデザインである。画面環境に応じて最適なレイアウトを自動表示する。Bootstrapは、それを簡単に実現するためのフロントエンドWebアプリケーションフレームワークである。
BootstrapはMark OttoとJacob Thorntonを中心に開発されたオープンソースで、Twitter社内で使われていたUIコンポーネント集が元になっている。HTML、CSS、JavaScriptだけで整ったUI/UXを作れるため、デモやプロトタイプ作成にも便利である。
Bootstrapはファイルをダウンロードしてサイトへ組み込む方法と、CDNから読み込む方法がある。CDNを使えばファイルを自分で配置する必要はない。
Bootstrapのファイル構成
Bootstrapの配布ファイルはZIP形式で、展開すると必要なファイルがフォルダごとに整理されている。
Bootstrapのダウンロード
GitHubからダウンロードする。 https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip
または、BootstrapのGetting Startedページからダウンロードする。 http://getbootstrap.com/getting-started/
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
スタイルシート、フォント、JavaScriptがそれぞれ整理されている。min付きのファイルは圧縮版で、内容は通常版と同じである。
BootstrapにはjQueryも必要である。Bootstrap本体にはjQueryが含まれないため、CDNを使わない場合はjQueryを別途ダウンロードしてjsフォルダに配置する。
jQueryのダウンロード
Bootstrapの基本コード
ローカルにBootstrapファイルを置く場合の基本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</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/bootstrap-theme.min.css">
</head>
<body>
<div class="container">
<h1>Hello, world!</h1>
<p>This is Bootstrap sample page!</p>
</div>
<script src="./js/jquery-3.1.1.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
</body>
</html>
bootstrap.cssとbootstrap-theme.cssの読み込み
Bootstrapではスタイルシートが重要な役割を持つ。bootstrap.cssとbootstrap-theme.css、またはそれぞれのmin版を読み込む。
スクリプトの読み込み位置
スクリプトはjQueryとBootstrap本体の2つである。テンプレートではbody内容の後に読み込む。<head>内でも動作する場合はあるが、テンプレートに合わせるのがわかりやすい。
表示内容は<div class="container">内に書く
containerクラスは内容の周囲に適切な余白を付ける。これがないとウィンドウ端まで内容が詰まり、Bootstrapらしいレスポンシブ表示になりにくい。
CDNを使う
Bootstrapのアップロードや管理を減らしたい場合はCDNを使える。
<!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</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h1>Hello, world!</h1>
<p>This is Bootstrap sample page!</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" crossorigin="anonymous"></script>
</body>
</html>
BootstrapのCSSとJavaScriptはbootstrapcdn.comから、jQueryはGoogle Ajax APIから読み込んでいる。CDNは管理が楽でバージョンアップもしやすいが、CDN側の問題で読み込みが遅くなる可能性はある。
コンパイルして使う
Less、JavaScript、Fontを含むソースパッケージも利用できる。 https://github.com/twbs/bootstrap/archive/v3.3.7.zip
BowerでBootstrapをインストールする
bower install bootstrap
Bootstrapには複数の導入方法がある。用途と難易度に応じて選べばよい。
<meta>タグについて
Bootstrapを使うページでは、次のmetaタグを入れておくとよい。
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Internet Explorerの互換表示を避け、標準モードで表示させるための指定である。
<meta name="viewport" content="width=device-width, initial-scale=1">
スマートフォンでのビューポート倍率を設定する。端末に応じた表示を行うために必要である。
Bootstrapの構成
Bootstrapの使い方は大きく3つに分けられる。
- CSS stylesheet
- Reusable component
- JavaScript component