メインコンテンツへスキップ

Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。

プログレスバー（Progress） v4.0.0設定変更

縦積みバー、アニメーションの背景、およびテキストラベルをサポートするBootstrapのカスタムプログレスバーの使用に関する解説と例

使い方（How it works）v4.0.0設定変更

プログレスコンポーネントは、2つのHTML要素、幅を設定するCSS、いくつかの属性で構築。HTML5の <progress> 要素を使用せずに、プログレスバーを縦積みにしたり、アニメーション化したり、テキストラベルの貼り付けが可能。

  • .progress を包括用に使用し、プログレスバーの最大値を示す。
  • これまでの進行状況を示すために、内側に .progress-bar を使用。
  • .progress-bar には、幅を設定するためのインライン・スタイル、ユーティリティクラス、またはカスタムCSSが必要。
  • .progress-bar には、アクセシビリティのためにいくつかの role 属性と aria 属性も必要。

そのすべてをまとめると、次の実例のようになる。

見本
Bootstrap3.xの設定例 赤背景が変更箇所
<div class="progress">
	<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
		<span class="sr-only">0% 完了</span>
	</div>
</div>
<div class="progress">
	<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
	  <span class="sr-only">25% 完了</span>
	</div>
</div>
...
Bootstrap4.xの設定例 緑背景が変更箇所
<div class="progress">
	<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mt-3">
	<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
...

Bootstrapは、幅設定ユーティリティをいくつか提供している。ニーズに応じて、これらは進捗状況を迅速に設定するのに役立つ。

見本
設定例
<div class="progress">
	<div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

【設定】

  • .progress > .progress-bar
  • .progress-bar に style="width:**%;" か .w-{size} を入れて表示したいバーの幅の割合を設定

【注意】

  • プログレスバーを複数並べる場合、プログレスバーの間には空白がないので、.progress に空白ユーティリティクラスを追加する必要がある（上記の見本では2つ目以降のプログレスバーで上のマージンを1remに設定）

【アクセシビリティの設定】

  • .progress-bar に
    • role="progressbar"（プログレスバーの役割）
    • aria-valuenow（現在値）
    • aria-valuemin（最小値）
    • aria-valuemax（最大値）
    の各属性を入れる

【変更履歴】

  • 【v4.0.0】
    • ユーザー補助用の span.sr-only（割合のラベル）は不要に

 

ラベル（Labels）

.progress-bar 内にテキストを配置して、プログレスバーにラベルを追加。

見本

●バーの中にラベルを表示

25%

●バーの外にラベルを表示

25%
設定例
バーの中にラベルを表示<div class="progress">
	<div class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width:25%;">25%</div>
</div>
バーの外にラベルを表示<div class="progress">
	<div class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width:25%;"></div>
	<span class="ml-1">25%</span>
</div>

【設定】

  • バーの中にラベルを表示：.progress > .progress-bar > 《ラベル》
  • バーの外にラベルを表示：.progress > [.progress-bar + span.ml-1《ラベル》]（バーとラベルの間は span.ml-1 でマージンを設定）

太さ（Height）v4.0.0新設

.progress にのみ height の値を設定。その値を変更すると、内側の .progress-bar はそれに応じて自動的にサイズが変更。

見本

●height:1px の場合

●height:20px の場合

※デフォルトの太さ（height:1rem）

設定例
height:1pxの場合<div class="progress" style="height: 1px;">
	<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
height:20pxの場合<div class="progress" style="height: 20px;">
	<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

【設定】

  • .progress に style="height:**;" を入れる（デフォルトのサイズは1rem=16px）

背景色（Backgrounds）v4.0.0設定変更

背景色ユーティリティクラスを使用して、個々のプログレスバーの外観を変更。

バーの色の種類

※Primary（Default）：（.progress-bar の単独使用）

Secondary：.bg-secondary

Info：.bg-info

Success：.bg-success

Warning：.bg-warning

Danger：.bg-danger

Light：.bg-light

Dark：.bg-dark

Bootstrap3.xの設定例 赤背景が変更箇所
<div class="progress">
	<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%">
		<span class="sr-only">20%</span>
	</div>
</div>
Bootstrap4.xの設定例 緑背景が変更箇所
<div class="progress">
	<div class="progress-bar bg-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%"></div>
</div>

【設定】

  • .progress-bar に .bg-{themecolor}（.bg-{themecolor} は上記の「バーの色の種類」から選択、Primaryの場合は不要）を追加

【変更履歴】

  • 【v4.0.0】
    • .progress-bar-{themecolor} ⇒ .bg-{themecolor}

縦積み（Multiple bars）v4.0.0設定変更

必要に応じて、プログレスバーコンポーネントに複数のプログレスバーを含める。

見本
Bootstrap3.xの設定例 赤背景が変更箇所
<div class="progress">
	<div class="progress-bar" style="width: 15%">
		<span class="sr-only">15% Complete</span>
	</div>
	<div class="progress-bar progress-bar-success progress-bar-striped" style="width: 30%">
		<span class="sr-only">30% Complete (success)</span>
	</div>
	<div class="progress-bar progress-bar-info" style="width: 20%">
		<span class="sr-only">20% Complete (info)</span>
	</div>
</div>
Bootstrap4.xの設定例 緑背景が変更箇所
<div class="progress">
	<div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
	<div class="progress-bar bg-success progress-bar-striped" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
	<div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

【設定】

  • div.progress の中に複数の異なる色の div.progress-bar を追加
  • 一部をストライプやアニメーションにすることも可能

【注意】

  • width の合計が100%を超えたら、各バーの幅は自動調整される

【変更履歴】

  • 【v4.0.0】
    • 各 div.progress-bar に各属性を入れる

ストライプ（Striped）

.progress-bar-striped を任意の .progress-bar に追加して、プログレスバーの背景色にCSSグラデーションを使用してストライプを適用。

見本
設定例
<div class="progress">
	<div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>

【設定】

  • .progress-bar に .progress-bar-striped を追加

アニメーションストライプ（Animated stripes）v4.0.0設定変更

ストライプ・グラデーションはアニメートすることも可能。.progress-bar-animated を .progress-bar に追加すると、CSS3アニメーションを使用してストライプを右から左にアニメーション表示。

見本
Bootstrap3.xの設定例 赤背景が変更箇所
<div class="progress">
	<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%">
		<span class="sr-only">75% 完了</span>
	</div>
</div>
Bootstrap4.xの設定例 緑背景が変更箇所
<div class="progress">
	<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>

【設定】

  • .progress-bar.progress-bar-striped に .progress-bar-animated を追加

【変更履歴】

  • 【v4.0.0】
    • .progress-bar.progress-bar-striped.active ⇒ .progress-bar.progress-bar-striped.progress-bar-animated

ページ移動