meter要素の使い方

HTMLのmeter要素は、ディスク使用率や評価値のように、上限と下限が分かっている測定値をゲージとして表す要素です。

先に結論

最小の例

<label for="storage-meter">ストレージ使用率</label>
<meter id="storage-meter" min="0" max="100" value="72">72 / 100</meter>

value="72"が現在値、max="100"が上限です。中の72 / 100は、対応していない環境やテキストで状態を確認したい場合のフォールバックとしても役立ちます。

実際に動かす

スライダーを動かすと、JavaScriptがmeter.valueを更新します。meter自身が値を測定するのではなく、アプリケーションが取得した測定値を表示します。この例では、50未満を低い使用量、80を超える値を高い使用量として扱い、低い値をoptimumにしています。

progressとの違い

• meter — 使用率、温度、評価、投票率など、既知の範囲内にある測定値。
• progress — ファイルのアップロードなど、タスクの完了状況。
• output — 価格と数量から計算した合計など、計算や操作の結果。

たとえば、ダウンロード済みの割合はタスクの進捗なのでprogress、ディスク全体に対する使用量は範囲内の測定値なのでmeterです。

6つの属性

属性	役割	例
min	測定範囲の下限。省略時は0。	min="0"
max	測定範囲の上限。省略時は1。	max="100"
value	現在の測定値。必ず指定する。	value="72"
low	低い範囲の上限。	low="50"
high	高い範囲の下限。	high="80"
optimum	最適と考える位置。	optimum="20"

low・high・optimumは、値が良いか悪いかの基準も表します。高いほど良いのか、低いほど良いのか、中央が良いのかをoptimumから読み取れます。

値の範囲を正しく指定する

minやmaxを省略すると、範囲は0〜1になります。100を表したいのにmaxを書かなければ、value="72"は意図した72%ではありません。単位と範囲を同じ例の中で揃えましょう。

<meter min="0" max="100" value="72">72%</meter>
<meter min="0" max="1" value="0.72">72%</meter>

値が範囲外の場合、ブラウザーはゲージの実際の値を範囲内に収めて扱います。入力値を自分で検証する場合も、min ≤ low ≤ high ≤ maxの関係を崩さないようにします。

フォーム送信との関係

meterは測定値を表示する要素で、フォームの送信項目ではありません。送信したい場合は、表示用のmeterとは別にinput type="hidden"などへ値を同期します。

<meter id="quota-meter" min="0" max="100" value="72">72%</meter>
<input type="hidden" name="quota" value="72">

読みやすく、伝わりやすくする

• labelなどで、何を測っているかを明確にする。
• 数値と単位を、ゲージの近くのテキストにも書く。
• 色だけで「低い・高い・最適」を伝えない。
• ブラウザーごとの描画差に備え、フォールバックテキストを用意する。
• 値を更新する場合は、実際の測定値と表示がずれないようにする。

よくある間違い

• タスクの進捗にmeterを使う。
• maxを省略したまま、100を上限とする値を入れる。
• low・high・optimumの意味を確認せず、色だけを頼りにする。
• meterの値がフォーム送信されると思い込む。

Atlasで確認する

Categories、値の解決、HTMLMeterElement、HTML-AAM、ブラウザー実装の未検証範囲まで確認したい場合は、Yugien Atlasのmeter要素を参照してください。意味の境界はprogress要素とoutput要素でも確認できます。