cman.jpWEBページ作成
広告
<meter> 「割合」[読み方：メーター]
<meter>タグは、ディスクの使用量、投票率など特定範囲内の測定値を表示します。
非対応のブラウザのために、<meter>～</meter>内に測定値などを代替えコンテンツとして記載することが推奨されています。
| HTML規格 | HTML4.01 | HTML5 |
|---|---|---|
| 使用可否 | × | ○ |
<meter>は、HTML5で追加されたタグです
| ブラウザ別の対応状況 |
|---|
| 下記サイトで確認できます。 「Can I use」（英語のサイトです） |
広告
<meter> の仕様
| カテゴリー | 使用できる場所（親要素） | コンテンツモデル（子要素） | タグ省略 |
|---|---|---|---|
| フローコンテンツ フレージングコンテンツ | フレージングコンテンツを子要素にもてる場所 | フレージングコンテンツ <meter>は不可 | 不可 |
<meter> の属性
【構文】
<meter value="80" min="0" max="100" low="30 high="70" optimum="60">80%
</meter>
</meter>
| 属性 | 意味 | 値のサンプルなど |
|---|---|---|
| value="数値" | 現在の位置を示す値【必須】 | 「80」 |
| min="数値" | 最小値 ※デフォルト＝0 | 「10」 |
| max="数値" | 最大値 ※デフォルト＝1 | 「100」 |
| low="数値" | 低いとみなす境界値 ※デフォルト＝min値 | 「30」 |
| high="数値" | 高いとみなす境界値 ※デフォルト＝max値 | 「70」 |
| optimum="数値" | 最適とする値 ※デフォルト＝min値とmax値の中間 | 「60」 |
| グローバル属性 |
| |
| イベント属性 |
| |
<meter>タグのサンプル
ゲージの色のサンプル
・現在値が最適領域の場合（optimumを含む領域の場合、ゲージの色は緑）
・現在値が準最適領域の場合（最適領域の隣の領域の場合、ゲージの色は黄色）
・現在値が非最適領域（最適領域から遠い領域の場合、ゲージの色は赤色）
・現在値が最適領域の場合（optimumを含む領域の場合、ゲージの色は緑）
<p>投票率：
<meter value="50" min="0" max="100" low="30" high="70" optimum="60">50% </meter>
</p>
<meter value="50" min="0" max="100" low="30" high="70" optimum="60">50% </meter>
</p>
投票率：
・現在値が準最適領域の場合（最適領域の隣の領域の場合、ゲージの色は黄色）
<p>投票率：
<meter value="80" min="0" max="100" low="30" high="70" optimum="60">80% </meter>
</p>
<meter value="80" min="0" max="100" low="30" high="70" optimum="60">80% </meter>
</p>
投票率：
・現在値が非最適領域（最適領域から遠い領域の場合、ゲージの色は赤色）
<p>投票率：
<meter value="80" min="0" max="100" low="30" high="70" optimum="20">80% </meter>
</p>
<meter value="80" min="0" max="100" low="30" high="70" optimum="20">80% </meter>
</p>
投票率：
JavaScriptを使用したサンプル
現在値に対応したゲージを表示するサンプル
<script>
function js1(num){
var gage = document.getElementById('mtr1');
gage.value = num.value;
var comment = document.getElementById('cmt');
if (num.value <= 5) {
comment.value = "ディスク残量は半分以上あります";
} else if (num.value > 5, num.value <= 8) {
comment.value = "ディスク残量が半分以下になりました";
} else if (num.value > 8, num.value <= 10) {
comment.value = "ディスク残量が２割以下になりました";
}}
</script>
<form oninput="js1(disk)">
<p>ディスク使用量：
<meter id="mtr1" value="0" min="0" max=10" low="5" high="8" optimum="4.9" style="width:200px">0ＧＢ</meter>
：<output id="cmt">0ＧＢ</output></p>
<p>ディスク使用量を入力してください→
<input type="number" name="disk" placeholder="ＧＢで入力" size="2" min="0" max="10" style="width:80px"> ＧＢ<br>
（0～10ＧＢで入力してください）</p>
</form>
function js1(num){
var gage = document.getElementById('mtr1');
gage.value = num.value;
var comment = document.getElementById('cmt');
if (num.value <= 5) {
comment.value = "ディスク残量は半分以上あります";
} else if (num.value > 5, num.value <= 8) {
comment.value = "ディスク残量が半分以下になりました";
} else if (num.value > 8, num.value <= 10) {
comment.value = "ディスク残量が２割以下になりました";
}}
</script>
<form oninput="js1(disk)">
<p>ディスク使用量：
<meter id="mtr1" value="0" min="0" max=10" low="5" high="8" optimum="4.9" style="width:200px">0ＧＢ</meter>
：<output id="cmt">0ＧＢ</output></p>
<p>ディスク使用量を入力してください→
<input type="number" name="disk" placeholder="ＧＢで入力" size="2" min="0" max="10" style="width:80px"> ＧＢ<br>
（0～10ＧＢで入力してください）</p>
</form>
留意事項
- <meter>タグは、進捗を表す場合は使用しません。進捗を表すには、<progress>を使用します。
- 各属性へは、下記の関係式がすべて成り立つ値を設定します。
◆min≦low≦high≦max
◆min≦value≦max
◆min≦optimum≦max
| 関連するHTMLタグ | |
|---|---|
| progress | 進捗状況 |
広告