meter とは
- ここで説明する meter とは次の語句からなるHTMLの要素です。
- meter
- 読み: メーター
意味: 計量器、ものの量や度合いをはかる器械
meter 要素の概要
この要素は、既知の範囲内で、ものの量や度合いを単位付きのスカラー値、または小数値で表すために使用します。
スカラー値とは大きさだけで定まる数量であり、単純にいうと単位をもとに計測できる値ということです。 例えば、長さや面積、温度や時間などを視覚的に表すことができます。
この要素には、開始タグと終了タグが必要です。
<meter> </meter>
サンプルコードと実行結果
このサンプルではメーター要素を物差し(定規)として利用するものを作ってみました。 CSS でメータ要素の横幅を 10cm に固定して、javascript で meter 要素の value 値と input 要素 range 型の value 値をシンクロさせています。
これは要素の表示を見ていただくために作成したサンプルですので、CSS と javascript の説明は割愛させていただきます。
サンプルコード: HTML
<body>
0cm <meter id="idMeter" min="0" max="10" value="5"></meter> 10cm<br>
調整<input id="idRange" min="0" max="10" value="5" type="range">
<output id="idOutput">5cm</output>
</body>
サンプルコード: script
<script>
let elmMeter = document.getElementById("idMeter");
let elmRange = document.getElementById("idRange");
let elmOutput = document.getElementById("idOutput");
document.addEventListener("change",function(){
elmMeter.value = elmRange.value;
elmOutput.innerText = elmRange.value + "cm";
},false);
</script>
調整
使用できる属性
属性についての補足
上記の high 属性、low 属性、optimum 属性を使用したサンプルを掲載しておきます。
サンプルのお題は外気温です。私が個人的に「低」「高」「最適」と思う外気温をこの要素の属性で表してみたいと思います。 私が心地よく過ごせる気温は 23℃ くらいです。 20℃ を下回ると寒く感じます。 また 25℃ を上回ると暑く感じますので下記のコードのように low(低) は 20、high(高) は 25、optimum(最適) は 23 となります。実際に温度を調整してみるとブラウザに表示されるメーターの色が変わると思います。
optimum 属性の値について補足しておきますと、今回は23を最適値にしていますが、仮に18とした場合は「低」の範囲が最適範囲となります。 つまり、最適値に指定した値が指し示す範囲が最適範囲として認識されるということです。
サンプルコード: HTML
<body>
0℃ <meter min="0" max="40" value="23" low="20" high="25" optimum="23"></meter> 40℃
</body>
調整