meterタグ
meterは、メーターを表示するタグです。
解説
meterタグは、メーターは割合を視覚的に表すのに使用します。
表示のサイズを変更したい場合はCSSの width、heightを使用してください。
コンテンツ・モデル
| カテゴリー (自カテゴリ) | フロー・コンテンツ フレージング・コンテンツ |
| コンテキスト (親カテゴリ) | フレージング・コンテンツを許可する場所 |
| コンテンツ・モデル (子カテゴリ) | フレージング・コンテンツ |
属性
meterタグには以下の属性が指定できます。
| 属性 | 説明 |
|---|---|
| value | 値を指定する （例）value="0.5" |
| min | 下限値を指定する （例）min="1" ※デフォルト値は0です |
| max | 上限値を指定する （例）max="100" ※デフォルト値は1です |
| low | 低いとされる値 （例）low="20" ※この値をvalue値が下回ると色が変わります。 |
| high | 高いとされる値 （例）high="80" ※この値をvalue値が上回ると色が変わります。 |
| optimum | 最適とされる値 （例）optimum="60" |
| 属性 | 説明 |
|---|---|
| class | クラスを指定する （例）class="hoge" |
| id | IDを指定する （例）id="foo" |
| style | スタイルを指定する （例）style="color:red;" |
その他のグローバル属性値については、グローバル属性をご覧ください。
サンプル
80%を表すメーターを表示する
<meter value="0.8"></meter>
30%を表すメーターを表示する
<meter value="30" min="0" max="100"></meter>
high値="80"で、value値="90"を表すメーターを表示する
<meter value="90" min="0" max="100" low="20" high="80"></meter>
highとした値を上回った場合はメーターの色が黄色（Chromeの場合）になります。
low値="30"で、value値="10"を表すメーターを表示する
<meter value="20" min="0" max="100" low="20" high="80"></meter>
lowとした値を下回った場合はメーターの色が黄色（Chromeの場合）になります。
横幅300pxのメーターを表示する
<meter value="0.8" style="width:300px;"></meter>
高さ50pxのメーターを表示する
<meter value="0.8" style="height:50px;"></meter>
備考
- meterはHTML5で新規に追加された要素です。
- 要素内に文字列を指定した場合は、meterタグが未対応の場合のみ表示されます。
（例）<meter>未対応です。</meter> → meterタグ未対応ブラウザの場合「未対応です。」という文字が表示される
