ISBN: 978-4-297-12490-8
Bootstrap 5 フロントエンド開発の教科書
WINGSプロジェクト 山内直 著
| 著者 | WINGSプロジェクト 山内直 |
|---|---|
| 監修 | 山田祥寛 |
| 出版社 | 技術評論社 |
| 価格 | 3,480円（税別） |
| 判形 | B5変版・4色＋1色 |
| ページ数 | 544ページ |
| 発売日 | 2022年1月7日 |
| シリーズ | フロントエンド開発の教科書 |
| 対象レベル | 初中級 |
Amazon
Bootstrap 5の基礎と活用方法を身につけよう
高性能・高機能CSSフレームワーク「Bootstrap」の解説書です。バージョン5では、レガシーなIE対応やjQueryコードの完全排除、コンポーネントやフォームの刷新、CSS Grid対応などが行われました。
Bootstrap 5の基本から、CSSクラスを利用したスタイリング、コンポーネントやJavaScriptを利用したUI実装などを解説します。後半ではWebページのモックアップの実装方法やオリジナルフレームワークを作るためのカスタマイズ方法なども紹介します。
更新履歴
- 正誤訂正：2025年8月23日 更新
目次
- 第1章 イントロダクション
- 1.1 Webアプリケーションフレームワークの基本
- 1.2 Bootstrapの特徴
- 1.3 Bootstrapの歴史
- 1.4 Bootstrapの導入
- 1.5 Bootstrap Iconsの利用
- 第2章 Bootstrapのレイアウト
- 2.1 Bootstrapのグリッドシステム
- 2.2 カラムの自動レイアウト
- 2.3 レスポンシブなグリッドシステム
- 2.4 カラムの整列
- 2.5 カラムの並べ替え
- 2.6 レイアウトのためのユーティリティ
- 第3章 基本的なスタイリング
- 3.1 タイポグラフィ
- 3.2 コード
- 3.3 画像
- 3.4 テーブル
- 3.5 図表
- 3.6 Reboot（リブート）による初期設定
- 第4章 基本的なコンポーネント
- 4.1 アラート
- 4.2 バッジ
- 4.3 プログレス
- 4.4 カード
- 4.5 スピナー
- 4.6 プレースホルダー
- 第5章 ナビゲーションのコンポーネント
- 5.1 ナビゲーション
- 5.2 ナビゲーションバー
- 5.3 パンくずリスト
- 5.4 リストグループ
- 5.5 ページネーション
- 第6章 フォームとボタンのコンポーネント
- 6.1 フォーム
- 6.2 入力グループ
- 6.3 ボタン
- 6.4 ボタングループ
- 6.5 ドロップダウン
- 第7章 JavaScriptを利用したコンポーネント
- 7.1 BootstrapのJavaScriptプラグイン
- 7.2 カルーセル
- 7.3 折り畳み
- 7.4 モーダル
- 7.5 オフキャンバス
- 7.6 ポップオーバー
- 7.7 スクロールスパイ
- 7.8 トースト
- 7.9 ツールチップ
- 第8章 ユーティリティとヘルパー
- 8.1 ColorsユーティリティとBackgroundユーティリティ
- 8.2 Bordersユーティリティ
- 8.3 Displayユーティリティ
- 8.4 Sizingユーティリティ
- 8.5 Spacingユーティリティ
- 8.6 Flexユーティリティ
- 8.7 Floatユーティリティ
- 8.8 PositionユーティリティとPositionヘルパー
- 8.9 Textユーティリティ
- 8.10 Vertical alignmentユーティリティ
- 8.11 その他のユーティリティクラスとヘルパークラス
- 第9章 Bootstrapでモックアップを作る
- 9.1 サイト概要とファイルの準備
- 9.2 新規ファイル作成
- 9.3 ヘッダーの作成
- 9.4 ナビゲーションバーの作成
- 9.5 メインビジュアルの作成
- 9.6 コンテンツ01（ニュース）の作成
- 9.7 コンテンツ02（お店について）の作成
- 9.8 コンテンツ03（商品一覧）の作成
- 9.9 コンテンツ04（クーポン）の作成
- 9.10 コンテンツ05（インフォメーション）の作成
- 9.11 フッターの作成
- 9.12 リンクの設定と追加CSSの作成
- 9.13 下層ページ（お問い合わせ）の作成
- 第10章 Bootstrapのカスタマイズ
- 10.1 Bootstrapのオリジナルスタイルを上書きする
- 10.2 Sassを使ってカスタマイズする
- 10.3 CSS変数を利用する
- 付録 Bootstrap 5移行ガイド
正誤表
| 該当頁 | 該当箇所 | 修正刷 |
|---|---|---|
| 訂正箇所 | 訂正事項 | 更新日 |
| p.30 | 2.1.1項 | 2刷 |
| 12に分割されたグリッドの列をカラム（column：列）と言い、各カラムの間の余白をガター（gutter：溝）と言います。ガターは、水平方向に対するものと垂直方向に対するものがあります。水平方向にはカラムの左右に均等にガターが設けられ、垂直方向にはカラムの上にのみガターが設けられます。 | 12に分割されたグリッドの列をカラム（column：列）と言い、各カラムに設けられた余白をガター（gutter：溝）と言います。ガターは、水平方向に対するものと垂直方向に対するものがあります。水平方向にはカラムの左右内側に均等にガターが設けられ、垂直方向にはカラムの上にのみガターが設けられます。 | 2022/02/28 |
| p.30 | 図2-1 カラムとガター | - |
| - | 図を下記に訂正 https://www.naosan.jp/books/support/29712490/fig2-1.png |
2022/02/28 |
| p.148 | リスト4-31 ピル型のナビゲーション（card-nav-pills.html） | 2刷 |
| <!-- ピル型のナビゲーション：card-header-pills --> <li class="nav-item"> |
<!-- ピル型のナビゲーション：card-header-pills --> <ul class="nav nav-pills card-header-pills"> <li class="nav-item"> |
2022/01/11 |
| p.456 | リスト9-18 コンテンツ03 全体のレイアウト（contents-03-layout.html） | - |
| <section id="menu"> | <section id="items"> | 2025/08/23 |
| p.457 | リストの下1行目 | - |
| id 属性値をmenuと設定します | id 属性値をitemsと設定します | 2025/08/23 |
FAQ
現在、FAQはありません。
ダウンロード
お問い合わせ
書籍に関するご質問や誤りのご報告、ご意見・ご感想などをお寄せください。
お問い合わせの前にFAQ・正誤表をご確認ください。すでに掲載済みの内容については個別回答が難しい場合があります。