<meter>: METER 要素

最終更新：2026-10-13

<meter>METER 要素

一定範囲（min–max）内の既知の測定値を表示します。ディスク使用量・評価・温度などに使います。進捗が不明なタスクには <progress> を使います。

カテゴリ	フォーム
コンテンツモデル	フローコンテンツ
許可される親要素	フローコンテンツを受け入れる要素
閉じタグ	必要 `</meter>` タグ
ステータス	標準

📝 構文

<meter value="0.6" min="0" max="1">60%</meter>

⚙️ 属性

この要素はグローバル属性に加え、以下の属性をサポートします：

属性	値	説明
`value`		The current measured value (required).
`min`		Lower bound of the range, default 0.
`max`		Upper bound of the range, default 1.
`low`		The 'low' threshold.
`high`		The 'high' threshold.
`optimum`		The optimal value, affecting color hints.

すべてのグローバル属性を見る → すべてのイベント属性を見る →

▶ サンプル

下のコードを編集して、playground でリアルタイム結果を確認：

▶ 試してみる

🌐 ブラウザサポート

ブラウザ	Chrome	Edge	Firefox	Safari	Opera
<meter>	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
すべての主要ブラウザでサポート

ヒント： meter は固定範囲の測定値用です。進捗が不明な場合は <progress> を使いましょう。

❓ よくある質問

Qmeter と progress の違いは何ですか？

A<meter> は既知の区間内での「静的な計測値」の位置を示します（ディスク使用率 65%、評価 4.2/5 など）。min/max/low/high/optimum の意味区間を持ちます。<progress> は「タスクの進行状況」を示し、完了の有無という概念しかありません。評価や比率は meter、読み込みやアップロードは progress です。

Qmeter の low、high、optimum 属性はどう使いますか？

Amin-max の区間の中をさらに質の帯に分けます。low/high が「低すぎ／高すぎ」の警戒帯を定義し、optimum が最適値の所在する帯を示します。ブラウザはこれに基づいてゲージを着色します（緑／黄／赤）。体温なら 36〜37 を optimum にして、外れると警告色にするといった使い方です。

Qmeter の中に内容を書けますか？

A書けます。タグ間の内容は、meter の描画に対応していない環境向けのフォールバックテキストです（<meter value='0.65'>65%</meter>）。また、スクリーンリーダーの meter 対応はまちまちなので、aria-valuenow などの属性でアクセシビリティ情報を補うのがおすすめです。