【ぶーとすとらっぷ】

Bootstrap とは？

最終更新: 2026年10月4日

💡 Webデザインの「既製品カタログ」

Twitter社内で生まれた、Web画面を作るためのフロントエンドフレームワーク。ボタンやフォームのCSS、画面幅に応じたグリッド、動きのある部品用のJavaScriptなどを提供する。

📌 このページのポイント

CSSを読み込み、row内に3つの部品を配置した例。幅の境界はカスタマイズできます。

ひよこ

Bootstrapって何がうれしいの？

ペンギン先生

BootstrapのCSSを読み込んで、ボタンに「class="btn btn-primary"」と付けると、用意されたスタイルを使えるんだ。フォームやナビゲーションも、自分で一から作る手間を減らせるよ

ひよこ

ペンギン先生

画面幅に合わせて配置を変えることだよ。たとえばrowの中の3つの部品に「col-12 col-md-4」を付けると、標準設定では768px未満は1列、768px以上は3列になる。機種名ではなく幅で切り替わるんだ

ひよこ

Bootstrapで作ったサイトって全部同じに見えない？

ペンギン先生

標準のスタイルを使えば共通した見た目になるね。色や余白を変えたいなら、Sass変数やCSS変数を調整したり独自のCSSを追加したりできる。どこまで変えるかは画面の目的に合わせて決めよう

ひよこ

Bootstrap 5はjQueryが必要？

ペンギン先生

Bootstrap 5ではjQueryへの依存がなくなり、プラグインは通常のJavaScriptで書かれているよ。ただし、部品によってはPopperなど別の依存があるので、使う部品の導入方法を確認しよう

ひよこ

ReactやVueと一緒に使えるの？

ペンギン先生

CSSは使えるよ。ただしBootstrapのJavaScriptとReactやVueが同じDOMを変更すると不具合が起きることがある。動く部品には各フレームワーク向けの実装を検討し、対応バージョンや機能を確認しよう

まとめ：ざっくりこれだけ覚えればOK！

「Bootstrap」って出てきたら「Web画面の見た目と部品を手早く整える道具集」と思えばだいたいOK！

📖 おまけ：英語の意味

「Bootstrap」＝ブートストラップ

💬 Twitter社内でTwitter Blueprintとして開発され、2011年にBootstrapとして公開されたよ

参考資料