HTML/CSSを勉強中、もしくは制作中に
デザインやCSSコーディングで手詰まりだと感じていませんか？
確かにWeb制作をする上で、デザインは欠かせないものです。
「HTML/CSSは使えるけどかっこいいデザインが思い浮かばない…。」
「試しに作ってみたけどなんかダサい」
「もっと簡単に管理できるWebサイトが作りたい！！」
「でもWordpressを使うのはちょっと…。」
といったような悩みを抱える方も少なくないでしょう。
HTMLとCSSの知識を使いながら、見た目や配置の土台を整えたいときに役立つのがBootstrapです。現在の見本は、Bootstrap公式のExamplesで確認できます。
掲載画像は以前の制作例です。画像と同じ画面やボタンを探すのではなく、以下の手順と使用する版の公式資料を見比べて進めましょう。
今回は、「コーディングの知識を活かしながら！」「簡単に！」「綺麗なサイトを作れる！」
「Bootstrap」について、導入方法までを詳しく解説していきます！
↓より実践的な部分に踏み込んで詳しく解説した記事はこちら↓
そもそも「Bootstrap」って何？
Bootstrapとは、CSSフレームワークと呼ばれる「デザインの枠組み」の一種です。
CSSファイルをほぼ触ることなく、HTMLにclassを書き足していく事でレスポンシブにも対応した本格的なWebサイトを制作することが可能です。
もともとはTwitter社内で作られたフロントエンドの道具で、現在はオープンソースのプロジェクトとして提供されています。なお、Bootstrapはページの見た目や動きを組み立てるもので、WordPressのような記事管理の仕組みとは役割が違います。
この記事の導入コードは、2026年10月29日に公式資料で確認したBootstrap 5.3.8に合わせています。Bootstrap4は2023年1月1日に公式のサポートが終了しています。旧版の画面・クラス・コードを、Bootstrap5と混ぜて使わないでください。
余談ですが、他にも Ulkit, Milligram, Bulma, Foundationなど、多くのCSSフレームワークがあります。使用感やカスタマイズ性も多種多様な為、自分に合ったものを探してみるのもいいかもしれません。
では実際にBootstrapを使ったとき、どのようなメリットがあり、逆にどのようなデメリットがあるのか詳しく解説していきます。
メリットとデメリット
メリット
・デザインがよく分からなくても綺麗なWebサイトが作れる
Bootstrapにおける最大の魅力の一つです。テンプレートも無料で多く公開されているので、自分のイメージに近いものをほぼ完成した形で手に入れることもできます。
・圧倒的な時間短縮が可能
CSSを記述する手間が最小限まで抑えられるため、
微調整に悩むストレスフルな時間も無くなり、快適な制作環境が手に入ります。嬉しい。
・JavaScriptも手軽に扱うことができる
Bootstrap5には、メニューの開閉などに使うJavaScriptの部品も用意されています。jQueryは必須ではありません。使いたい部品のHTMLと、対応するJavaScriptを公式の説明に合わせて読み込みます。
・Gridシステムでレスポンシブデザインも簡単に
BootstrapにはGridシステムと呼ばれる独自のシステムが使用されています。活用することで効率的にレスポンシブデザインを作り上げることもできます。
デメリット
・ワークフレームごとのルールを覚える必要がある
Bootstrapを含むCSSワークフレームは、独自のclassやidを用いたりしている為覚えておかなければ予期せぬ事故に繋がることがあります。ここでふるいにかけられ「結局CSS書いたほうが早くね」となる人も多いです。
・似たデザインになりがち
WordPress等にも言えることですが、テンプレートを用いる場合滲み出るBootstrap感はどうしても拭えないでしょう。Web制作に携わる人であれば「あ、これはBootstrapかな」と気づくこともあります。
・使わないCSS等も記載されているのでファイル容量が無駄
標準のCSSには多くの部品や補助クラスが含まれるため、使わないものも読み込む場合があります。ファイルの量は版や配布形式で変わるので、行数だけで重さを決めつけず、実際の表示速度と必要な機能で判断しましょう。必要に応じて、使う機能を選んで組み立てる方法もあります。
・HTMLに直接記入するため、ソースコードが散らかる
BootstrapではHTML内の要素に、適用したいCSSに対応するclassを記入する必要があります。
(例：h2のmarginを0にしたいとき →<h2 class="m-0">hogehoge</h2>)
気づけば大量のclassが振られていてタグがどこにあるのかわからなくなることも…。
・バージョンアップ時の仕様変更についていくのが大変
大きなバージョンが変わると、クラス名や対応するブラウザ、JavaScriptの条件が変わることがあります。Bootstrap4から5への移行でも、jQueryへの依存の廃止や、左右を示すクラス名の変更があるため、ファイルを置き換えるだけで完了とは考えないでください。
既存のサイトでは、まず使用中の版を確認し、公式の移行ガイドと照合してから、表示と動きを試しましょう。
以下では、新しく学習する場合の導入手順を説明します。
続いて、詳しい導入方法を簡単に解説していきます。
導入方法
使用方法は大きく分けて二種類！「ダウンロードして使う場合」と「CDNで使う場合」に分けられます。
・CDNとは
コンテンツデリバリネットワーク(英: content delivery network、CDN)とは、
<引用:Wikipedia>
ウェブコンテンツをインターネット経由で配信するために最適化されたネットワークのことである。コンテンツ配信網とも呼ばれる。
(中略)
コンテンツデリバリネットワークを用いることにより、ウェブのみならず、大容量アプリケーション、音楽、動画の配信やオンラインゲームといったブロードバンドのコンテンツを配信することが安定かつ低コストで行えるようになる。
そのためビジネス分野において注目されている。
CDNを使う方法では、BootstrapのCSSやJavaScriptを自分の作業フォルダへ保存せず、配信先のURLをHTMLに指定して読み込めます。準備を減らせますが、CDNにするだけで必ず表示が速くなるわけではありません。使う版をそろえ、公式資料のURLと整合性を確かめる値を一組で使いましょう。
しかし、外部サーバーからダウンロードを行うため、「ネット環境がない」「参照しているサイトのリンク切れ」「参照しているサーバーが落ちた」などのイレギュラーが発生した場合、レイアウトが崩れてしまうこともあります。
状況に応じた使い分けが必要になってくるでしょう。
CDNについて詳しく知りたい方は是非一度こちらのブログを読んでみてください。
https://www.1-firststep.com/archives/2142
それでは、導入方法について解説していきます。
1.CDNでの導入方法
公式サイトの「Get started」から、使用する版の「Get started with Bootstrap」を開きます。この記事ではBootstrap5.3の「Quick start」を使います。旧画面の位置ではなく、ページ名と版を確かめてください。
https://getbootstrap.com/
「Quick start」には、基本のHTMLと、CSS・JavaScriptを読み込む完成例があります。CSSのlinkタグはhead内へ、JavaScriptのscriptタグはbodyの閉じタグの直前へ置きます。両方とも同じ版の例を使い、CDNのURLだけでなくintegrity・crossorigin属性も一緒にコピーしてください。
まず動作を試すなら、CSSとJavaScriptを含む「Quick start」の完成例から始めましょう。日本語のページではhtmlのlangをjaにし、viewportの指定も残します。ファイルをブラウザで開き、表示を確認します。
これで準備は完了となります。bodyタグ内に本文の記述をしましょう！
使用の際は＜html lang="en"＞を"ja"に書き換えるのをお忘れなく…！
続いて、ダウンロードでの導入方法を解説していきます。
2.ダウンロードでの導入方法
必要なもの
- Bootstrap本体(CSS・JavaScriptファイル)
- HTMLファイル
- 使用する版の公式資料（Bootstrap5ではjQueryは必須ではありません）
これだけです。制作中で、既にHTMLファイルをお持ちの方はそれを使用するのも良いでしょうしお持ちでない方はテンプレートを使用するのも良いです。
では、必要なファイルをダウンロードしていきます。
公式サイトにアクセスし、Downloadをクリックします。https://getbootstrap.com/
ページが表示されるとCompiled CSS and JSという項目がありますのでダウンロードしましょう。
公式の「Compiled CSS and JS」から取得したZIPを展開します。この記事で確認した5.3.8の場合、配布フォルダはbootstrap-5.3.8-distです。掲載画像の4.xという名前を現在の配布物の名前として探さないようにしましょう。
展開したフォルダ内に「css」「js」というフォルダがありますのでここにHTMLファイルを作っていただいても大丈夫ですし、別の作業フォルダにコピーして使っていただいても大丈夫です。
作業フォルダにHTMLと、読み込むcss・jsフォルダを配置します。画像は旧版の配置例なので、jQueryのファイルがないことだけを不備と考えないでください。HTMLに書いた相対パスと、実際の保存場所を合わせましょう。
Bootstrap5はjQueryを必須としません。下のコードは、Bootstrap5のCSSとbootstrap.bundle.min.jsを読み込む例に更新しています。
従来のjQuery公式サイトへのリンクは関連資料として残しますが、別のプラグインのために使う場合は、そのプラグインが対応する版を確認してください。「最新ならどれでも互換性がある」とは考えないようにします。
次にHTMLの記述を行っていきます。以下のコードをコピーし、ご自身のHTMLファイルに貼り付けてください。
Bootstrap5のbootstrap.bundle.min.jsには、ドロップダウンなどの位置調整に使うPopperも含まれます。このbundleを使う例では、Popperを別に読み込む必要はありません。ファイル名にbundleがないものや、別版の例と混ぜないでください。
※Bootstrap以外のCSSを使わない方は
<!--style.css-->
<link rel="stylesheet" href="css/style.css">
の部分を削除しておきましょう。
| <!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrapの練習</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- 自分のCSSを使う場合 --> <link href="css/style.css" rel="stylesheet"> </head> <body> <h1>Bootstrapの練習</h1> <script src="js/bootstrap.bundle.min.js"></script> </body> </html> |
これで一通りの準備は完了となります。
どちらを使うかは皆さん次第ですが、個人的にはCDNの方が楽でいいですね。
まとめ
Bootstrapは、HTMLとCSSを使ってページを組み立てるための道具です。用意された部品やテンプレートをカスタマイズする方法として、Bootstrap（CSSフレームワーク）はデザイン初心者の方にもオススメできるツールです。
また、CSSを使いこなせる方でも、簡単なワイヤーフレームを作りたい時や仕事の効率化を図りたい時に、一度使ってみてはいかがでしょうか？
次回【実践編】では簡単なページを例に、詳しい使い方の紹介と、HTMLテンプレートの見本と利用条件の紹介をしていきます！
参考資料（2026年10月29日確認）：Bootstrap5：導入手順／配布ファイル／JavaScriptの条件／旧版からの移行／Bootstrap4のサポート終了。
