meterタグ -特定の範囲内の数値を視覚的に示す｜HTML辞典

<meter>タグとは？

<meter> タグは、特定の範囲内の数値を視覚的に示すためのタグです。
例えば、バッテリー残量や投票結果、スコアの表示 などに使用されます。

基本情報

コンテンツモデル

フローコンテンツ（Flow Content）、フレージングコンテンツ（Phrasing Content）、パルパブルコンテンツ（Palpable Content）。

閉じタグの有無

<meter> は開始タグ（<meter>）と閉じタグ（</meter>）の両方が必要です。

基本的な記述方法

<meter value="75" min="0" max="100">75%</meter>

使用できる主な属性

<meter> タグにはいくつかの重要な属性があります。

属性名	説明	例
value	現在の値	<meter value="50">
min	最小値（デフォルトは0）	<meter min="0">
max	最大値（デフォルトは1）	<meter max="100">
low	低い値の閾値	<meter low="30">
high	高い値の閾値	<meter high="70">
optimum	理想的な値	<meter optimum="80">

CSSを使ったデザイン変更

デフォルトのデザインを変更したい場合は、CSSを活用できます。

meter {
    width: 100%;
    height: 20px;
}

適切な使用例

✅ バッテリー残量の表示

バッテリー残量: <meter value="60" min="0" max="100">60%</meter>

✅ 投票結果の表示

賛成率: <meter value="80" min="0" max="100">80%</meter>

✅ low、high、optimum を設定して色分け

温度: <meter value="25" min="0" max="50" low="15" high="35" optimum="25">25°C</meter>

適切でない使用例（誤った使い方）

❌ value を min / max の範囲外にすると誤動作する

<!-- NG: max より大きい値 -->
<meter value="150" min="0" max="100"></meter>

✅ 正しい書き方（value を範囲内にする）

<meter value="75" min="0" max="100"></meter>

<meter>タグと他のタグの違い

タグ	役割	特徴	適切な用途
<meter>	測定値を示す	min / max / value を指定	スコア、投票結果、残量表示
<progress>	進行状況を示す	value / max を指定	ファイルアップロード進捗
<div>	カスタムメーター作成可	CSS でスタイル調整	独自デザインのゲージ

使用上の注意点

✅ value は min と max の範囲内に設定する

• 範囲外の値を設定すると、正しく表示されない。

✅ low、high、optimum を適切に設定する

• 視覚的な表現を改善し、理想値の位置を示せる。

関連タグ

• <progress> – 進行状況を示すバー
• <form> – meter をフォームに関連付ける
• <script> – JavaScript で値を変更
• <div> – カスタムメーターを作成

まとめ

<meter> タグは、HTML文書内で 特定の範囲内の数値を視覚的に示すためのタグ です。
value、min、max を適切に設定し、バッテリー残量やスコア表示などに活用できます。