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日分を取得した話
おすすめ記事 「知らないから落ちる面接の4点減点法」で面接に挑んだ結果