Bootstrapとは ～メリット・デメリット～
WEBSAS を支えるデザイン担当者がお届けする連載コラム。 第九弾は、「Bootstrap とは」。
Bootstrap とは何か、どんなことができるのかを簡単に解説していきます。
こんな悩みをお持ちの方に
- サイトデザインから公開まで一人でスピード開発したい
- サイト開発のチームにデザイナがいない
- HTMLはなんとなくわかるが、デザインからHTMLを作り出す自信がない
- Bootstrapってどんなことができるのかざっくり知りたい
WEBSAS デザイナー
Bootstrapって何？
Web開発の現場でよく聞く「Bootstrap」。
これは「Webフレームワーク」と呼ばれるものです。
ボタンやモーダルなどWebサイトでよく使う機能やデザインがパッケージされています。
Bootstrapでできること
公式ページ左上の「ドキュメント」からどんなことができるのか、どんなパーツがあるのかを見てみましょう。
以下はその一例です。
Columns
要素を横に並べたいときに。
子要素の縦横表示位置、大きさなどが選べます。
「Layout」>「Columns」
フローティングラベル
入力時にアニメーションする入力フォームのラベル。
「Forms」>「Floating labels」
アコーディオン
初期表示で開く、他を開くと閉じる、開くのは一つだけなど機能変更も可能です。
「Components」>「Accordion」
カード
右図以外にもデザインやレイアウトが豊富です。
「Components」>「Card」
テキスト
実際にパーツを作りながら見ていきましょう。
Bootstrapを導入する
導入は簡単。リンクを貼るだけです。
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-64UC4BEhTGwk3eGpak4nO2jqtl7liTS+juXkSJ2gPAQPmlClQO7s5UgCeR6US48g" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-jdSIJTK9l6XwXj3RixpVDXtMcA2bFd9O81RlLAwhpr2oXRqvQP88rr16IeFXTgFE" crossorigin="anonymous"></script>
※上記はCDNを利用する方法です。JavaScriptの知識がある方はnpmなどパッケージマネージャ経由で始めることができます。
次はパーツを表示させてみましょう。
ページの両端に丸く切り抜いた画像を表示する
まずはどんなことができるのか公式ドキュメントを確認します。
参考ドキュメントの例
HTML
<div class="row">
<div class="col-6"><img src="..." alt="..." class="rounded-circle"></div>
<div class="col-6 text-end"><img src="..." alt="..." class="rounded-circle"></div>
</div>
表示結果
CSSを書き足すことなくできました。
レイアウトの変更に強いBootstrap
それでは次に、左右の画像の真ん中に1つ足してみましょう
HTML
<div class="row">
<div class="col-4"><img src="..." alt="..." class="rounded-circle"></div>
<div class="col-4 text-center"><img src="..." alt="..." class="rounded-circle"></div>
<div class="col-4 text-end"><img src="..." alt="..." class="rounded-circle"></div>
</div>
簡単にできました。
ここでは「col-4」に注目してください。
末尾の数字を足して12になるようにすればレイアウトを自在に変えられそうです。
表示結果
Bootstrapの表現力
さらに丸い画像を四角く、額縁風に変えましょう。
HTML
<div class="row">
<div class="col-4"><img src="..." alt="..." class="img-thumbnail"></div>
<div class="col-4 text-center"><img src="..." alt="..." class="img-thumbnail"></div>
<div class="col-4 text-end"><img src="..." alt="..." class="img-thumbnail"></div>
</div>
表示結果
imgタグのclass名変更で実現できました。
ちょっとかっこいいサイトを作れる、ノンデザイナーに優しいBootstrap
公式ページのHTMLを参考にするだけで形ができました。
Bootstrapにはよく使うパーツが網羅されているため、大体のレイアウトは実現できます。
特にフォームは殆どのパーツがそろっています。これらは通常のCSSでもデザインの変更に手間がかかるので、大いに工期短縮が見込めます。
HTMLの書き方が決まっているのも強みです。
HTMLの知識がない人でも部品を組み合わせていくだけで正しいHTML構造が実現できます。
正しいHTMLはアクセシビリティ向上やSEOにも役立ちます。
翻って、スクラッチ開発ではHTML構造が統一しにくいという問題があります。
複数人でHTMLコーディングを進めていく場合、コーディングするメンバーによってHTMLに差異が発生することも。
HTMLの雛形やコーディングルールを定めても、吸収できない部分は出てきます。
HTML構造が揃っていないと、保守に手間取ったりプログラムが上手く動かなかったり。
開発終了後も苦しむことになる頭の痛い問題です。
このような場合にもBootstrapは力を発揮します。
スクラッチ開発より低い学習コストで「正しく」「統一された」HTMLを量産することができるのです。
Bootstrapでオリジナリティを出すのは難しい
さて、こんな便利なBootstrapにも弱点はあります。
レイアウトの変更例をご紹介した際、CSSの追加はありませんでした。しかしCSSの知識が皆無というわけにはいきません。
例えば、Bootstrapを使わないパーツを組み込んだ場合。
他パーツに馴染むようにCSSで装飾を施さなければなりません。
お客様の要件は様々。いかに豊富に揃うBootstrapとはいえ、すべてをカバーできるわけではありません。
また、デザインを変更しようとした場合、多くの修正が発生します。
色や形を変えても「Bootstrap風」を消すのは至難の業。
少しカスタマイズをしたところで「おや、このデザインはどこかで見たことがあるぞ？」というサイトの出来上がり。
デザインにこだわるページの場合、Bootstrapを使うより時間がかかったということもあるかもしれません。
Bootstrapの特徴まとめ
メリット
- 閲覧環境を吸収
- レスポンシブ対応サイトを手軽に実装できる
- デザインに疎くても新しいデザインを取り入れることができる
- デザイン工程とコーディング工程をまとめることができ、工期が短縮される
デメリット
- Bootstrapの記法を習得する必要がある
- デザインが画一的になりがち
- Bootstrapにないパーツが必要になった場合、作成に時間がかかる
Bootstrapを使うか否かは、作りたいサイトのデザイン次第
さて、あなたの業務にBootstrapを導入すべきでしょうか？
スクラッチ開発の方が手っ取り早いかもしれませんよ？
条件さえ合致すれば工期短縮の強い味方となるでしょう。
デメリットもあることを忘れずにご検討ください。
向いている場面
- Bootstrapのデザインのままで良い
- デザイナーがいない
- 単純でシステマチックな画面が多い
- 工期が短い
向いていない場面
- 独自デザインを反映したい
- 開発後、HTML構造を変更できない
- CSSをカスタマイズできるメンバーがいない
よくある質問
Bootstrap 利用時のよくあるご質問についてご回答します。
Q. アイコンも使いたい
A. 「Bootstrap Icons」が使えます
https://icons.getbootstrap.jp/
Bootstrap 本体と同じようにリンクを張るだけで豊富なアイコンが使用できます。
Q. 全体的に色を変えたい
A. 可能です。
ただし大規模な修正が発生します。
基本の色を変更して確認してみましょう。
<head>
<!-- ① Bootstrap CDNの読み込み -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
<!-- ② カスタムCSS（BootstrapのCDNの"後"に読み込む） -->
<style>
:root {
/* メインカラー (Primary) を変更 (例: オレンジ色) */
--bs-primary: #ff851b;
--bs-primary-rgb: 255, 133, 27;
/* 成功カラー (Success) を変更 (例: 明るいグリーン) */
--bs-success: #2ecc40;
--bs-success-rgb: 46, 204, 64;
}
/* プライマリーボタンのスタイルを上書き */
.btn-primary {
background-color: var(--bs-primary);
border-color: var(--bs-primary);
}
</style>
</head>
<body>
<!-- Bootstrapのクラスをそのまま利用可能 -->
<button class="btn btn-primary">プライマリボタン</button>
<div class="alert alert-success" role="alert">成功アラート</div>
</body>スタイル上書き前
スタイル上書き後
btn-primaryクラスに直接色を設定したボタンの色は変更されていますが、成功アラートの色に変化はありません。
基本色変更のみでは全体に影響を与えることはできません。
すべての要素に対して色を上書きしていく作業が発生します。
色コードを編集する場合、CSSではなくSass（拡張言語）の使用がおすすめです。
また、色以外の値（余白、ブレークポイント、各種サイズ）についても同様です。
Q. ダークモード、ライトモードは使えますか？
A. 使えます
モードの固定、要素ごとの使用も可能です。
https://getbootstrap.jp/docs/5.3/customize/color-modes