HTML5だけでプログレスバー実装および割合を可視化させる方法
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 > max、high > lowに設定する必要があります。
optimum > highに設定した場合
設定
- min:0
- max:100
- low:30
- high:70
- optimum:80
optimum > highになるように値を設定します。
value < lowの場合
<meter min="0" max="100" low="30" high="70" optimum="80" value="20">20/100</meter>optimum > highに設定しているため、最も範囲に遠い範囲の値をvalueに設定すると、ゲージの色は赤になります。
low ≦ value ≦ highの場合
<meter min="0" max="100" low="30" high="70" optimum="80" value="60">60/100</meter>low ≦ value ≦ highに設定しているため、2番目に遠い範囲の値をvalueに設定すると、ゲージの色は黄色になります。
value ≧ highの場合
<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の場合
<meter min="0" max="100" low="30" high="70" optimum="20" value="10">10/100</meter>optimum ≦ lowに設定しているため、最適な値の範囲にvalueを設定した時にゲージの色は緑色になります。
low ≦ value ≦ highの場合
<meter min="0" max="100" low="30" high="70" optimum="80" value="60">60/100</meter>low ≦ value ≦ highに設定しているため、2番目に遠い範囲の値をvalueに設定すると、ゲージの色は黄色になります。
value > highの場合
<meter min="0" max="100" low="30" high="70" optimum="20" value="90">90/100</meter>optimum > highに設定しているため、最も範囲に遠い範囲の値をvalueに設定すると、ゲージの色は赤になります。
まとめ
非常にシンプルですが、HTMLだけでプログレスバーや進捗の可視化することができました。使えそうな場面で利用してみてください。
プログレスバー実装方法まとめ
Webページでプログレスバーを実装する8つの方法まとめ
mineblogでプログレスバーの実装方法をいくつか紹介してきました。各プログレスバーの実装方法について、その特徴や用意されているオプションを含めてまとめました。
おすすめ記事 【体験談】弁護士の退職代行で有給30日分を取得した話
おすすめ記事 YouTubeライブで気をつけるべきチャットへのコメントマナーまとめ