CSSを一から書くのがつらくなってきた頃に、多くの人がたどり着くのがBootstrapです。ただ、公式ドキュメントを開くと英語のクラス名がずらりと並んでいて、どこから読めばいいのか分からずに閉じてしまう。そんな経験はないでしょうか。
実は、Bootstrapで最初に覚えるべきものは「導入方法」「グリッド」「余白のクラス」の3つだけです。この3つさえ押さえれば、簡単なページはその日のうちに組み上がります。
この記事では、Bootstrapをまったく触ったことがない方に向けて、導入から実際にページを組むところまでを順を追って解説します。コピーして動かせる形で進めるので、手を動かしながら読んでみてください。
Bootstrapとは何か
あらかじめ用意された部品の集合
Bootstrapは、ボタン・ナビゲーション・カード・モーダルといったWebサイトでよく使う部品を、CSSとJavaScriptのセットで提供しているフレームワークです。決められたクラス名を書くだけで、整った見た目の部品が表示されます。
現在の主流はBootstrap 5系です。4系まで動作に必要だったjQueryが不要になり、素のJavaScriptだけで動くようになりました。5.3以降ではダークモードにも対応しています。
どんな場面で使われているか
| 使われる場面 | 理由 |
|---|---|
| 社内システム・管理画面 | 見た目より機能が優先されるため |
| プロトタイプ・提案用の試作 | 短時間で形にできるため |
| 既存システムの保守 | 過去に導入されている案件が多いため |
| デザイナーがいない案件 | 初期状態でも一定の見栄えになるため |
導入方法は2通り
CDNを読み込む（初心者向け）
最も簡単な方法は、CDNのリンクをHTMLに貼るやり方です。ファイルのダウンロードもインストール作業も不要で、HTMLファイル1つあればすぐに試せます。
1. HTMLファイルを新規作成する
2. head内にviewportのmetaタグを書く
3. head内にBootstrapのCSSをlinkタグで読み込む
4. bodyの終了タグ直前にBootstrapのJavaScriptをscriptタグで読み込む
CDNのURLはバージョンごとに変わるため、Bootstrap公式の導入ページに記載されているコードをそのままコピーしてください。古い記事に載っているURLを使うと、意図しないバージョンが読み込まれることがあります。
ダウンロードして使う
ファイル一式をダウンロードして自分のサーバーに置く方法もあります。オフラインで作業したい場合や、CDNの利用が制限されている環境ではこちらを選びます。
Sassのソースを取得してカスタマイズしたい場合も、ダウンロード版またはnpm経由での導入が前提になります。
Sassでのカスタマイズに進む場合は、Sassの解説書で基本の書き方を押さえておくと、変数の扱いに迷いにくくなります。
・viewportのmetaタグを忘れると、スマホでレイアウトが崩れます
・JavaScriptを読み込まないと、モーダルや開閉メニューが動きません
・自作のCSSはBootstrapより後に読み込んでください（順番が逆だと上書きできません）
まず覚えるべき1つ目：グリッドシステム
横幅を12分割して考える
Bootstrapのレイアウトの中心にあるのがグリッドシステムです。画面の横幅を12個の区画に分けて、要素をいくつぶん占めるかで指定します。
3つの要素を横に均等に並べたいなら、それぞれ4区画ずつ（4＋4＋4＝12）。2つなら6区画ずつ。左に大きく、右に小さく置きたいなら8と4。この考え方で組み立てます。グリッドの土台にはCSSのFlexboxが使われているので、仕組みを知りたい方はMDN Web DocsのFlexbox解説にも目を通しておくと理解が深まります。
3つの階層で書く
| クラス | 役割 |
|---|---|
| container | 全体の幅を制御する外枠（container-fluidなら画面いっぱい） |
| row | 横1行のまとまりを作る |
| col-* | 行の中で何区画ぶん占めるかを指定する |
この3階層は入れ子にして使います。containerの中にrow、rowの中にcolを置く。この順番を崩すと余白が正しく効かなくなるので、最初のうちは形として覚えてしまうのが早道です。
画面幅ごとに変える
グリッドのクラスには、画面幅を示す文字を挟むことができます。「col-md-6」と書くと、中くらいの画面幅以上のときだけ6区画になり、それより狭い画面では横幅いっぱいになります。
| 記号 | 適用される画面幅の目安 | 想定端末 |
|---|---|---|
| （なし） | すべての幅 | 全端末 |
| sm | 576px以上 | 横向きのスマートフォン |
| md | 768px以上 | タブレット |
| lg | 992px以上 | ノートPC |
| xl | 1200px以上 | デスクトップ |
| xxl | 1400px以上 | 大型ディスプレイ |
Bootstrapはモバイルを基準に設計されているため、指定した幅「以上」で適用されるという点を押さえておいてください。ここを逆に理解していると、スマホでの表示が意図と違ってしまいます。
まず覚えるべき2つ目：余白のクラス
Bootstrapには、余白を指定するための短いクラスが用意されています。これを使うと、自作のCSSをほとんど書かずに間隔を調整できます。
| 書き方 | 意味 |
|---|---|
| m から始まる | margin（外側の余白） |
| p から始まる | padding（内側の余白） |
| t / b / s / e | 上 / 下 / 左 / 右 |
| x / y | 左右 / 上下 |
| 末尾の 0〜5 | 余白の大きさ（0がなし、5が最大） |
たとえば「mt-3」は上方向のmarginを中くらい、「py-5」は上下のpaddingを大きく、という意味になります。この命名規則を覚えるだけで、CSSファイルを開く回数が激減します。
あわせて、文字の配置（text-center）、色（text-primary、bg-light）、表示の切り替え（d-none、d-md-block）も頻出です。この4系統を押さえておけば、日常的な調整はほぼまかなえます。
余白や文字の配置といったCSSの考え方は、HTMLとCSSの入門書で確認しておくと、クラスの意味が理解しやすくなります。
まず覚えるべき3つ目：よく使う部品
ボタン
「btn」に続けて色を示すクラスを書きます。btn-primaryが青、btn-secondaryが灰色、btn-dangerが赤といった具合です。枠線だけにしたい場合はbtn-outline-primaryのように書きます。
カード
画像・見出し・本文・ボタンをひとまとめにして表示する部品です。商品一覧やブログの記事一覧でよく使われます。グリッドと組み合わせると、一覧レイアウトが短時間で完成します。
ナビゲーションバー
サイト上部のメニューです。スマホ幅では自動的にハンバーガーメニューに切り替わる仕組みが最初から入っています。自分で書くと数十行必要な処理が、クラス名の指定だけで完成します。
モーダル・アコーディオン
クリックで開くウィンドウや、開閉する折りたたみ要素です。これらはJavaScriptが必要なので、bodyの終了タグ直前にBootstrapのJSを読み込んでいることを確認してください。動かない場合、原因の大半はここです。
初期状態のデザインから抜け出すには
Bootstrapをそのまま使うと、いわゆる「Bootstrapらしい見た目」になります。管理画面なら問題ありませんが、企業サイトでは物足りなく見えることがあります。
・自作CSSで上書きする（手軽だが管理が煩雑になりやすい）
・Sassの変数を書き換えて再ビルドする（本格的だが環境構築が必要）
・CSS変数を上書きする（5系で利用しやすくなった方法）
手っ取り早いのは1番目です。ただし、上書きするCSSが増えすぎると、どちらが効いているのか分からなくなります。見た目を大きく変える予定があるなら、最初からTailwind CSSを選ぶほうが結果的に楽な場合もあります。
学習に使う環境の話
Bootstrapの学習は、公式ドキュメントとエディタとブラウザを行き来する作業です。クラス名を調べる頻度が非常に高いため、ドキュメントを常に開いておける画面があると効率がまったく違います。
24インチ以上のフルHD外付けモニターを1枚足して、左にドキュメント、右にエディタとブラウザという配置にするのが定番です。机の奥行きが足りない場合はクランプ式のモニターアームで土台のぶんを浮かせると、キーボードのスペースが確保できます。
紙の資料としては、Bootstrapのクラス早見表を印刷して手元に置いておく方法もあります。よく使うクラスは30個程度なので、A5サイズのリングノートに自分の言葉で書き出しておくと、検索する時間が減っていきます。
よくある質問
Q. CSSを知らなくてもBootstrapは使えますか
簡単なページなら形にはなります。ただし、思い通りに調整したい場面ではCSSの知識が欠かせません。とくにボックスモデルとFlexboxを知らないと、余白がずれたときに原因を特定できません。並行して基礎を学ぶことをおすすめします。
Q. モーダルが開かないのですが
JavaScriptが読み込まれていない可能性が高いです。bodyの終了タグ直前にBootstrapのJSを置いているか確認してください。また、data属性のスペルミスや、対象のIDが一致していないケースもよくあります。
Q. jQueryは必要ですか
Bootstrap 5系では不要です。4系までは必須でしたが、5系で依存がなくなりました。古い記事を参考にしてjQueryを読み込んでいる場合は、外しても動作します。
Q. WordPressのテーマに組み込めますか
組み込めます。ただし、テーマ側のCSSとクラス名が衝突する可能性があるため、読み込み順と影響範囲を確認しながら進めてください。既存テーマに部分的に足す場合は、必要な機能だけ自作するほうが安全なこともあります。
Q. Bootstrapを使うとSEOに不利になりますか
不利にはなりませんが、読み込むCSSとJSのファイルサイズが増えるため、表示速度には影響します。使っていない部分を削る、必要なコンポーネントだけを取り込むといった調整で改善できます。
Q. 実務でまだ使われていますか
使われています。とくに既存システムの保守や社内向けの画面では現役です。新規のモダンな開発ではTailwind CSSが選ばれることが増えていますが、Bootstrapを読める能力は今も求人で評価されます。
Q. どのくらいで使えるようになりますか
グリッドと余白のクラスに絞れば、数日で基本的なページは組めます。部品の使い方は必要になったときにドキュメントを引けば十分なので、最初から全部覚えようとしないでください。
まとめ
Bootstrapで最初に押さえるべきなのは、CDNでの導入、12分割のグリッドシステム、そして余白を指定するクラスの3つです。ここまでできれば、簡単なレスポンシブページはその日のうちに組み上がります。
部品の使い方は、必要になったときにドキュメントを引く形で問題ありません。ドキュメントは通読するものではなく、辞書として引くものだと捉えてください。
まずはHTMLファイルを1つ作り、CDNを読み込んで、containerとrowとcolだけで3列のレイアウトを組んでみてください。ブラウザ幅を縮めたときに縦に積み上がる動きを見れば、グリッドの感覚がつかめます。
