HTML辞書ホームへ
HTML要素 辞書 by Sentaro
60%
85点
<meter>
測定値（ゲージ）要素。既知の範囲内のスカラー測定値、または分数値を視覚的に表示します。
info
概要
<meter> 要素は、ディスクの使用量、検索結果の関連性、試験の得点など、既知の範囲を持つ量や測定値を表現するために使用されます。
プログレスバーを表示する <progress> 要素と似ていますが、<progress> がタスクの進捗（完了までどれだけ残っているか）を示すのに対し、<meter> は**静的な測定値**（「現在の値は最適範囲にあるか？」）を示します。
play_circle
デモ (静的表示)
HTML (Source)
<p>現在のディスク使用量 (60%)</p>
<meter value="60" min="0" max="100">60%</meter>
<br><br>
<p>テストの得点 (85点 - 最適)</p>
<meter value="85" min="0" max="100" low="40" high="90" optimum="100">85点</meter>
Preview (Result)
現在のディスク使用量 (60%)
テストの得点 (85点 - 最適)
list
属性 (Attributes)
| 属性名 | 説明 |
|---|---|
| value | 現在の測定値。必須属性です。min と max の間にある必要があります。 |
| min | 測定範囲の最小値（下限）。デフォルトは 0 です。 |
| max | 測定範囲の最大値（上限）。デフォルトは 1.0 です。 |
| low | 許容できる低い値の境界。これより低い値は「低すぎ」と見なされます。 |
| high | 許容できる高い値の境界。これより高い値は「高すぎ」と見なされます。 |
| optimum | 最適な値。この値に最も近い領域が「最適」と見なされ、ゲージの色が変わる基準となります。 |
| form | このゲージに関連付けられている <form> 要素のIDを指定します。 |
code
実用例
1. 基本的な使用法 (min=0, max=1.0 がデフォルト)
<p>投票率 (0.7)</p>
<meter value="0.7">70%</meter>
2. 範囲と最適値の設定
<!-- 範囲: 0〜200, 低: 50以下, 高: 150以上, 最適: 100 -->
<p>心拍数 (110bpm)</p>
<meter value="110" min="0" max="200" low="50" high="150" optimum="100">110</meter>
<!-- optimumがlow/highより外にある場合、low/highの範囲外で値が最適と見なされる -->
<p>バッテリー残量 (95%)</p>
<meter value="95" min="0" max="100" low="10" high="80" optimum="100">95%</meter>
3. `
<label for="fuel">燃料残量:</label>
<meter id="fuel" value="0.3">30%</meter>
lightbulb
知っておくべき重要事項
warning
`progress` 要素との違い
タスクの完了までを示す動的なゲージ（ファイルのダウンロード進捗など）には
<meter> は、ディスク使用量や関連性スコアなど、**測定可能な静的な値**を示すために使います。タスクの完了までを示す動的なゲージ（ファイルのダウンロード進捗など）には
<progress> 要素を使用してください。
accessibility_new
アクセシビリティ
スクリーンリーダーなどの支援技術のために、必ず
スクリーンリーダーなどの支援技術のために、必ず
<meter> 要素の近くに人間が読めるテキスト（例: 「ディスク使用量：60%」）を提供するか、value 属性の値をフォールバックコンテンツとして要素の内部に記述しましょう。