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

HTMLのlow属性とは？meter要素での使い方とコード例をわかりやすく解説

HTMLのlow属性は、ゲージ（計測バー）の値が「低い」とみなされる範囲の境界値を定義するための属性です。この属性を適用できるのは、<meter>要素のみであり、他のHTML要素では使用できません。

low属性に指定した数値より小さい値がmeter要素に入力された場合、ブラウザはその状態を「低い値」として認識し、多くの場合ゲージの色が変化して視覚的に警告を表現します。low属性と対になるものとして、値が「高い」とみなされる範囲を定義するhigh属性も存在します。

low属性の基本構文

low属性の記述方法は以下のとおりです。

<meter low="数値"></meter>

low属性には0以上の数値を指定します。通常はmin属性・max属性・high属性などと組み合わせて使用し、ゲージの適正範囲を細かく制御します。

HTML low属性の使用例

それでは、low属性を使った具体的なコード例を見てみましょう。

サンプルコード

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        height: 100vh;
        background-color: #8BC6EC;
        background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
        text-align: center;
    }
</style>
<body>
<h1>HTML low属性のデモ</h1>
<p>ダウンロード状況：</p>
<meter min="0" max="100" low="10" high="90" value="50"></meter>
</body>
</html>

出力結果

上記のコードを実行すると、0から100の範囲を持つゲージが表示され、現在値50が示されます。この例ではlow属性に「10」、high属性に「90」が設定されているため、値が10未満になるとゲージは「低い状態」として表示されます。

low属性を使う際のポイント

  • low属性は必ずmeter要素内でのみ有効です。progress要素などでは使用できません。
  • low属性の値はmin属性以上、max属性以下の範囲で指定する必要があります。
  • low属性とhigh属性を組み合わせることで、「低」「適正」「高」の3つのゾーンを明確に定義できます。

ディスク使用量、バッテリー残量、テストのスコアなど、数値の状態を直感的に伝えたい場面でlow属性は非常に役立ちます。ぜひ実際のWebページ制作で活用してみてください。

  1. HTMLのwrap属性とは？textareaのテキスト折り返し設定を解説

    wrap属性とは HTMLのwrap属性は、<textarea>要素内のテキストを、フォーム送信時にどのように折り返すかを定義する属性です。画面上での見た目だけでなく、サーバーへ送信されるデータに改行コードを含めるかどうかを制御できる点が特徴です。 指定できる値 soft：画面上では自動的に折り返して表示されますが、送信されるテキストには改行コードが挿入されません（デフォルト値）。 hard：画面上の折り返し位置に基づいて、フォーム送信時に改行コードが挿入されます。この値を使用する場合はcols属性の指定が必須です。 構文 wrap属性の基本的な書き方は以下のとおりです。

  2. HTMLのdraggable属性とは？使い方とサンプルコードを解説

    HTMLのdraggable属性とはHTML DOMのdraggable属性は、要素がドラッグ可能かどうかを示す真偽値（boolean）を取得・設定するための属性です。この属性を活用することで、ドラッグ＆ドロップ操作に対応したインタラクティブなWebページを簡単に実装できます。注意：リンク（<a>タグ）や画像（<img>タグ）は、デフォルトでドラッグ可能に設定されています。draggable属性に指定できる値true … 要素をドラッグ可能にするfalse … 要素をドラッグ不可にするauto … ブラウザのデフォルト動作に従うHTML draggable属性の使用例以