【HTML】max属性とmin属性で最小値と最大値を設定する方法

このページについて

このページではHTMLで使う事ができるmax属性とmin属性の2つの使い方と機能を解説しています。

max属性は最大値を設定する事ができる属性です。maxはinputタグ/meterタグ/progressタグの3つで使う事ができます。

min属性は最小値を設定する事ができる属性です。minはinputタグ/meterタグの2つで使う事ができます。

maxとminの使い方を見ていきます。どちらにも共通しているのがinputタグとmeterタグなので、それぞれを中心に解説していきます。

まずはinputタグで使うケースですが、この場合は入力される数値の最小値と最大値を設定し、不正な数値やイタズラ入力を防ぐと言った目的のために使う事ができます。

<input type="number" min="10" max="100">

このように設定した場合、入力できる数字は10以上100以下という設定になります。

実際にこんな感じになります。これで100以上とかの数値を送信しようとするとメッセージが出ます。

続いてmeterタグで使う際の書き方ですが、これも最小値と最大値という使い方で問題ありません。

<meter min="0" max="100" value="50"></meter>

最小値0で、最大値100でゲージ50を示すメーターです。これを実際に見てみると

こんな感じになります。わざわざ画像を用意しなくてもこのように簡単なメーターは表示できるので便利ですね。

max属性のみ、progressタグでも使う事ができます。progressタグはmeterタグとは違い、「進捗を示す」的な役割を持っています。簡単にいえばダウンロードの進捗とか、タスク管理とかそういう感じのやつです。

progressタグで使う場合ですが、正直いうとmeterタグで使う場合とそこまで変わりません。

<progress value="30" max="100"></progress>

これを実際に表示するとこんな感じに数値は30としているので、最大値の100に対して30進んだところまでが青く塗られています。これはJavaScriptを使って進捗率を変化させるとより面白くなります。

max属性とmin属性は最小値と最大値を設定するというシンプルな機能を持っています。使えるのはinputタグとmeterタグで、maxのみprogressタグでも使う事ができます。