Did you know meter and progress elements?
この記事は約 3 分で読めます。
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 は現在の値を示します。
optimum=90 を指定すると、90 が正常値とみなされ、高い領域(正常域)が緑、中間の領域(正常域からひとつ下)が黄色、低い領域(正常域から2つ下)が赤で表示されます。
optimum=10 を指定すると、10 が正常値とみなされ、低い領域(正常域)が緑、中間の領域(正常域からひとつ上)が黄色、高い領域(正常域から2つ上)が赤で表示されます。
Chrome:
Firefox:

meter 要素のブラウザの対応は
主に Internet Explorer が
未対応です。
<meter>タグは、進行状況を示すのに使用するべきではありません。
HTML5タグリファレンス
そのような目的には<progress>タグを使用してください。
また、最大値が分かっていない場合の体重や身長など、
範囲がはっきりしない値に<meter>タグを使用するのも誤りです。
progress 要素
<progress>タグは、タスク完了までの進行状況を示す際に使用します。
progress要素は、HTML5から新たに追加された要素です。
<progress>~</progress> の間には、
<progress> に対応していないブラウザのための
メッセージや代替内容などを記述します。
<section>
<h2>動画のダウンロード</h2>
<p>進行状況:<progress max="100">現在、動画をダウンロード中です。</progress></p>
</section>
進行状況:
ディスク使用量の表示など、何かを計測するのに<progress>タグを使用するのは不適切です。
HTML5タグリファレンス
このような場合には、<meter>タグを使用してください。
meter と progress、
HTMLだけで、
測定値や進行状況を表すには
良いのではないかと思います。
もちろんCSSで
調整するのも良いですし、
Simple な CSS chart と
使い分けても良いですね。
最後まで
ご高覧いただきまして
有難うございました
ディスカッション
コメント一覧
まだ、コメントがありません