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

HTMLのoptimum属性とは？meter要素での使い方を解説

HTMLのoptimum属性は、ドキュメント内でゲージの値が「最適」とみなされる範囲を定義する属性です。この属性を指定できるのは、meter要素のみです。

optimum属性は、min・max・low・highなどの属性と組み合わせて使用することで、計測値がどの範囲にあれば望ましい状態なのかをブラウザに伝える役割を果たします。

構文

optimum属性の構文は以下のとおりです。

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

属性値には、ゲージの最適値となる数値（整数または小数）を指定します。

それでは、HTMLのoptimum属性の具体的な使用例を見てみましょう。

使用例

<!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 optimum属性のデモ</h1>
<p>ダウンロード状況：</p>
<meter min="0" max="100" low="10" high="90" value="50" optimum="30"></meter>
</body>
</html>

出力結果

HTMLのoptimum属性とは？meter要素での使い方を解説

この例では、meter要素に対してmin属性に「0」、max属性に「100」、low属性に「10」、high属性に「90」、value属性に「50」、そしてoptimum属性に「30」を指定しています。これにより、値「30」付近が最適な状態としてブラウザに認識され、現在の値（50）との関係に応じてゲージの表示色が変化します。

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