Did you know meter and progress elements?

2019年9月17日2019年9月18日

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

これには大変満足していますが、
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 は現在の値を示します。

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

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

HTML5タグリファレンス

progress 要素

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

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

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

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

File progress: 70%

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

HTML5タグリファレンス

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

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

Simple CSS chart for dynamic content | Codrops

This is an example of a very simple CSS + one tiny image chart. The result will look like this: ...

 https://tympanus.net/codrops/2009/08/27/simple-css-chart-for...