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

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-barstyle="width:**%;".w-{size} を入れて表示したいバーの幅の割合を設定

【注意】

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

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

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

【Bootstrap3.xとの変更箇所】

  • ユーザー補助用の 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 でmarginを設定)

太さ(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>

【設定】

  • .progressstyle="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の場合は不要)を追加

【Bootstrap3.xとの変更箇所】

  • .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%を超えたら、各バーの幅は自動調整される

【Bootstrap3.xとの変更箇所】

  • 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 を追加

【Bootstrap3.xとの変更箇所】

  • .progress-bar.progress-bar-striped.active.progress-bar.progress-bar-striped.progress-bar-animated