HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLの要素におけるvalue属性の使い方

HTMLの<meter>要素におけるvalue属性は、ゲージ（計測バー）の現在値を指定するための属性です。この属性は必須であり、省略することはできません。

<meter>要素は、ディスク使用量や投票数、テストの合格率など、特定の範囲内における測定値を視覚的に表示したい場合に活用されます。

value属性の基本構文

<meter value="num">

上記の構文において、「num」には現在値を浮動小数点数として指定します。たとえば「0.7」「80」などの数値が該当します。

value属性の実装例

それでは、<meter>要素のvalue属性を使った具体的なコード例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
    <h2>結果</h2>
    <p>女子の合格率 <meter min="0" low="0" high="100" max="100" value="80"></meter></p>
    <p>男子の合格率 <meter min="0" low="0" high="100" max="100" value="70"></meter></p>
</body>
</html>

実行結果

HTMLの meter 要素におけるvalue属性の使い方

コードの解説

上記の例では、<meter>要素を使用して女子と男子それぞれの合格率をゲージ形式で表示しています。

  • min属性： ゲージの最小値を指定（ここでは「0」）
  • max属性： ゲージの最大値を指定（ここでは「100」）
  • low属性 / high属性： 低い値・高い値とみなされる範囲の境界を指定
  • value属性： 現在の測定値を指定（女子は「80」、男子は「70」）

たとえば男子の合格率を表す部分では、次のようにvalue属性に「70」を指定することで、ゲージの現在値が設定されます。

男子の合格率<meter min="0" low="0" high="100" max="100" value="70"></meter>

このようにvalue属性を適切に設定することで、ブラウザ上に現在値に応じたゲージが自動的に描画され、データを直感的に把握できるようになります。value属性は<meter>要素にとって不可欠な属性であるため、必ず忘れずに指定しましょう。

  1. HTML DOM Meter valueプロパティとは？使い方とサンプルコードを解説

    HTML DOM Meter valueプロパティとはHTML DOMのMeter valueプロパティは、<meter>要素のvalue属性に対応する数値を取得（読み取り）または設定（書き込み）するためのプロパティです。このプロパティは、high・low・min・maxなどの属性と組み合わせて使用することで、より精度の高いゲージ表示を実現できます。注意：<meter>要素は進捗状況を示すプログレスバーとして使用するものではなく、あくまでゲージ（計測値の表示）としてのみ使用してください。進捗の表示には<progress>要素を使用するのが適切です。構文val

  2. HTML DOM Meterオブジェクトとは？使い方と主要プロパティを徹底解説

    HTML DOM Meterオブジェクトとは HTML DOMにおけるMeterオブジェクトは、HTMLの<meter>要素をJavaScriptから操作・制御するためのインターフェースです。<meter>要素は、ディスク使用量やアンケート結果など、既知の範囲内における値をゲージ（計器）として視覚的に表示する際に使用されます。 注意：<meter>要素はプログレスバー（進捗状況の表示）として使用しないでください。あくまでゲージとしてのみ使用するのがルールです。進捗表示には<progress>要素を使うのが適切です。 構文 <meter>