Bootstrap 4フロントエンド開発の教科書
技術評論社
著者：WINGSプロジェクト 宮本麻矢、朝平文彦
監修：山田祥寛
はじめに
本書の読み方
目次
第1章 イントロダクション
1.1 Webアプリケーションフレームワークの基本
1.1.1 Web アプリケーションフレームワークとは
1.1.2 フレームワーク導入の利点
1.2 Bootstrapの特徴
1.2.1 レスポンシブWebデザインに対応
1.2.2 グリッドシステムによるレイアウト
1.2.3 デザイン性に優れたコンポーネント
1.3 Bootstrapの歴史
1.3.1 Bootstrapの誕生と歩み
1.3.2 バージョンによる違い
1.4 Bootstrapの導入
1.4.1 Bootstrapの導入に必要な環境
1.4.2 ダウンロードして利用する
1.4.3 HTMLの雛形
1.4.4 CDNを利用する
第2章 Bootstrapのレイアウト
2.1 Bootstrapのグリッドシステム
2.1.1 カラム(column:列)とガター(gutter:溝)
2.1.2 コンテナ(container:箱)
2.1.3 rowクラス(行)
2.1.4 グリッドシステムの使い方
2.2 列の自動レイアウト
2.2.1 等幅カラム
2.2.2 指定幅カラム
2.2.3 1 カラムのみ幅を設定(残りのカラムは自動的に等幅)
2.3 レスポンシブなグリッドシステム
2.3.1 5 段階のレイアウト制御
2.3.2 ブレイクポイントによる切り替え
2.3.3 可変幅カラム
2.3.4 等幅カラムを複数行に分割
2.3.5 行の分割をブレイクポイントで切り替え
2.3.6 複数クラスの組み合わせ
2.4 カラムの整列
2.4.1 行単位での垂直方向の整列
2.4.2 カラム単位での垂直方向の整列
2.4.3 水平方向の整列
2.4.4 ガターの削除
2.4.5 カラムの折り返し
2.5 カラムの並べ替え
2.5.1 order-*クラスで並べ替え
2.5.2 カラムのオフセット
2.5.3 グリッドレイアウトの入れ子(ネスト)
2.6 レイアウトのためのユーティリティ
2.6.1 Displayユーティリティ
2.6.2 Visibilityユーティリティ
2.6.3 Flexユーティリティ
2.6.4 Spacingユーティリティ
第3章 基本的なスタイリング
3.1 タイポグラフィ
3.1.1 見出し
3.1.2 見出しに副見出しを付ける
3.1.3 見出しを目立たせる
3.1.4 リード
3.1.5 インラインテキスト要素
3.1.6 Textユーティリティ
3.1.7 略語
3.1.8 引用文
3.1.9 引用元の表示
3.1.10 引用文の位置合わせ
3.1.11 リスト
3.1.12 インラインリスト
3.1.13 定義リスト
3.2 コード
3.2.1 インラインのコード表記
3.2.2 コードブロックの表記
3.2.3 変数の表記
3.2.4 ユーザーインプットの表記
3.2.5 サンプル出力
3.3 画像
3.3.1 レスポンシブ画像
3.3.2 サムネイル画像
3.3.3 画像の位置合わせ
3.4 テーブル
3.4.1 テーブルの基本スタイリング
3.4.2 暗色テーブル
3.4.3 テーブルヘッドのオプション
3.4.4 縞模様のテーブル
3.4.5 罫線付きのテーブル
3.4.6 罫線なしのテーブル 4.1
3.4.7 テーブル行のマウスオーバー表示
3.4.8 テーブルのコンパクト化
3.4.9 テーブル行・セルの色付け
3.4.10 キャプション
3.4.11 レスポンシブ対応のテーブル
3.5 図表
3.5.1 図表の基本的なスタイリング
3.5.2 図表キャプションの位置合わせ
3.6 Rebootによる初期設定
3.6.1 Reboot によって初期化されているスタイル
3.6.2 全要素へのリブート設定
3.6.3 body要素へのリブート設定
3.6.4 見出しと段落へのリブート設定
3.6.5 リストへのリブート設定
3.6.6 整形済みのテキストへのリブート設定
3.6.7 テーブルへのリブート設定
3.6.8 フォームへのリブート設定
3.6.9 リンクへのリブート設定
3.6.10 その他要素へのリブート設定
3.6.11 HTML5 の hidden 属性
第4章 基本的なコンポーネント
4.1 ジャンボトロン
4.1.1 基本的な使用例
4.1.2 ジャンボトロンを全幅で表示する
4.2 アラート
4.2.1 基本的な使用例
4.2.2 リンクの色
4.2.3 アラート内にコンテンツを追加する
4.2.4 アラートを閉じる
4.3 バッジ
4.3.1 基本的な使用例
4.3.2 カウンターを作成する
4.3.3 ピル型のバッジを作成する
4.3.4 アクション付きのバッジを作成する
4.4 プログレス
4.4.1 基本的な使用例
4.4.2 プログレスバーにテキストラベルを追加する
4.4.3 プログレスバーの高さを変更する
4.4.4 プログレスバーの背景を変更する
4.4.5 複数のプログレスバーを重ねて表示する
4.4.6 プログレスバーをストライプにする
4.4.7 プログレスバーのストライプをアニメーションにする
4.5 カード
4.5.1 基本的な使用例
4.5.2 カードのスタイルを変更する
4.5.3 カードのサイズを変更する
4.5.4 カードのテキストを整列する
4.5.5 カードにナビゲーションを組み込む
4.5.6 カードの画像とテキストを重ね合わせる
4.5.7 カードをレイアウトする
4.6 メディアオブジェクト
4.6.1 基本的な使用例
4.6.2 メディアオブジェクトの入れ子
4.6.3 メディアの位置合わせ
4.6.4 メディアオブジェクトの並べ替え
4.6.5 メディアオブジェクトをリストに組み込む
第5章 ナビゲーションのコンポーネント
5.1 ナビゲーション
5.1.1 基本的な使用例
5.1.2 ナビゲーションに使用できるスタイル
5.1.3 レスポンシブ対応のナビゲーション
5.1.4 ドロップダウンナビゲーション
5.1.5 ナビゲーションのJavaScript使用例
5.2 ナビゲーションバー
5.2.1 外枠の作成
5.2.2 サブコンポーネントの作成
5.2.3 ナビゲーションバーの配色
5.2.4 ナビゲーションバーの幅の設定
5.2.5 ナビゲーションバーの配置
5.2.6 レスポンシブ対応の設定
5.3 パンくずリスト
5.3.1 基本的な使用例
5.4 リストグループ
5.4.1 基本的な使用例
5.4.2 リスト項目をアクティブ状態にする
5.4.3 リスト項目を無効状態にする
5.4.4 リンク付きリストグループ
5.4.5 ボタンのリストグループ
5.4.6 リストグループの背景色を変更する
5.4.7 リンク付きリストグループの背景色を変更する
5.4.8 バッジ付きリストグループ
5.4.9 カスタムコンテンツのリストグループ
5.4.10 枠なしのリストグループ 4.1
5.5 ページネーション
5.5.1 基本的な使用例
5.5.2 ページネーションにアイコンを使用する
5.5.3 リンクに無効状態や現在位置であることを示す
5.5.4 ページネーションのサイズを変更する
5.5.5 ページネーションの配置
第6章 フォームとボタンのコンポーネント
6.1 フォーム
6.1.1 基本的な使用例
6.1.2 チェックボックスとラジオボタン
6.1.3 レイアウトを調整する
6.1.4 ヘルプテキストを表示する
6.1.5 一連のフォームグループをまとめて無効にする
6.1.6 フォームの入力検証機能を使う
6.1.7 Bootstrap独自にスタイル設定されたフォームを使用する
6.2 入力グループ
6.2.1 基本的な使用例
6.2.2 入力グループのサイズ調整
6.2.3 チェックボックスやラジオボタンのアドオン
6.2.4 複数の入力コントロール
6.2.5 複数のアドオンを組み合わせる
6.2.6 ボタン付きアドオン
6.2.7 ドロップダウン付きアドオン
6.2.8 スプリットボタンのアドオン
6.2.9 カスタムフォームの組み込み
6.3 ボタン
6.3.1 基本的な使用例
6.3.2 アウトラインボタンを作成する
6.3.3 ボタンサイズを変更する
6.3.4 ブロックレベルのボタンを作成する
6.3.5 アクティブ状態のボタンを作成する
6.3.6 無効状態のボタンを作成する
6.3.7 切り替えボタンを作成する
6.3.8 チェックボックスとラジオボタンを作成する
6.3.9 メソッド
6.4 ボタングループ
6.4.1 基本的な使用例
6.4.2 ボタンツールバーを作成する
6.4.3 サイズを変更する
6.4.4 ドロップダウンメニューを入れ子にする
6.4.5 垂直方向のボタングループを作成する
6.5 ドロップダウン
6.5.1 基本的な使用例
6.5.2 ドロップダウン方向を変更する
6.5.3 メニュー項目のリンクに使用できる要素
6.5.4 メニューの位置揃えを変更する
6.5.5 ドロップダウンメニューにさまざまな要素を組み込む
6.5.6 ドロップダウンメニューに自由形式のテキストを配置する 4.1
6.5.7 ドロップダウンのメニュー項目に無効やアクティブの状態を設定する
6.5.8 ドロップダウンにリンクなしのメニュー項目を追加する 4.1
6.6 ドロップダウンのJavaScript使用
6.6.1 ドロップダウンのオプション
6.6.2 ドロップダウンのメソッド
6.6.3 ドロップダウンのイベント
第7章 JavaScriptを利用したコンポーネント
7.1 BootstrapのJavaScriptプラグイン
7.1.1 BootstrapのJavaScriptファイル
7.1.2 Bootstrapのデータ属性API
7.2 カルーセル
7.2.1 基本的な使用例
7.2.2 コントローラーを表示させる
7.2.3 インジケーターを表示させる
7.2.4 スライドのキャプションを表示させる
7.2.5 フェードで遷移させる 4.1
7.3 カルーセルのJavaScript使用
7.3.1 カルーセルのメソッド
7.3.2 カルーセルのイベント
7.4 折り畳み
7.4.1 基本的な使用例
7.4.2 複数の要素の表示と非表示とを切り替える
7.4.3 アコーディオンを作成する
7.5 折り畳みのJavaScript使用
7.5.1 折り畳みのメソッド
7.5.2 折り畳みのイベント
7.6 モーダル
7.6.1 基本的な使用例 4.1
7.6.2 サイズのオプション 4.1
7.7 モーダルのJavaScript使用
7.7.1 モーダルのメソッド
7.7.2 モーダルのイベント
7.8 スクロールスパイ
7.8.1 基本的な使用例
7.8.2 body要素以外の要素での使用例
7.9 スクロールスパイのJavaScript使用
7.9.1 スクロールスパイのメソッド
7.9.2 スクロールスパイのイベント
第8章 ユーティリティ
8.1 Colorユーティリティ
8.1.1 文字色を設定するクラス
8.1.2 背景色を設定するクラス
8.2 Borderユーティリティ
8.2.1 ボーダーを追加するクラス
8.2.2 ボーダーを削除するクラス
8.2.3 ボーダー色を設定するクラス
8.2.4 角丸を設定するクラス
8.3 Displayユーティリティ
8.3.1 表示形式を設定するクラス
8.3.2 要素の表示/非表示を設定するレスポンシブなクラス
8.3.3 印刷時の表示/非表示を設定するクラス
8.4 Sizingユーティリティ
8.4.1 幅を設定するクラス
8.4.2 高さを設定するクラス
8.4.3 最大幅100%を設定するクラス
8.4.4 最大高100%を設定するクラス
8.5 Spacingユーティリティ
8.5.1 Spacingユーティリティの記法
8.5.2 自動マージンの応用
8.6 Flexユーティリティ
8.6.1 flexbox を有効にするクラス
8.6.2 flex コンテナの主軸方向を設定するクラス
8.6.3 主軸方向の整列をするクラス
8.6.4 交差軸方向の整列をするクラス
8.6.5 flexアイテムを交差軸上で個別に整列するクラス
8.6.6 flexコンテナ全幅に渡って等幅で整列するクラス
8.6.7 flexアイテムの幅の伸縮を指定するクラス
8.6.8 flexアイテムの折り返しを設定するクラス
8.6.9 特定のflexアイテムの表示順序を入れ替えるクラス
8.6.10 自動マージンでflexアイテムを分離する
8.6.11 複数行におけるflexアイテムの交差軸の整列をするクラス
8.7 Floatユーティリティ
8.7.1 フロートを設定するクラス
8.7.2 ブレイクポイントでフロートを切り替えるクラス
8.7.3 Clearfix ユーティリティ
8.8 Positionユーティリティ
8.8.1 要素の位置指定をするクラス
8.8.2 最上部に固定するクラス
8.8.3 最下部に固定するクラス
8.8.4 最上部に達すると固定するクラス
8.9 Textユーティリティ
8.9.1 文字の均等割り付けを設定するクラス
8.9.2 文字の左寄せ/右寄せ/中央揃えを設定するクラス
8.9.3 文字を折り返さないよう設定するクラス
8.9.4 長いテキストを省略記号で表すクラス
8.9.5 文字を大文字や小文字に変換するクラス
8.9.6 文字の太さとイタリック体を設定するクラス
8.9.7 等幅フォントを指定するクラス 4.1
8.10 Vertical alignユーティリティ
8.10.1 インライン要素の垂直方向の整列
8.10.2 テーブルセルの垂直方向の整列
8.11 その他のユーティリティクラス
8.11.1 スクリーンリーダー用ユーティリティ
8.11.2 Visibilityユーティリティ
8.11.3 クローズアイコンユーティリティ
8.11.4 Embedユーティリティ
8.11.5 Shadowsユーティリティ 4.1.0
第9章 Bootstrapでモックアップを作る
9.1 サイト概要とファイルの準備
9.1.1 サイト概要
9.1.2 ワイヤーフレームの確認
9.1.3 使用する主なコンポーネント
9.2 新規ファイル作成
9.2.1 head 要素の修正
9.2.2 基本構造の入力
9.3 ヘッダーの作成
9.4 ナビゲーションバーの作成
9.4.1 ナビゲーションバーのレイアウト
9.4.2 ナビゲーションバーの基本構成
9.4.3 サブコンポーネントの組み込み
9.4.4 ナビゲーションバーの完成図
9.5 メインビジュアルの作成
9.5.1 メインビジュアルのレイアウト
9.5.2 メインビジュアルの基本構成
9.5.3 インジケーターの組み込み
9.5.4 各スライドの組み込み
9.5.5 各コントローラーの組み込み
9.5.6 メインビジュアルの完成図
9.6 コンテンツ01（News）の作成
9.6.1 コンテンツ01のレイアウト
9.6.2 コンテンツ01の構成
9.6.3 コンテンツ01の完成図
9.7 コンテンツ02（About）の作成
9.6.1 コンテンツ02のレイアウト
9.6.2 コンテンツ02の構成
9.6.3 コンテンツ02の完成図
9.8 コンテンツ03（Menu）の作成
9.6.1 コンテンツ03のレイアウト
9.6.2 コンテンツ03の構成
9.6.3 コンテンツ03の完成図
9.9 コンテンツ04（Coupon）の作成
9.6.1 コンテンツ04のレイアウト
9.6.2 コンテンツ04の構成
9.6.3 コンテンツ04の完成図
9.10 コンテンツ05（Information）の作成
9.10.1 コンテンツ05のレイアウト
9.10.2 コンテンツ05の構成
9.10.3 左側セクションにテーブルを作成
9.10.4 右側セクションに Google マップを埋め込み
9.10.5 コンテンツ05の完成図
9.11 フッターの作成
9.11.1 フッターのレイアウト
9.11.2 フッターの構成
9.11.3 フッターの完成図
9.12 リンクの設定と追加CSSの作成
9.12.1 ナビゲーションバーのリンク
9.12.2 コンテンツ02のリンク
9.12.3 フッターのリンク
9.12.4 ページ内リンクの位置調整
9.13 下層ページ（Contact）の作成
9.13.1 ファイルの準備
9.13.2 下層ページのレイアウト
9.13.3 下層ページの構成
9.13.4 パンくずリストの作成
9.13.5 フォームの作成
9.13.6 下層ページの完成図
第10章 Bootstrapのカスタマイズ
10.1 Bootstrapのオリジナルスタイルを上書きする
10.1.1 カスタマイズ用CSSを参照する
10.1.2 BootstrapのCSS設計の方針
10.1.3 クラス名の付け方のポイント
10.1.4 スタイルを上書きする際の注意点
10.2 Sassを使ってカスタマイズする
10.2.1 Sassの利用環境を整える
10.2.2 SCSSファイルの準備
10.2.3 背景色にグラデーションを使用できるようにする
10.2.4 Sass変数を上書きする
10.2.5 基本の配色を変更する
10.2.6 body の背景色、文字色、リンク色を変更する
10.2.7 Spacingユーティリティを変更する
10.2.8 Sizingユーティリティを変更する
10.2.9 ブレイクポイントを変更する
10.2.10 コンテナを変更する
10.2.11 グリッドのカラム数やガター幅を変更する
10.2.12 書式を変更する
10.3 CSS変数を利用する
10.3.1 Bootstrapで定義されているCSS変数
10.3.2 ミックスインを利用する
索引