HTML Living Standard/meter

meter 要素

<meter> 要素は、HTML Living Standardで定義されている要素で、特定の範囲内での測定値を示すために使用されます。進行状況やパフォーマンスを視覚的に表示するために利用され、プログレスバーとは異なり、通常は測定される値が範囲内で相対的な意味を持ちます。この要素は、評価、スコア、またはその他の測定に基づいたフィードバックをユーザーに提供するために使用されます。

定義

<meter> 要素は、数値や測定値を示すために使用されるインタラクティブで視覚的なコンテンツを提供します。この要素は、例えばテストの得点、パフォーマンス指標、リソースの使用量、または他の測定可能なデータを表示するために用いられます。

属性

<meter> 要素は、以下の属性を使用して測定値とその範囲を定義します。

value: 測定値を指定します。value 属性は、現在の測定値を示す数値で、範囲内の相対的な位置を示します。
min: 測定範囲の最小値を指定します。デフォルト値は0です。
max: 測定範囲の最大値を指定します。デフォルト値は100です。
low: 測定値が低すぎる範囲の閾値を設定します。この値は警告やエラーを示す際に使用されることがあります。
high: 測定値が高すぎる範囲の閾値を設定します。これも警告やエラーを示すために使用されます。
optimum: 測定値が最適である範囲を示します。これにより、測定値が理想的な範囲内にあるかどうかがわかります。

構文

<meter> 要素の基本的な構文は以下のようになります。

<meter value="30" min="0" max="100" low="20" high="80" optimum="70">30%</meter>

この例では、<meter> 要素が表示する測定値が30%であることを示しています。min="0" は最小値、max="100" は最大値、low="20" と high="80" はそれぞれ低すぎる値と高すぎる値の閾値を設定しています。また、optimum="70" は最適な測定値を示します。

進行状況の表示

<meter> 要素は、<progress> 要素と似ていますが、進行状況を示すのではなく、測定される値が範囲内でどの位置にあるかを示します。<meter> 要素は通常、リソースの使用状況やスコアなど、測定可能なデータを表示します。

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

このコードは、進行状況バーのように見えますが、実際には相対的な測定値を表示します。ブラウザが<meter> 要素をサポートしている場合、視覚的なバーとして表示され、value の数値に応じてバーが填充されます。

使用例

以下は、リソースの使用状況を示すために<meter> 要素を使用する例です。例えば、ディスクの使用状況やメモリの使用状況を示す場合に有用です。

<p>ディスク使用率: <meter value="65" min="0" max="100">65%</meter></p>

このコードは、ディスクの使用率が65%であることを示すバーを表示します。

値の更新

<meter> 要素のvalue 属性は、JavaScriptを使って動的に更新することができます。例えば、サーバーのレスポンスやアプリケーションの進行状況に応じて測定値を更新することができます。

<meter id="performance" value="0" min="0" max="100"></meter>

<script>
  var meter = document.getElementById('performance');
  
  function updateMeter(value) {
    meter.value = value;
  }

  // 例: 進行状況の更新
  updateMeter(45);  // 進行状況を45%に設定
</script>

この例では、<meter> 要素が最初は0に設定されており、JavaScriptの関数を使用して測定値を動的に更新しています。

CSSによるスタイリング

<meter> 要素は、デフォルトでブラウザによってスタイルが設定されますが、CSSを使ってカスタマイズすることも可能です。以下の例では、測定バーの色や高さを変更する方法を示しています。

<style>
  meter {
    width: 100%;
    height: 20px;
  }

  meter[value="0"] {
    background-color: red;
  }

  meter[value="100"] {
    background-color: green;
  }

  meter {
    background-color: lightgray;
  }
</style>

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

このCSSでは、<meter> 要素の背景色をカスタマイズして、進行状況に応じた色（赤色や緑色）に変更しています。

HTML Living Standard/meter

目次

meter 要素

定義

属性

構文

進行状況の表示

使用例

値の更新

CSSによるスタイリング

関連項目

関連仕様