【HTML】meterタグでゲージを描画する方法・JavaScriptで値を変更する方法

このページについて

このページではmeterの使い方を解説しています。

meterタグ

meterは特定の範囲のゲージを描画する事ができます。この範囲については自分で最小値と最大値を設定することもできます。

似た機能としてはJavaScriptとHTMLのcanvasタグの組み合わせによる描画もありますが、そちらより簡単にできます。ただしゲージしか表示できず、さらにはゲージの色も固定で3種類しか使えません。

meterはダウンロードなどの進行状況を示すものとは違います。進行状況などを示す方はprogressタグを使用します。

meterタグの書き方

meterはとってもシンプルで、以下のように簡単に書きます。

<meter value="10" min="0" max="100">10</meter>

この書き方をした場合、最小値(min属性)で0、最大値(max属性)を100とした範囲内で設定しましたが、value属性で実際に表示するのが10としています。つまり以下のように描画されます。

10
そして最大値のmax属性を50にしてみるとこうなります。

10
同じvalue10でも最大値が異なるのでゲージの描画も異なります。

CSSでmeterのwidthを設定することで横サイズを変える事ができます。縦は何も変わりませんが、横サイズを変更したい方はスタイルシートでいじってみましょう。

一番上がclassのm1で、widthを100%。次のmeterにclassでm2を設定し、width50%にしています。一番最後のmeterはクラスを何も設定していないので、デフォルトの大きさですが、上はそれぞれ見ての通りですね。ブラウザの横幅を目一杯使って表示したい場合はスタイルシートでいじり倒しましょう。

meterタグで使える属性

meterで使える属性は以下の通りです。

この中で必須となるのは一番最後のvalue属性です。これはゲージの描画する緑の部分を出すために指定します。

次に大事なのがmax属性と、min属性です。それぞれゲージの最小値と、最大値を指定します。無くても問題ありません。省略した場合は自動で値が設定されます。

ただし上のように、valueに関係なくゲージが埋まります。

そして細かい指定をする場合、high属性とlow属性の2つを設定します。みると分かりやすいと思いますが、例えば以下の場合は「high属性→80、low属性→20」とした場合の3つのゲージを書いたものですが
10
50
90
このようになります。一番上はvalue=10で、一番下はvalue=90にしました。それぞれ色が変わっていますが、指定した値以下はこのように色が変化します。ちなみにoptimum属性は「最適な範囲」ということで同じく数値指定します。最適な数値にした場合、真ん中のように表示されます。

あとはグローバル属性・イベント属性のサポートをしています。

JavaScriptで動的に値を変更

JavaScriptを使用してゲージのvalue属性を操作すれば、ゲージの表示量を変える事ができます。

以下はサンプルで作成した、3つの数値とゲージ操作のソースコードです。

<meter value="" min="0" max="100" id="me"></meter>
<button onclick="cn20()">20%</button>
<button onclick="cn80()">80%</button>
<button onclick="cn0()">0%</button>

function cn20() {
let x = document.getElementById('me');
x.value=20;
}

function cn80() {
let x = document.getElementById('me');
x.value=80;
}

function cn0() {
let x = document.getElementById('me');
x.value=0;
}

このコードを実行すると以下のようになります。

20%
80%
0%
クリックするごとに関数が実行され、数値が動的に操作されてそれに伴ってゲージの描画量も変わります。サンプルでは20、80、0の3つを作成しましたが、inputタグでユーザーからキーボードからの数値を受け付けて64%とかも可能になります。

まとめ

meterはゲージを示したい時に使います。ゲージの色自体は変更することはできませんが、ゲージの横幅などはスタイルシートで操作できます。JavaScriptを使用すれば、ゲージの数値自体も操作できます。

HTMLの基礎

HTMLってどんな言語？書き方やHTMLファイルの作成方法などを解説。

HTMLタグで押さえておきたいポイント3選

HTMLタグを使う上で必ず押さえておいてほしいポイント3つの解説です。

HTMLタグと属性一覧

HTMLタグと属性の一覧です。

tableタグ生成ページ

tableタグの基本形を生成できるページです。

ulタグ・olタグ生成ページ

ulタグとolタグの基本形を生成できるページです。