Bootstrap5 ファーストガイド

「レスポンシブ Web デザイン」を手軽に実現する Web 制作フレームワークの最新版! Bootstrap4 からの変更点も紹介。初めての方はもちろん、経験者にも役立つ詳細ガイド!

自分で CSS を細かく書かなくても、クラス名を付けるだけでパソコンとスマートフォンの両方に合う画面を組めるのが Bootstrap です。『Bootstrap 5 ファーストガイド』 (相澤裕介 著、カットシステム、2022 年 4 月刊) は、Bootstrap 5.1.3 の使い方を、導入からグリッドによるレイアウト、文字や表やフォームの書式、ナビゲーション、JavaScript を使う部品、カスタマイズまで全 6 章で解説した書籍です。副題は「Web 制作の手間を大幅に削減!」で、版元は初心者に加えて、Bootstrap 4 の経験者が Bootstrap 5 で変更された部分を確かめる用途にも役立つと案内しています。Bootstrap 4 の経験者に向けて、Bootstrap 4 からの変更点も紹介されています。NDL の書誌によると、サンプルファイルと索引が付いています。

導入とグリッドから Sass まで、全 6 章と簡易リファレンスの構成

第 1 章「Bootstrap 5 の導入」で特長と導入の手順、クラスの考え方、導入後に見た目がどう変わるかを確かめ、第 2 章でグリッドシステムと画面サイズに応じたレイアウトに進みます。第 3 章「コンテンツの書式指定」は文字と見出し、リスト、画像、ブロック要素、テーブル、アラートとカード、フォームまでを扱い、途中にフレックスボックスの活用の節を挟みます。第 4 章はリンクとボタン、ナビゲーションバー、パンくずリスト、ページネーション、リストグループ、バッジといった案内の部品です。第 5 章「JavaScript を利用したコンポーネント」はドロップダウン、モーダル、カルーセル、タブ切り替え、アコーディオン、オフキャンバス、スクロールスパイ、ツールチップとポップオーバー、トーストを取り上げます。第 6 章「Bootstrap のカスタマイズ」はテーマとテンプレート、カスタマイズサイトの活用、CSS ファイルのカスタマイズと圧縮版、Sass を使ったカスタマイズの 4 節です。巻末の付録は HTML の雛形から JavaScript の部品までを短くまとめた簡易リファレンスで、本文を読み終えた後に手元で引く使い方ができます。

クラス名で組むレスポンシブなレイアウトの考え方

レスポンシブ Web デザイン は、画面の幅に応じて同じ HTML の見え方を切り替える作り方です。素の CSS で書くと、メディアクエリで画面幅の区切りを決め、その区切りごとに幅や並び方を指定し直す作業が積み重なり、版元の言葉を借りれば「それなりの経験」が求められます。Bootstrap のグリッドシステムは、行と列を表すクラスと、画面幅の区切りを表す接頭辞を組み合わせることで、この切り替えを HTML の側のクラス名だけで書けるようにします。本書が第 2 章で早々にグリッドを扱い、第 3 章で Flexbox を使った並べ方に触れるのは、部品を飾る前に、どの画面幅でどこに何を置くかを決める土台が要るからだと読めます。部品のクラスを覚えるだけでなく、この土台の考え方を押さえておくと、Bootstrap 以外の CSS フレームワークや素の CSS に移った時にも応用が利きます。

初めての人と Bootstrap 4 の経験者に向く理由、向かない目的

版元によると Bootstrap は CSS と JavaScript で構成されているため、特別な環境を用意しなくても使えます。HTML のタグの書き方が分かっていれば、本書の手順に沿って画面を作り始めやすい構成です。Bootstrap 4 で作ったサイトを Bootstrap 5 へ移したい人にとっては、変更点をまとめて確認できる点が実務上の利点です。一方、本書の解説は Bootstrap 5.1.3 を前提にしているため、別の版を使う時はクラス名や部品の挙動を公式ドキュメントと照らし合わせながら読む必要があります。また、React や Vue のような JavaScript のフレームワークと組み合わせる方法は目次に節が無いため、その用途なら別の資料が要ります。Web の画面作りの学び方全体は Web デザイン本ガイド で整理しています。管理画面や社内向けの小さなサイトを、デザインの専任者がいない状態で見た目よく仕上げたい人には、第 1 章から順に手を動かすだけで成果が画面に出る一冊です。