【HTML Living Standard】meter要素の使い方
meter要素の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
meterオブジェクトは、既知の範囲内のスカラー測定値を表すオブジェクトです。この要素は、例えばディスクの使用量、クエリの関連性、投票結果、バッテリー残量など、特定の最小値から最大値までの範囲における現在の値を視覚的に表示するために使用されます。
この要素には、現在の値を指定するvalue属性、範囲の最小値を指定するmin属性、そして最大値を指定するmax属性があります。これらの属性は必須ではありませんが、その値が持つ意味を正確に伝え、適切に表示するために、通常はこれらを適切に設定することが推奨されます。
さらに、low属性は低すぎる値の範囲、high属性は高すぎる値の範囲、optimum属性は最適な値の範囲を示すことができます。これらの属性を組み合わせることで、測定値が正常な範囲にあるか、それとも注意が必要な範囲にあるかをユーザーに視覚的に伝えることが可能です。
meter要素は、タスクの進行状況を示すprogress要素とは異なり、完了までの進捗ではなく、指定された範囲内での現在の測定値を示すことに特化しています。したがって、現在の状態が特定の範囲に対してどのように位置するかを表現する際に適しており、数値データを直感的かつ視覚的に表現し、ユーザーインターフェースの使いやすさを向上させることができます。
公式リファレンス: <meter>: The HTML Meter element
構文(syntax)
1<meter min="0" max="100" value="75">75%</meter>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません