HTMLの<meter>タグを使うと、メーターを表示できる。メーターには「低」や「高」の範囲があり、値によって色を変えることができる。
<meter> とほぼ同じ機能を持つタグとして、<progress> がある。
<meter value="0.8">
0.8
</meter>開始タグと終了タグの間の文字列は表示されない。
終了タグを省略することはできない。
<meter> タグには次の属性を指定できる。
メーターの値を指定する。value属性の指定を省略した場合は0となる。
<meter value="0.5">
</meter>メーターが取り得る範囲の下限値を指定する。min属性の指定を省略した場合、下限値は0となる。
<meter value="3" min="1" max="5">
</meter>メーターが取り得る範囲の上限値を指定する。max属性の指定を省略した場合、上限値は1となる。
メーターが取り得る範囲のうち、「高」と判断される下限値を指定する。メーターの値がこの基準値以上であれば、メーターの色が変わる。
<meter value="0.8" high="0.7">
</meter>メーターが取り得る範囲のうち、「低」と判断される上限値を指定する。メーターの値がこの基準値以下であれば、メーターの色が変わる。
<meter value="0.2" low="0.3">
</meter>CSSのクラスを空白で区切ったリストを指定する。
<label for="progress">進捗状況:</label>
<meter id="progress" value="0.5">
</meter>最適な値を指定する。
<meter value="0.5" optimum="0.7">
</meter>CSSのプロパティをセミコロンで区切ったリストを指定する。
<meter value="0.8" style="height:2rem;">
</meter>メーターのタイトルを指定する。
<meter value="0.5" title="0.5">
</meter>meter要素は次のコンテンツモデルに属する。
メーターに関するCSS疑似要素には次のものがある。
::-webkit-meter-bar CSS疑似クラスは、<meter>要素のメーターバーを表すWebKitの拡張機能である。
WebKitをレンダリング・エンジンとするウェブ・ブラウザには次のものがある。
meter::-webkit-meter-bar {
background-color: white;
}::-webkit-meter-even-less-good-value は、<meter> 要素の value 属性と optimistic 属性が low-high の範囲外にあり、かつ反対側のゾーンにある場合に、<meter>要素に赤い色をつける。
meter::-webkit-meter-even-less-good-value {
background: #ccc;
}::-webkit-meter-inner-element は、<meter> 要素の外側の包含要素を選択してスタイルを適用するための、WebKit 独自の CSS 疑似要素である。meter 要素を読み取り専用としてレンダリングするための追加マークアップである。
::-webkit-meter-optimum-value CSS疑似要素は、<meter>要素の値が低値から高値の範囲内にある場合に、そのスタイルを指定する。
::-webkit-meter-suboptimum-value 疑似要素は、value 属性が low-high の範囲外になった場合に、<meter>要素に黄色を与えるものである。