meter要素について、低、中、高の範囲に分けた場合、メーターが赤になるものはどれか。
正解！おめでとう！
解説
meter要素は、使用率などをメーターで表示するもの。
meter要素に指定できる属性を下の表にまとめたよ。
| 属性名 | 詳細 |
|---|---|
| value | 現在値 |
| min | メーター全体の下限 |
| max | メーター全体の上限 |
| low | メーターを低、中、高の範囲に分けた場合の、低の上限 |
| high | メーターを低、中、高の範囲に分けた場合の、高の下限 |
| optimum | 最適値 |
指定可能な値は全て浮動小数点。
選択肢の属性の組み合わせを実装してみたよ。
See the Pen Untitled by ねこたろう (@neko03) on CodePen.
最適値(optimum)が低の場合、現在値(value)が低だと緑、中だとオレンジ、高だと赤になる。
最適値(optimum)が高の場合、現在値(value)が低だと赤、中だとオレンジ、高だと緑になる。
つまり、最適値(optimum)と現在値(value)が離れていると赤、同じくらいだとオレンジ、近いと緑になるよ。
そのため、メーターが赤になっている下の2つが正解。
value="80" min="0" max="100" low="30" high="70" optimum="10"
value="20" min="0" max="100" low="30" high="70" optimum="90"
おしい…もう一度…！
Comment