“meter”要素~“optimum”属性

“optimum”属性について

“optimum”属性は最適値みなされる値を指定します。

多くのブラウザでは“optimum”属性の値と“value”属性の値によってゲージの色が変わります。

“optimum”属性で指定した値が“high”属性の値以上の場合は値は大きければ大きいほど良いとみなされます。

“optimum”属性で指定した値が“low”属性の値以下の場合は値は小さければ小さいほど良いとみなされます。

“optimum”属性で指定した値が“low”属性の値以上で“high”属性の値以下の場合は値は中間値に近ければ近いほど良いとみなされます。

“optimum”属性が省略された場合は最小値と最大値の中間値が最適値となります。

“optimum”属性の値は“min”属性が指定されている場合はその値以上、“min”属性が省略されている場合は“0.0”以上でなければなりません。また、“max”属性が指定されていればその値以下、“max”属性が省略されていれば“1.0”以下でなければなりません。

指定できる値

サンプルコード

中間値が最適

10%
<p><label>貯水率：<meter min="0" max="100" low="20" high="80" optimum="50" value="10">10%</meter></label></p>
50%
<p><label>貯水率：<meter min="0" max="100" low="20" high="80" optimum="50" value="50">50%</meter></label></p>
90%
<p><label>貯水率：<meter min="0" max="100" low="20" high="80" optimum="50" value="90">90%</meter></label></p>


10%

貯水率：10%

50%

貯水率：50%

90%

貯水率：90%

低い値が最適

10%
<p><label>イライラ度：<meter min="0" max="100" low="20" optimum="0" value="10">10%</meter></label></p>
50%
<p><label>イライラ度：<meter min="0" max="100" low="20" optimum="0" value="50">50%</meter></label></p>
90%
<p><label>イライラ度：<meter min="0" max="100" low="20" optimum="0" value="90">90%</meter></label></p>


10%

イライラ度：10%

50%

イライラ度：50%

90%

イライラ度：90%

高い値が最適

10%
<p><label>猫が好きな度合い：<meter min="0" max="100" high="80" optimum="100" value="10">10%</meter></label></p>
50%
<p><label>猫が好きな度合い：<meter min="0" max="100" high="80" optimum="100" value="50">50%</meter></label></p>
90%
<p><label>猫が好きな度合い：<meter min="0" max="100" high="80" optimum="100" value="90">90%</meter></label></p>


10%

猫が好きな度合い：10%

50%

猫が好きな度合い：50%

90%

猫が好きな度合い：90%