Bootstrap 5 フロントエンド開発の教科書
技術評論社
著者：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.2.4 使い勝手のよいユーティリティとヘルパー
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を利用する
1.4.5 RTLサポートについて
1.5 BootstrapIconsの利用
1.5.1 BootstrapIconsとは
1.5.2 BootstrapIconsの入手
1.5.3 外部イメージとして呼び出す
1.5.4 SVGを埋め込む
1.5.5 アイコンスプライトを使う
1.5.6 アイコンフォントを使う
1.5.7 CSSに埋め込む
第2Bootstrapのレイアウト
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.2.4 カラムの折り返し
2.2.5 行を指定列数で折り返す
2.2.6 行を自動的に折り返す
2.3 レスポンシブなグリッドシステム
2.3.1 6 段階のレイアウト制御
2.3.2 ブレイクポイントによる切り替え
2.3.3 可変幅カラム
2.3.4 等幅カラムを複数行に分割
2.3.5 行の分割をブレイクポイントで切り替え
2.3.6 複数クラスの組み合わせ
2.3.7 列数をブレイクポイントで切り替え
2.4 カラムの整列
2.4.1 行単位での垂直方向の整列
2.4.2 カラム単位での垂直方向の整列
2.4.3 水平方向の整列
2.4.4 ガターの設定
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 罫線なしのテーブル
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 リブートによって初期化されているスタイル
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.1.3 アラート内にコンテンツを追加する
4.1.4 アラートにアイコンを付ける
4.1.5 アラートを閉じる
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.3.5 複数のプログレスバーを重ねて表示する
4.3.6 プログレスバーをストライプにする
4.3.7 プログレスバーのストライプをアニメーションさせる
4.4 カード
4.4.1 基本的な使用例
4.4.2 カードのスタイルを変更する
4.4.3 カードのサイズを変更する
4.4.4 カードのテキストを整列する
4.4.5 カードにナビゲーションを組み込む
4.4.6 カードの画像とテキストを重ね合わせる
4.4.7 カードを水平にする
4.4.8 カードグループによるレイアウト
4.5 スピナー
4.5.1 基本的な使用例
4.5.2 伸縮するスピナー
4.5.3 スピナーの大きさを変更する
4.5.4 スピナーの配置を指定する
4.6 プレースホルダー【5.1】
4.6.1 基本的な使用例
4.6.2 プレースホルダーの幅と色を指定する
4.6.3 プレースホルダーの高さを指定する
4.6.4 プレースホルダーをアニメーションさせる
第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.2.7 オフキャンバスの組み込み【5.1】
5.3 パンくずリスト
5.3.1 基本的な使用例
5.3.2 ディバイダーを変更する
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 枠なしのリストグループ
5.4.11 番号付きのリストグループ
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 フローティングラベル
6.1.8 一連のフォームグループをまとめて無効にする
6.1.9 フォームの入力検証機能を使う
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.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.4.6 垂直方向のボタングループを作成する
6.5 ドロップダウン
6.5.1 基本的な使用例
6.5.2 ドロップダウンメニューを暗くする
6.5.3 ドロップダウン方向を変更する
6.5.4 メニュー項目のリンクに使用できる要素
6.5.5 メニューの位置揃えを変更する
6.5.6 ドロップダウンメニューにさまざまな要素を組み込む
6.5.7 ドロップダウンメニューに自由形式のテキストを配置する
6.5.8 ドロップダウンのメニュー項目に無効やアクティブの状態を設定する
6.5.9 ドロップダウンにリンクなしのメニュー項目を追加する
6.5.10 ドロップダウンJavaScript使用
第7章 JavaScriptを利用したコンポーネント
7.1 BootstrapJavaScriptプラグイン
7.1.1 BootstrapJavaScriptファイル
7.1.2 Bootstrapのデータ属API
7.2 カルーセル
7.2.1 基本的な使用例
7.2.2 コントローラーの表示
7.2.3 インジケーターの表示
7.2.4 スライドのキャプションの表示
7.2.5 フェードによる遷移
7.2.6 スライドの切り替え時間を変更する
7.2.7 コントローラーなどを暗くする
7.2.8 カルーセルJavaScript使用
7.3 折り畳み
7.3.1 基本的な使用例
7.3.2 表示と非表示を水平方向に切り替える【5.1】
7.3.3 複数の要素の表示と非表示とを切り替える
7.3.4 アコーディオンの作成
7.3.5 折り畳みJavaScript使用
7.4 モーダル
7.4.1 基本的な使用例
7.4.2 サイズのオプション
7.4.3 フルスクリーンのモーダル
7.4.4 モーダルの切り替え
7.4.5 モーダルJavaScript使用
7.5 オフキャンバス
7.5.1 基本的な使用例
7.5.2 表示位置の変更
7.5.3 バックドロップとスクロールの切り替え
7.5.4 オフキャンバスJavaScript使用
7.6 ポップオーバー
7.6.1 基本的な使用例
7.6.2 表示位置の変更
7.6.3 無効な要素のポップオーバー
7.6.4 ポップオーバーJavaScript使用
7.7 スクロールスパイ
7.7.1 基本的な使用例
7.7.2 body要素以外の要素での使用例
7.7.3 スクロールスパイJavaScript使用
7.8 トースト
7.8.1 基本的な使用例
7.8.2 トーストの積み重ね
7.8.3 コンテンツのカスタマイズ
7.8.4 トーストに色を付ける
7.8.5 トーストJavaScript使用
7.9 ツールチップ
7.9.1 基本的な使用例
7.9.2 HTMLを使ったツールチップ
7.9.3 無効な要素のツールチップ
7.9.4 ツールチップJavaScript使用
第8章 ユーティリティとヘルパー
8.1 ColorsユーティリティBackgroundユーティリティ
8.1.1 文字色を設定するクラス(Colorsユーティリティ)
8.1.2 背景色を設定するクラス(Backgroundユーティリティ)
8.1.3 リンク色を設定するクラス(Coloredlinksヘルパー)
8.2 Bordersユーティリティ
8.2.1 ボーダーを追加するクラス
8.2.2 ボーダーを削除するクラス
8.2.3 ボーダー色を設定するクラス
8.2.4 ボーダー幅を設定するクラス
8.2.5 角丸を設定するクラス
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.5.3 ギャップの設定(Gapユーティリティ)
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.6.12 Flexユーティリティによるメディアオブジェクト
8.7 Floatユーティリティ
8.7.1 フロートを設定するクラス
8.7.2 ブレイクポイントでフロートを切り替えるクラス
8.7.3 Clearfixヘルパー
8.8 PositionユーティリティPositionヘルパー
8.8.1 要素の位置指定をするクラス
8.8.2 配置位置を指定する
8.8.3 配置位置に要素の中心がくるようにする
8.8.4 最上部に固定するクラス
8.8.5 最下部に固定するクラス
8.8.6 最上部に達すると固定するクラス
8.9 Textユーティリティ
8.9.1 文字の左寄せ/中央揃え/右寄せを設定するクラス
8.9.2 文字を折り返さないよう設定するクラス
8.9.3 長いテキストを省略記号で表すクラス
8.9.4 文字を大文字や小文字に変換するクラス
8.9.5 文字のサイズを設定するクラス
8.9.6 文字の太さとイタリック体を設定するクラス
8.9.7 行の高さを指定するクラス
8.9.8 等幅フォントを指定するクラス
8.10 Verticalalignmentユーティリティ
8.10.1 インライン要素の垂直方向の整列
8.10.2 テーブルセルの垂直方向の整列
8.11 その他のユーティリティクラスとヘルパークラス
8.11.1 Visuallyhiddenヘルパー
8.11.2 Visibilityユーティリティ
8.11.3 Ratioヘルパー
8.11.4 Shadowsユーティリティ
8.11.5 Interactionsユーティリティ
8.11.6 Overflowユーティリティ
8.11.7 Stretchedlinkヘルパー
8.11.8 StacksヘルパーVerticalruleヘルパー【5.1】
8.11.9 透明度ユーティリティ【5.1】
第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(ニュース)の作成
9.6.1 コンテンツ 01 のレイアウト
9.6.2 コンテンツ 01 の構成
9.6.3 コンテンツ 01 の完成図
9.7 コンテンツ 02(お店について)の作成
9.7.1 コンテンツ 02 のレイアウト
9.7.2 コンテンツ 02 の構成
9.7.3 コンテンツ 02 の完成図
9.8 コンテンツ 03(商品一覧)の作成
9.8.1 コンテンツ 03 のレイアウト
9.8.2 コンテンツ 03 の構成
9.8.3 コンテンツ 03 の完成図
9.9 コンテンツ 04(クーポン)の作成
9.9.1 コンテンツ 04 のレイアウト
9.9.2 コンテンツ 04 の構成
9.9.3 コンテンツ 04 の完成図
9.10 コンテンツ05(インフォメーション)の作成
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 下層ページ(お問い合わせ)の作成
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 BootstrapCSS設計の方針
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 スペーサーを変更する
10.2.8 ブレイクポイントを変更する
10.2.9 コンテナを変更する
10.2.10 グリッドのカラム数やガター幅を変更する
10.2.11 書式を変更する
10.2.12 ユーティリティAPIを使う
10.3 CSS変数を利用する
10.3.1 Bootstrapで定義されていCSS変数
10.3.2 ミックスインを利用する
付録:Bootstrap 5 移行ガイド
11.0.1 全般
11.0.2 基本的なレイアウト
11.0.3 基本的なスタイリング
11.0.4 基本的なコンポーネント
11.0.5 ナビゲーション
11.0.6 フォーム
11.0.7 JavaScriptコンポーネント
11.0.8 ユーティリティとヘルパー
11.0.9 カスタマイズ
索引