<meter> 規定範囲内の数量や測定値を表す
取り扱い | 現行の標準 |
カテゴリ |
フロー・コンテンツ フレージング・コンテンツ パルパブル・コンテンツ |
親にできる要素 | フレージング・コンテンツを受け入れる要素 |
子にできる要素 | フレージング・コンテンツ |
対応ブラウザ | caniuseで確認 |
<meter>タグの説明
<meter>
は、あらかじめ最大値や最小値が分かっているような、規定の範囲がはっきりしている物事の分量を表す際に使用します。
例えば、ハードディスクの使用量、有権者の母数が分かっている選挙の投票率、達成条件が明確な作業の進捗状況などを表すのに適しています。
<meter>タグの特徴
- レイアウトの初期値はインラインです。文章の改行には影響を与えません。
- 視覚的な効果として横長のグラフィカルなメーターが表示されます。これはブラウザの既定のスタイルによるものです。
- 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。
<meter>に指定できる主な属性
- value
- 現在の数値。必須属性です。
min
属性とmax
属性が指定されている場合、その範囲内に収まる値でなくてはなりません。この属性が未定義、あるいは不正な値であった場合、その値は0
となります。また、指定された値がmin
属性とmax
属性が示す範囲の外にある場合は、その範囲内の最も近い値が適用されます。 - min
- 範囲全体の下限。未設定の場合は
0
が適用されます。max
属性が指定されている場合は、それより小さい値でなくてはなりません。 - max
- 範囲全体の上限。未設定の場合は
1
が適用されます。min
属性が指定されている場合は、それより大きい値でなくてはなりません。 - low
- 「低い」とされる境界を表します。未設定の場合は
0
が適用されます。この属性値は、min
属性の値より大きく、high
属性およびmax
属性の値よりも小さい値でなければなりません。 - high
- 「高い」とされる境界を表します。未設定の場合は
1
が適用されます。この属性値は、max
属性の値より小さく、low
属性およびmin
属性の値よりも大きい値でなければなりません。 - optimum
- 「最適」とされる値を表します。未設定の場合は
0.5
が適用されます。min
属性とmax
属性によって定義される範囲内の値でなくてはなりません。low
属性とhigh
属性が指定されている場合、low
属性以上high
属性以下の範囲内にoptimum
属性を指定した場合には、low
属性からoptimum
属性までの範囲内が最適な値となります。optimum
属性の値をhigh
属性以上に設定した場合は、high
属性からoptimum
属性の範囲が最適と見なされます。
<meter>の使い方とサンプル
このタグを使ったマークアップのサンプルです。ボタンを押すごとに数が増える投票の仕組みと連動させています。
HTML
<script>
function voteButton() {
var getpoint = document.getElementById('vote');
getpoint.value++;
var outPut = document.getElementById('rpp');
outPut.value = getpoint.value;
}
</script>
<input type="button" value="Vote" onclick="voteButton()">
<meter id="vote" value="0" min="0" max="30" low="10" high="20" optimum="30">Vote</meter>
<output id="rpp">0</output> point (Max30)
表示確認
<meter>に関連するHTMLタグ
オブジェクトやスクリプトを埋め込む要素 | |
---|---|
<img> | 画像を表示する |
<picture> | 特定の画像に対して複数のメディアソースを提供するコンテナを設置する |
<figure> | 写真や図表などの自己完結した要素を表す |
<figcaption> | 参照される写真や図表にキャプションを追加する |
<canvas> | スクリプトで定義したグラフィックスを描画するための領域を配置する |
<audio> | ドキュメント内に音声コンテンツを埋め込む |
<video> | ページ内に動画コンテンツを表示する |
<source> | 再生候補となる動画や音源などのメディアソースを指定する |
<track> | 動画や音声ファイルに字幕やキャプションを追加する |
<embed> | 外部コンテンツを埋め込む |
<object> | 外部リソースのオブジェクトを埋め込む |
<param> | パラメーターを指定する |
<script> | HTMLで実行可能なスクリプトを埋め込む |
<noscript> | スクリプトが動作しない環境での表示内容を指定する |
<meter> | 規定範囲内の数量や測定値を表す |
<progress> | 作業の進捗状況を示すプログレスバーを表示する |
<output> | 計算結果やユーザーアクションの出力欄を作成する |
<dialog> | 任意のタイミングで開くダイアログボックスを作成する |
<template> | ページ読み込み後にスクリプトの実行によって挿入可能な要素を定義する |
<slot> | ウェブコンポーネントで独自に扱える枠を提供する |