meterタグ

タグ meter は、ある値を視覚的に整形して表示するために使用されます。

このタグの外見は、部分的または完全に塗りつぶされたバーです。バーは緑、黄、または赤色になることがあります（バーの色は属性の値によって異なり、これについては後述します）：

タグ meter は、例えば次のような状況で使用する必要があります：現在の温度を画面に表示したいが、その温度は 0 から 100 まで変化する可能性がある場合。次の属性を指定する必要があります：属性 value には現在の温度値を、属性 min には可能な最小値（この場合は0）、属性 max には可能な最大値（この場合は100）を指定します。

属性 value の値に応じて、バーの長さは小さくなったり大きくなったりします。 value に 10 を指定すると、バーは小さくなります（ 10 は最小値の0に非常に近いため）。一方、 90 という値を指定すると、バーは大きくなります（ 90 は最大値の100に近いため）。値が100の場合、バーは要素全体を占めます（値が最大値に達したため）。

100 より大きい値を指定すると、バーはやはり要素全体を占めます。 0 以下を指定すると、バーはまったく表示されません。

例

属性valueの値が小さい場合：

:

例

属性valueの値が大きい場合：

:

例

属性valueの値が中間の場合：

:

例

属性valueの値が最大値と等しい場合：

:

例

属性valueの値が最小値と等しい場合：

:

例

属性valueの値が最大値より大きい場合：

:

例

属性valueの値が最小値より小さい場合：

:

属性lowとhighの追加

タグ meter にはさらに 2 つの属性があります： low と high です。

温度の例でそれらの動作を見てみましょう。最小温度は 0、最大温度は 100 です。次に、次の範囲を作りたいとします：「寒い温度」は 0 から 20、「普通」は 20 から 80、「暑い」は 80 から 100。

寒い温度を設定するには、属性 low の値に数値 20 を指定します。これにより、0（属性 min の値）から 20（属性 low の値）までの範囲が低い値の領域になります。

暑い温度を設定するには、属性 high の値に数値 80 を指定します。これにより、 80（属性 high の値）から 100（属性 max の値）までの範囲が高い値の領域になります。

普通の温度は 20（属性 low の値）から 80（属性 high の値）までの範囲になります。この領域を通常値の領域と呼びましょう。

さて、属性 value の値がどの領域に含まれるかに応じて、バーは緑色または黄色に着色されます。通常値の領域にある場合は緑色に、高い値または低い値の領域にある場合は黄色になります。

例

属性 value の値が低い値の領域にある場合：

:

例

属性 value の値が通常値の領域にある場合：

:

例

属性 value の値が高い値の領域にある場合：

:

属性optimumの追加

属性 optimum は最適な値を定義します。この例では、最適なのは寒い温度、普通の温度、または暑い温度のいずれかです。あなたが最適な温度は寒い温度であると指定したとします。これで、属性 value の値（つまり現在の温度）に応じて、バーの色は緑、黄、または赤になります。

現在の温度が最適な温度の領域（ここでは寒い温度と指定しました）にある場合、バーの色は緑になります。現在の温度が最適な領域に隣接する範囲（この場合は普通の温度）にある場合、バーは黄色になります。現在の温度が最適な領域に隣接しない範囲（この場合は暑い温度）にある場合、バーは赤色になります。

同様に、最適な温度を暑い温度に指定した場合も同様のことが起こります。この場合、現在の温度が暑い温度の領域にあると、バーは緑色に、普通の温度の領域にあると黄色に、寒い温度の領域にあると赤色になります。

最適な温度を普通の温度に指定した場合、バーは緑色（現在の温度が普通の温度の領域にある場合）または黄色（現在の温度が普通の温度の隣接する領域、つまり暑いまたは寒い温度にある場合）のみになります。

どの範囲が最適であるかを指定するには、属性 optimum の値としてその範囲内の任意の数値を指定します。

以下の例では、属性 optimum の値は低い値の領域（つまり寒い温度）にあります。

例

属性 value の値が低い値の領域にある場合：

:

例

属性 value の値が通常値の領域にある場合：

:

例

属性 value の値が高い値の領域にある場合：

:

以下の例では、属性 optimum の値は高い値の領域（つまり暑い温度）にあります。

例

属性 value の値が低い値の領域にある場合：

:

例

属性 value の値が通常値の領域にある場合：

:

例

属性 value の値が高い値の領域にある場合：

:

---

以下の例では、属性 optimum の値は通常値の領域（つまり普通の温度）にあります。

例

属性 value の値が低い値の領域にある場合：

:

例

属性 value の値が通常値の領域にある場合：

:

例

属性 value の値が高い値の領域にある場合：

:

古いブラウザ

古いブラウザはタグ meter を視覚的に整形して表示することができず、代わりにタグ自体の内容を表示します：

:

属性

属性の値は小数や負の数でも構いません。

属性	説明
value	現在の値を設定します。必須属性です。
min	可能な最小値を設定します。デフォルト値： 0。
max	可能な最大値を設定します。デフォルト値： 1。
low	低い値の領域の境界を設定します。低い値は、属性 min の値から属性 low の値までの範囲になります。
high	高い値の領域の境界を設定します。高い値は、属性 high の値から属性 max の値までの範囲になります。
optimum	最適な値の領域を定義します。

関連項目