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

【初心者向け】HTMLのmeter要素「max属性」の使い方を解説

HTMLのmeter要素におけるmax属性とは

<meter>要素のmax属性は、計測範囲の上限値（最大値）を設定するために使用される属性です。<meter>要素は、水の不純物レベルのように、あらかじめ決まった範囲内のデータをゲージ形式で視覚的に表現するためのもので、min属性とmax属性を組み合わせることで、その計測範囲を定義します。

構文（シンタックス）

max属性の基本的な構文は以下のとおりです。

<meter max="num">

上記の「num」には浮動小数点数を指定します。この数値が<meter>要素の最大値として設定されます。

関連属性のおさらい

<meter>要素では、max属性以外にも以下のような属性がよく使われます。

  • min属性： 計測範囲の下限値（最小値）を設定
  • low属性： 「低い」とみなされる値の上限を設定
  • high属性： 「高い」とみなされる値の下限を設定
  • value属性： 現在の計測値を設定

使用例

それでは、<meter>要素のmax属性を使った実際のコード例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
<h2>Water Levels</h2>
<p>Impurity Level <meter min="0" low="50" high="95" max="100" value="85"></meter></p>
<p>TDS Level <meter min="0" low="20" high="80" max="100" value="60"></meter></p>
</body>
</html>

出力結果

上記のコードをブラウザで表示すると、次のように水質ゲージが出力されます。

【初心者向け】HTMLのmeter要素「max属性」の使い方を解説

この例では、<meter>要素を使って水位（水質）のゲージを表示しています。ゲージの最大値は、max属性によって設定されています。

TDS Level <meter min="0" low="20" high="80" max="100" value="60"></meter>

このように、min・low・high・max・valueの各属性を適切に組み合わせることで、ブラウザ上にわかりやすい計測ゲージを簡単に作成できます。

  1. HTMLのrowspan属性とは？テーブルセルの行結合の使い方を解説

    HTMLのrowspan属性は、表（テーブル）のセルが縦方向にまたぐ行数を指定するための属性です。この属性を使用することで、複数の行にまたがるセルを作成でき、より柔軟なテーブルレイアウトを実現できます。rowspan属性を適用できるのは、td要素またはth要素のみです。それ以外のHTML要素には使用できない点に注意しましょう。rowspan属性の構文rowspan属性の基本的な構文は以下のとおりです。<タグ名 rowspan=数値></タグ名>「数値」には、セルがまたぐ行数を整数で指定します。たとえば「rowspan=2」と指定すると、そのセルは2行分の高さを持つことに

  2. HTMLのtabindex属性とは？タブ移動の順序を制御する方法を解説

    HTMLのtabindex属性は、HTMLドキュメント内の要素がTabキーでフォーカスされる順序（タブ移動の順番）を定義するための属性です。tabindexはグローバル属性に分類されるため、すべてのHTML要素に対して使用することができます。通常、Tabキーを押すと要素はHTMLの記述順にフォーカスされますが、tabindex属性を指定することで、この順序を自由にコントロールできます。値には整数を指定し、数値が小さいものから順にフォーカスされます。tabindex属性の値について正の数（1以上）：指定した数値の順序でタブ移動が行われます0：HTMLの記述順にフォーカスされます（デフォルトの挙動