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

HTMLのhigh属性とは？meter要素で高閾値を指定する方法を実例付きで解説

HTMLのhigh属性は、<meter>要素（ゲージ）において「高い値」とみなされる上限の閾値を指定するために使用されます。max、min、lowなどの属性と組み合わせて使うことで、より正確で分かりやすいゲージ表示を実現できます。

high属性の基本

<meter>要素は、ディスク使用量や投票結果など、特定範囲内における測定値を視覚的に表現するための要素です。high属性を設定すると、その値以上の範囲が「高すぎる状態」としてブラウザに認識され、ゲージの色などが変化してユーザーに警告を促すことができます。

  • min：測定範囲の最小値
  • max：測定範囲の最大値
  • low：「低い」とみなされる下限の閾値
  • high：「高い」とみなされる上限の閾値

Meter high属性のサンプルコード

以下は、meter要素のhigh属性を使った具体的な例です。

<!DOCTYPE html>
<html>
<head>
<title>Meter high</title>
<style>
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    * {
        padding: 2px;
        margin:5px;
    }
    input[type="button"] {
        border-radius: 10px;
    }
</style>
</head>
<body>
<form>
<fieldset>
<legend>Meter-high</legend>
<label for="paulaLifeSource">Paula's Health Risk: </label>
<meter id="paulaLifeSource" max="100" min="0" high="80" low="70" value="85"></meter>
<input type="button" onclick="lifeSource()" value="Medi Kit">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    divDisplay.textContent = 'Life Source at '+paulaLifeSource.value;
    function lifeSource(effect){
        var paulaLifeSource = document.getElementById("paulaLifeSource");
        var Immunity = paulaLifeSource.high;
        paulaLifeSource.high = 90;
        divDisplay.textContent = 'Immunity increased to '+paulaLifeSource.high+' from '+Immunity;
    }
</script>
</body>
</html>

実行結果

このコードを実行すると、以下のような出力が得られます。

1) 「Medi Kit」ボタンをクリックする前

初期状態では、high属性が「80」に設定されています。現在値（value）が85のため、ゲージは「高い」状態として表示されます。

HTMLのhigh属性とは？meter要素で高閾値を指定する方法を実例付きで解説

2) 「Medi Kit」ボタンをクリックした後

ボタンをクリックするとJavaScriptによってhigh属性の値が「90」に変更され、画面には「Immunity increased to 90 from 80（耐性が80から90に上昇しました）」というメッセージが表示されます。このように、high属性はJavaScriptから動的に読み書きすることも可能です。

HTMLのhigh属性とは？meter要素で高閾値を指定する方法を実例付きで解説

まとめ

HTMLのhigh属性を使うことで、meter要素のどの範囲から「高い値」とみなすかを明確に定義できます。min・max・low属性と組み合わせれば、健康リスクやシステム負荷などの指標を直感的に伝えるUIを簡単に構築できるでしょう。

  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属性の使用例以