Bootstrap 5プログレスバー入門：.progress と .progress-bar の基本と最小実装
生徒
「画面でぐるぐる動いている棒をよく見かけるんですが、あれは何ですか？」
先生
「それはプログレスバーと呼ばれる表示で、作業がどれくらい進んでいるかを見せるためのものです。」
生徒
「難しそうですが、初心者でも作れますか？」
先生
「Bootstrap 5を使えば、とてもシンプルな書き方で作れます。一緒に基本から見ていきましょう。」
1. Bootstrap 5のプログレスバーとは何か
Bootstrap 5のプログレスバーとは、処理の進み具合を視覚的に伝えるための部品です。ダウンロード中や登録処理中など、今どれくらい進んでいるのかを利用者に知らせる役割があります。身近な例で言うと、料理中に使うタイマーの目盛りのようなものです。目で見て状況が分かるため、待ち時間の不安を減らすことができます。
Bootstrap 5では、あらかじめデザインが用意されているため、難しいCSSを書かなくても、決まったクラス名を使うだけでプログレスバーを表示できます。これが初心者にとって大きなメリットです。
2. .progress と .progress-bar の基本構造
Bootstrap 5のプログレスバーは、二つの箱でできています。外側の箱が.progress、内側の箱が.progress-barです。外側は全体の枠、内側は実際に伸びる棒だと考えると分かりやすいです。
例えば、水筒に入った水を想像してください。水筒が.progress、水が.progress-barです。水の量が増えるほど、中の水が上に伸びていきます。プログレスバーも同じ仕組みです。
<div class="progress">
<div class="progress-bar" style="width: 50%;"></div>
</div>
3. 最小実装で表示してみよう
ここでは、最低限のコードだけでBootstrap 5のプログレスバーを表示してみます。必要なのは、progressとprogress-barのクラス、そして横幅の指定だけです。横幅はstyle属性で指定し、パーセントで進捗を表します。
パーセントとは、全体を100としたときの割合です。50パーセントなら半分まで進んでいる、という意味になります。
<div class="progress">
<div class="progress-bar" style="width: 25%;"></div>
</div>
4. 数字で進捗状況を表示する方法
プログレスバーの中に文字を書くことで、何パーセント進んでいるのかを直接表示できます。これは、利用者にとってとても親切な表示です。棒の長さと数字の両方で状況が分かるからです。
これは、駅の案内板に「あと何分」と表示されるのと同じで、安心感を与えます。
<div class="progress">
<div class="progress-bar" style="width: 70%;">
70%
</div>
</div>
5. 色を変えて分かりやすくする
Bootstrap 5では、色を変えるためのクラスも用意されています。例えば、進捗が順調なときは青、注意が必要なときは黄色、完了に近いときは緑、というように使い分けることができます。
色は信号機と同じような役割を持ち、見る人に直感的な情報を伝えます。
<div class="progress">
<div class="progress-bar bg-success" style="width: 90%;">
90%
</div>
</div>
6. 高さを変えて見た目を調整する
プログレスバーは、高さを変えることもできます。高さを変えると、細いバーや太いバーを作れます。これは、デザインや用途に合わせて調整するためです。
例えば、細いバーは控えめな表示、太いバーは目立たせたい表示に向いています。
<div class="progress" style="height: 30px;">
<div class="progress-bar" style="width: 40%;">
40%
</div>
</div>
7. 初心者がつまずきやすいポイント
初心者がよく間違えるのは、progress-barをprogressの外に書いてしまうことです。この場合、正しく表示されません。必ず、progressの中にprogress-barを書く必要があります。
また、横幅を指定しないと、棒が見えないことがあります。これは、どれくらい進んでいるのか分からない状態だからです。必ず幅を指定することを覚えておきましょう。
8. プログレスバーが役立つ場面
Bootstrap 5のプログレスバーは、会員登録、データ送信、アンケート入力など、さまざまな場面で使われます。特に、待ち時間が発生する処理では、プログレスバーがあるだけで利用者の安心感が大きく変わります。
これは、レジ待ちで「あと何人」と表示されるのと同じで、先が見えることが大切だからです。
【60分集中】CSSを1行も書かない！？Bootstrap 5ユーティリティクラス活用で開発工数を50%削減
「スピード」が武器になる。Bootstrap 5で商用クオリティのWebサイトを高速構築。
本講座では、世界シェアNo.1のフレームワークBootstrap 5を使いこなし、ゼロからレスポンシブサイトを組み上げる「現場最速のワークフロー」を学びます。単なる導入に留まらず、ユーティリティクラスを活用した効率化と、実務で必須となるカスタマイズ技法を60分で完全習得します。
具体的なワークショップ内容と環境
【つくるもの】
モダンなランディングページ（LP）やダッシュボードのプロトタイプを作成します。ナビゲーション、ヒーローセクション、カードレイアウト、フッターなど、Bootstrapのコンポーネントを組み合わせて「一瞬で形にする」感動を体験してください。
【開発環境】
VS CodeにBootstrap 5専用のSnippet（補完機能）を導入し、手入力を最小限にする環境を構築。最新のCDN利用法や、表示速度（Core Web Vitals）を意識した最適な読み込み設定など、プロの初期設定を伝授します。
この60分で得られる3つの革新スキル
スマホ・タブレット・PCでレイアウトを自由自在に切り替える「ブレイクポイント」の極意を学びます。
CSSを1行も書かずに、マージン・パディング・カラーを制御。開発工数を半分以下にする実戦術を習得します。
「Bootstrap感」を消し、独自のブランドイメージに合わせるための、上書きの作法とデザインの整え方を伝授します。
※本講座は、HTML/CSSの基本を理解した方向けの「実践加速講座」です。制作会社のコーダーや副業フリーランスとして「案件の回転率」を上げ、市場価値を最大化させたい方をモクモクがバックアップします。
Bootstrap 5を楽しみながら、一緒に学びましょう！
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
