HTML5だけでプログレスバー実装および割合を可視化させる方法

Programming Web

Web制作者

Web制作者
「プログレスバーを簡単に実装する方法を知りたい。HTMLだけで実装できるって本当?」

こういった疑問にお答えします。

本記事の内容

  • HTMLタグだけでプログレスバーを実装する方法

こんにちは、mine(@mineblog7)です。

ブログ歴は4年ほどになります。
現在はmineblogを一人で運営しています。

Web制作をしている中で、プログレスバーを実装したい場合があります。

JavaScriptプラグインなどを使って実装する方法は色々あります。
実はHTMLタグだけで実装する方法があります。

プログレスバーをHTMLだけで実装する方法を紹介します。

プログレスバー実装方法

  • progressタグで実装する方法
  • meterタグで実装する方法

progressタグで実装する方法

progressタグはHTML5で追加されたフォームタグです。
その名の通り、進行状況を可視化するために使用されます。

【参考】対応ブラウザ

» Can I use… Support tables for HTML5, CSS3, etc
※モダンブラウザなら概ね対応しています。

属性

属性 詳細
value 実際に完了したタスクの作業量/0以上の数値(半角)
max 全タスクの総作業量/0以上の数値(半角)

どちらも省略可能ですが、表示に違いが出ます。
(※下記参照)

属性なし、もしくはmax属性のみ設定

<progress></progress>
もしくは
<progress max="100"></progress>

属性を何も指定しない、もしくはmax属性のみ指定した場合はバーが左右に動き続けます。

ページ全体もしくは、何かしらの要素を読み込んでいる間に表示させて、進行中であることをユーザーに伝えることができます。

max属性とvalu属性を設定

<progress max="100" value="60"></progress>

max属性とvalu属性を両方設定する場合、max ≧ valueとなるような数値にする必要があります。max属性の値に対してのvalueの割合をプログレスバーで可視化することができます。

例えば、サービスの申し込みフォームの入力の進捗状況をユーザーに分かりやすくすることができます。

項目が入力されると、value属性の数値が上昇して、すべて入力したらmax=valueとなるようにJavaScriptなどで設定すれば実現できそうです。

meterタグで実装する方法

meterタグはHTML5で追加されたフォームタグです。
ブログ記事のカテゴリの割合を可視化するなどの場合は、progressではなくてmeterが適しています。

【参考】対応ブラウザ

» Can I use… Support tables for HTML5, CSS3, etc
※モダンブラウザなら概ね対応しています。ちなみにIEは未対応です。

属性

属性 詳細
value 実際に表示する値(必須)/0以上の数値(半角)
min 最小値/0以上の数値
max 最大値/0以上の数値
low 「低い」と判定する値/0以上の数値
high 「高い」と判定する値/0以上の数値
optimum 最適な値/0以上の数値

min > maxhigh > lowに設定する必要があります。

optimum > highに設定した場合

設定

  • min:0
  • max:100
  • low:30
  • high:70
  • optimum:80

optimum > highになるように値を設定します。

value < lowの場合

20/100

<meter min="0" max="100" low="30" high="70" optimum="80" value="20">20/100</meter>

optimum > highに設定しているため、最も範囲に遠い範囲の値をvalueに設定すると、ゲージの色は赤になります。

low ≦ value ≦ highの場合

60/100

<meter min="0" max="100" low="30" high="70" optimum="80" value="60">60/100</meter>

low ≦ value ≦ highに設定しているため、2番目に遠い範囲の値をvalueに設定すると、ゲージの色は黄色になります。

value ≧ highの場合

90/100

<meter min="0" max="100" low="30" high="70" optimum="80" value="90">90/100</meter>

value ≧ highに設定しているため、最適な値の範囲にvalueを設定した時にゲージの色は緑色になります。

optimum < lowに設定した場合

設定

  • min:0
  • max:100
  • low:30
  • high:70
  • optimum:20

optimum < lowになるように値を設定します。

value ≦ lowの場合

10/100

<meter min="0" max="100" low="30" high="70" optimum="20" value="10">10/100</meter>

optimum ≦ lowに設定しているため、最適な値の範囲にvalueを設定した時にゲージの色は緑色になります。

low ≦ value ≦ highの場合

60/100

<meter min="0" max="100" low="30" high="70" optimum="80" value="60">60/100</meter>

low ≦ value ≦ highに設定しているため、2番目に遠い範囲の値をvalueに設定すると、ゲージの色は黄色になります。

value > highの場合

80/100

<meter min="0" max="100" low="30" high="70" optimum="20" value="90">90/100</meter>

optimum > highに設定しているため、最も範囲に遠い範囲の値をvalueに設定すると、ゲージの色は赤になります。

まとめ

非常にシンプルですが、HTMLだけでプログレスバーや進捗の可視化することができました。使えそうな場面で利用してみてください。

今回紹介した方法以外にも、プログレスバーを実装する方法を別記事で紹介しています。

プログレスバー実装方法まとめ

おすすめ記事 【体験談】弁護士の退職代行で有給30日分を取得した話

おすすめ記事 YouTubeライブで気をつけるべきチャットへのコメントマナーまとめ

おすすめ記事 お名前.comのドメインプロテクションは必要か【採算がとれるか】