1年前に投稿

Did you know meter and progress elements?

2019年9月18日

DISCLAIMER: This article is more than a year old and may not be current.

この記事は約 3 分で読めます。

3.5

Simple な CSS chart を探していました。
例えば以下のような。

Chrome
60.2%
IE
13.52%
Firefox
8.54%

これには大変満足していますが、
meter と progress という HTML5 で
追加された要素
があるのを知りました。

meter 要素

meter 要素は、
ディスク使用量などの測定値を示します。
最大値を max とした現在の値 value を
いわゆるメーターで表します。
meter要素は、
HTML5から新たに追加された要素です。

<meter>~</meter> の間には、
<meter> に対応していないブラウザのための
メッセージや代替内容などを記述します。

<meter min=0 max=100 value=70>70 / 100</meter>

min は最小値、max は最大値、value は現在の値を示します。

Fuel level: 70 / 100

optimum=90 を指定すると、90 が正常値とみなされ、高い領域(正常域)が緑、中間の領域(正常域からひとつ下)が黄色、低い領域(正常域から2つ下)が赤で表示されます。

60.2% 90%
13.52% 50%
8.54% 10%

optimum=10 を指定すると、10 が正常値とみなされ、低い領域(正常域)が緑、中間の領域(正常域からひとつ上)が黄色、高い領域(正常域から2つ上)が赤で表示されます。

Chrome: 60.2% 90%
13.52% 50%
Firefox: 8.54% 10%

Further Reading

meter 要素のブラウザの対応
主に Internet Explorer が
未対応
です。

<meter>タグは、進行状況を示すのに使用するべきではありません。
そのような目的には<progress>タグを使用してください。
また、最大値が分かっていない場合の体重や身長など、
範囲がはっきりしない値に<meter>タグを使用するのも誤りです。

HTML5タグリファレンス

progress 要素

<progress>タグは、タスク完了までの進行状況を示す際に使用します。
progress要素は、HTML5から新たに追加された要素です。

<progress>~</progress> の間には、
<progress> に対応していないブラウザのための
メッセージや代替内容などを記述します。

<section>
<h2>動画のダウンロード</h2>
<p>進行状況:<progress max="100">現在、動画をダウンロード中です。</progress></p>
</section>

進行状況:現在、動画をダウンロード中です。

70%

ディスク使用量の表示など、何かを計測するのに<progress>タグを使用するのは不適切です。
このような場合には、<meter>タグを使用してください。

HTML5タグリファレンス

meter と progress、
HTMLだけで、
測定値や進行状況を表すには
良いのではないかと思います。

もちろんCSSで
調整するのも良いですし、
Simple な CSS chart と
使い分けても良いですね。

貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました
Did you know meter and progress elements?