meterタグとは?|特定範囲内の数量や割合を表示する

meterタグとは?|特定範囲内の数量や割合を表示する
博士
今回は、<meter>タグを使って特定範囲内の測定値を示すゲージを表示させる方法を解説するぞ。
 
 
博士
博士
リンゴが師と仰ぐ人物。
毎日HTML/CSSデザインの研究をしており、その知識を余すことなくリンゴに教えてくれる。

スポンサーリンク

<meter>タグとは

 

<meter>

対応ブラウザFirefox / Google Chrome / Safari / Opera
分類フロー・コンテンツ / フレージング・コンテンツ / ラベル付け可能要素 / パルパブル・コンテンツ
利用場所フレージング・コンテンツが期待される場所
内容フレージング・コンテンツ(ただし、meter要素の入れ子は不可)


 
 
<meter>タグは、特定の範囲内における数量や割合を示す際に使用します。

meter要素に対応しているブラウザでは、計測結果がゲージで表示されます。

<meter>タグは、全体の総量が確定している場合に使用します。
例えば、100点満点のうち80点を取った、ディスク容量100のうち50を使用した、などといったことを表示する際に使用します。
 
 

数値の書式

value属性、min属性、max属性、low属性、high属性、optimum属性の値は、以下の書式で記述する必要があります。

浮動小数点数
0.5、5、5E+2

  • 負数の数値も入力可能(マイナス(-)を付けます)。
  • 小数点以下の数値も入力可能(ピリオド(.)に続けて記述します)。
  • 指数表記も使用可能(Eまたはeを付けます)。

 

 
 

スポンサーリンク

value属性

ゲージが示す値を指定します。
この属性は必須です。

min属性(最小値)とmax属性(最大値)が指定されている場合は、その範囲内の数値を指定することができます。

 
 
どちらの属性も設定されていない場合は、0~1の範囲で指定します。

 
 

min属性 / max属性

ゲージの範囲を指定します。
どちらかのみを指定することも可能です。

  • min属性
    ゲージの範囲の最小値を指定します。
    指定されていなければ「0」とみなされます。
  • max属性
    ゲージの範囲の最大値を指定します。
    指定されていなければ「1」とみなされます。

 

 
 

スポンサーリンク

low属性 / high属性

ゲージの範囲を3つの領域(低い領域、中間の領域、高い領域)に分割します。
どちらかのみを指定することも可能で、その場合は2つに分割されます。

  • low属性
    ゲージの低い領域部分の上限値を指定します。
    指定されていなければ、min属性と同じ値とみなされます。
  • high属性
    ゲージの高い領域部分の下限値を指定します。
    指定されていなければ、max属性と同じ値とみなされます。

 
上記の残りが中間の領域になります。

 
 

optimum属性

そのゲージにおける最適な値を指定します。
指定されていなければ、min属性とmax属性の中間の値とみなされます。

ゲージの範囲が分割されている場合は、最適な値が含まれている領域が最適な領域になります。
分割されていない場合は、ゲージ全体が最適な領域になります。

 
 
博士
この場合、80点以上の高い領域が最適な領域になるぞ。
 
 

スポンサーリンク

title属性

数値の単位を示したい場合に指定することができます。

 
 

meter要素の内容

meter要素には内容を持たせることができます。
これは、meter要素に対応していないブラウザ向けの代替コンテンツになります。

逆に、meter要素に対応しているブラウザでは、この内容は表示されません。

 
 

スポンサーリンク

使用例

 
 

表示例

あなたの成績:65点(100点満点中)

 
 

まとめ

特定の範囲内における測定値を示す際は、<meter>タグを使用します。
 
 

HTML5 タグ図鑑

HTML5タグ全種類を図鑑としてまとめています。タグの意味や使い方でわからないことがあれば、ぜひこのページをご活用ください。

HTML5 タグ図鑑へ

 
HTML5 タグ図鑑

スポンサーリンク








meterタグとは?|特定範囲内の数量や割合を表示する