WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > HTMLタグ・リファレンス > HTMLタグ一覧(ABC順) > <meter>「割合」

<meter> 「割合」[読み方:メーター]

<meter>タグは、ディスクの使用量、投票率など特定範囲内の測定値を表示します。
非対応のブラウザのために、<meter>~</meter>内に測定値などを代替えコンテンツとして記載することが推奨されています。

HTML規格HTML4.01HTML5
使用可否×
<meter>は、HTML5で追加されたタグです
ブラウザ別の対応状況
下記サイトで確認できます。
「Can I use」(英語のサイトです)
広告

<meter> の仕様

カテゴリー使用できる場所(親要素)コンテンツモデル(子要素)タグ省略
フローコンテンツ
フレージングコンテンツ
フレージングコンテンツを子要素にもてる場所フレージングコンテンツ
<meter>は不可
不可

<meter> の属性

【構文】
<meter value="80" min="0" max="100" low="30 high="70" optimum="60">80%
</meter>
属性意味値のサンプルなど
value="数値"現在の位置を示す値【必須】「80」
min="数値"最小値
※デフォルト=0
「10」
max="数値"最大値
※デフォルト=1
「100」
low="数値"低いとみなす境界値
※デフォルト=min値
「30」
high="数値"高いとみなす境界値
※デフォルト=max値
「70」
optimum="数値"最適とする値
※デフォルト=min値とmax値の中間
「60」
グローバル属性
  • accesskey
  • autocapitalize
  • autofocus
  • class
  • contenteditable
  • dir
  • draggable
  • enterkeyhint
  • hidden
  • id
  • inert
  • inputmode
  • is
  • itemid
  • itemprop
  • itemref
  • itemscope
  • itemtype
  • lang
  • nonce
  • popover
  • slot
  • spellcheck
  • style
  • tabindex
  • title
  • translate
  • writingsuggestions
イベント属性
ページTOP

<meter>タグのサンプル

ゲージの色のサンプル
・現在値が最適領域の場合(optimumを含む領域の場合、ゲージの色は緑)
<p>投票率:
<meter value="50" min="0" max="100" low="30" high="70" optimum="60">50% </meter>
</p>

投票率: 50%


・現在値が準最適領域の場合(最適領域の隣の領域の場合、ゲージの色は黄色)
<p>投票率:
<meter value="80" min="0" max="100" low="30" high="70" optimum="60">80% </meter>
</p>

投票率: 80%


・現在値が非最適領域(最適領域から遠い領域の場合、ゲージの色は赤色)
<p>投票率:
<meter value="80" min="0" max="100" low="30" high="70" optimum="20">80% </meter>
</p>

投票率: 80%


ページTOP

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 = "ディスク残量が2割以下になりました";
}}
</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">0GB</meter>
:<output id="cmt">0GB</output></p>
<p>ディスク使用量を入力してください→
<input type="number" name="disk" placeholder="GBで入力" size="2" min="0" max="10" style="width:80px"> GB<br>
(0~10GBで入力してください)</p>
</form>

ディスク使用量: 0GB0GB

ディスク使用量を入力してください→ GB
(0~10GBで入力してください)


ページTOP

留意事項

  • <meter>タグは、進捗を表す場合は使用しません。進捗を表すには、<progress>を使用します。
  • 各属性へは、下記の関係式がすべて成り立つ値を設定します。
    ◆min≦low≦high≦max
    ◆min≦value≦max
    ◆min≦optimum≦max
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン