Bootstrap 5 フロントエンド開発の教科書

高性能・高機能 CSS フレームワークとして高い人気を誇る「Bootstrap」がバージョン 5 になり、レガシーな IE 対応や jQuery コードの完全排除、コンポーネントやフォームの刷新、CSS Grid 対応などが行われた、より洗練されたモダンなフレームワークへと生まれ変わりました。本書は、Bootstrap 5 の基本から、CSS クラスを利用したスタイリング、コンポーネントや JavaScript を利用した UI 実装などを解説、後半では Web ページのモックアップの実装方法やオリジナルフレームワークを作るためのカスタマイズ方法などもていねいに解説しているので、1 冊で Bootstrap 5 の基礎から活用方法まで、すべて身に付く内容になっています。

Bootstrap は、用意されたクラス名を HTML に付けていくだけで、整ったレイアウトや部品を組み上げられる CSS フレームワークです。『Bootstrap 5 フロントエンド開発の教科書』 (WINGS プロジェクト 山内 直 著、山田 祥寛 監修、技術評論社、2022 年 1 月刊) は、そのバージョン 5 を対象に、基本から CSS クラスによるスタイリング、コンポーネントと JavaScript を使った UI の実装、後半では Web ページのモックアップの作り方や独自のフレームワークに仕立てるためのカスタマイズまでを解説した書籍です。版元は、Bootstrap 5 でレガシーな IE への対応と jQuery のコードが完全に取り除かれ、コンポーネントやフォームの刷新、CSS Grid への対応が行われたと紹介しています。

全 10 章と移行ガイドの構成、レイアウトからカスタマイズまで

第 1 章のイントロダクションでは、Web アプリケーションフレームワークの基本、Bootstrap の特徴と歴史、導入方法、Bootstrap Icons の使い方を扱います。第 2 章はグリッドシステムを中心としたレイアウトで、カラムの自動レイアウト、レスポンシブなグリッド、整列と並べ替えまでを押さえます。第 3 章はタイポグラフィ、画像、テーブルなどの基本的なスタイリングと Reboot による初期設定、第 4 章から第 6 章はアラートやカード、ナビゲーションバー、ページネーション、フォーム、ボタン、ドロップダウンといったコンポーネント群、第 7 章はカルーセル、モーダル、オフキャンバス、トースト、ツールチップなど JavaScript を利用するコンポーネントです。第 8 章では色、余白、表示、Flex、位置などのユーティリティとヘルパーを一通り整理します。第 9 章は架空のお店のサイトを題材に、ヘッダーからナビゲーション、メインビジュアル、各コンテンツ、フッター、下層のお問い合わせページまでを順に作るモックアップの実習で、第 10 章でオリジナルのスタイルの上書き、Sass によるカスタマイズ、CSS 変数 の利用を学びます。巻末には Bootstrap 5 移行ガイドの付録が置かれています。

クラスで組み立てる設計を理解すると何が変わるか

Bootstrap の中心にあるのは、画面幅をブレークポイントで区切り、行と列のクラスで配置を決める 12 カラムのグリッドと、余白や色、表示の切り替えを 1 つの目的ごとに用意したユーティリティクラスです。どのクラスがどの CSS に対応しているかを理解していれば、見た目の調整のたびに独自の CSS を書き足す必要が減り、複数人で作業しても画面の作りがそろいやすくなります。逆に、仕組みを知らずにサンプルを貼り合わせると、クラスの指定が衝突したり、独自 CSS で上書きを重ねて保守しにくくなったりします。本書がコンポーネントの紹介だけで終わらず、ユーティリティに 1 章、Sass と CSS 変数によるカスタマイズに 1 章を割いているのは、既製の見た目から自分のデザインへ寄せていく段階で必要になる知識だからです。ユーティリティを組み合わせる発想は Tailwind CSS と共通する部分もありますが、Bootstrap は完成済みのコンポーネント群を土台に持つ点が大きく異なり、管理画面や社内ツールのように、整った UI を短い時間で用意したい場面と相性の良い選択肢です。

前提となる HTML と CSS の知識、この本が合わない場合

読み進めるには、HTML の要素の入れ子と CSS のセレクターやボックスモデルの基本を理解していることが前提になります。Bootstrap のクラスは素の CSS の上に成り立っているため、CSS をまったく書いたことがない段階では、なぜその見た目になるのかを追い切れません。HTML と CSS そのものから学びたい人は、Web デザイン本ガイド で入門書を先に選ぶほうが近道です。また本書は 2022 年 1 月刊で、その後の 5 系の小さな版上げで加わった機能 (たとえば 5.3 のカラーモード) は含まれません。React や Vue と組み合わせた部品化の方法を学ぶ本でもない点も押さえておく必要があります。

Bootstrap 4 から 5 へ乗り換える人、管理画面や試作のページを素早く形にしたいエンジニア、あるいは Bootstrap を使っているのにクラスの意味があいまいなまま貼り合わせている人にとって、グリッドからカスタマイズまでを 1 冊で順に確認できる本書は、手元に置いて引き直す価値のある一冊です。第 9 章のモックアップの実習を手で追えば、実際のページを組む流れもつかめます。