html meterラベル

HTML Meterタグの概要

Meterタグは、HTML5で導入された要素で、特定の範囲内の数値を表すために使われます。例えば、ディスクの使用量やプロセスの進行状況などを視覚的に表示するのに適しています。

Meterタグの定義と使用方法

Meterタグは数値データを視覚的に表示し、その値が特定の範囲内にあるかどうかを示します。以下に基本的な構文を示します。

<meter value="現行値" min="最小値" max="最大値">表示テキスト</meter>

ブラウザのサポート状況

Meterタグは主要なブラウザで広くサポートされていますが、いくつかの古いバージョンのブラウザではサポートされていない場合があります。以下の表は、主要ブラウザのサポート状況を示しています。

ブラウザ サポート状況
Google Chrome はい
Mozilla Firefox はい
Microsoft Edge はい
Safari はい
Internet Explorer いいえ

Meterタグの属性

Meterタグにはいくつかの属性があります。以下にその主要な属性をリストアップします。

  • value: 現行値を指定します（必須）。
  • min: 最小値を指定します（デフォルトは0）。
  • max: 最大値を指定します（デフォルトは1）。
  • low: 低い値のしきい値を指定します。
  • high: 高い値のしきい値を指定します。
  • optimum: 最適値を指定します。

Meterタグのイベント

Meterタグには直接的なイベントはありません。しかし、Meterタグを囲む要素やその属性を利用して、JavaScriptを使ったインタラクティブな操作を実現することができます。

コードの実例

以下に、HTML Meterタグの使用例を示します。

<!-- ディスクの使用量を示す例 -->
<meter value="70" min="0" max="100" low="33" high="66" optimum="80">
    70%
</meter>

関連するQ&A

Q1: MeterタグとProgressタグの違いは何ですか？

A1: Meterタグは特定の範囲内の単一値を表すのに使用され、Progressタグは進行状況を表すのに使用されます。

Q2: Meterタグは旧バージョンのブラウザでどのように表示されますか？

A2: サポートされていない旧バージョンのブラウザでは、Meterタグの内容が単純なテキストとして表示されます。

Q3: Meterタグの値を動的に変更する方法は？

A3: JavaScriptを使用して、Meterタグの属性値を動的に変更することが可能です。