HTML

<meter> メータ

詳細を開く 詳細を閉じる

メータ : <meter>

  • <meter>要素は、ディスク容量など特定の範囲内に収まる数値を、図的に表します。
  • HTML5で追加された機能です。
  • まず、「min」と「max」の属性で最小値と最大値を指定します。
  • 次に、「low」と「high」の属性で低いと見なされる数値と、高い見なされる数値を指定します。
  • デフォルトでは「low」と「high」の間の値を、最適な区分として表示します。
  • 「optimum」属性を指定すると、「optimum」属性に近い区分を最適な区分として表示されます。

optimum : 指定なし


別ウィンドウで表示

<form action="../aaa.php" method="GET">
	
	10 : <meter value="10" min="0" low="30" 
		   high="70" max="100">
		10</meter><br>
		
	30 : <meter value="30" min="0" low="30" 
		   high="70" max="100">
		30</meter><br>
		
	50 : <meter value="50" min="0" low="30" 
		   high="70" max="100">
		50</meter><br>
		
	70 : <meter value="70" min="0" low="30" 
		   high="70" max="100">
		70</meter><br>
		
	90 : <meter value="90" min="0" low="30" 
		   high="70" max="100">
		90</meter><br><br>
		
	<input type="submit" value="送信">

</form>

optimum = 0

  • 「optimum」属性が「0」であり、「low」より小さいため、0~29が最適な値として表示されます。

別ウィンドウで表示

<form action="../aaa.php" method="GET">
	
	10 : <meter value="10" min="0" low="30" 
		   high="70" max="100" optimum="0">
		10</meter><br>
		
	30 : <meter value="30" min="0" low="30" 
		   high="70" max="100" optimum="0">
		30</meter><br>
		
	50 : <meter value="50" min="0" low="30" 
		   high="70" max="100" optimum="0">
		50</meter><br>
		
	70 : <meter value="70" min="0" low="30" 
		   high="70" max="100" optimum="0">
		70</meter><br>
		
	90 : <meter value="90" min="0" low="30" 
		   high="70" max="100" optimum="0">
		90</meter><br><br>
		
	<input type="submit" value="送信">

</form>

optimum = 50

  • 「optimum」属性が「50」であり、「low」以上「high」以下のため、30~70が最適な値として表示されます。

別ウィンドウで表示

<form action="../aaa.php" method="GET">
	
	10 : <meter value="10" min="0" low="30" 
		   high="70" max="100" optimum="50">
		10</meter><br>
		
	30 : <meter value="30" min="0" low="30" 
		   high="70" max="100" optimum="50">
		30</meter><br>
		
	50 : <meter value="50" min="0" low="30" 
		   high="70" max="100" optimum="50">
		50</meter><br>
		
	70 : <meter value="70" min="0" low="30" 
		   high="70" max="100" optimum="50">
		70</meter><br>
		
	90 : <meter value="90" min="0" low="30" 
		   high="70" max="100" optimum="50">
		90</meter><br><br>
		
	<input type="submit" value="送信">

</form>

optimum = 100

  • 「optimum」属性が「100」であり、「high」より大きいため、71~100が最適な値として表示されます。

別ウィンドウで表示

<form action="../aaa.php" method="GET">
	
	10 : <meter value="10" min="0" low="30" 
		   high="70" max="100" optimum="100">
		10</meter><br>
		
	30 : <meter value="30" min="0" low="30" 
		   high="70" max="100" optimum="100">
		30</meter><br>
		
	50 : <meter value="50" min="0" low="30" 
		   high="70" max="100" optimum="100">
		50</meter><br>
		
	70 : <meter value="70" min="0" low="30" 
		   high="70" max="100" optimum="100">
		70</meter><br>
		
	90 : <meter value="90" min="0" low="30" 
		   high="70" max="100" optimum="100">
		90</meter><br><br>
		
	<input type="submit" value="送信">

</form>
詳細を開く 詳細を閉じる
詳細を開く詳細を閉じるページの先頭へ