[56] 数量や割合のゲージを表示しよう meter要素

最終更新日:2018年03月30日  (初回投稿日:2013年10月22日)

<meter>要素は、特定の範囲内でどの分量かを表示する要素です。
こんなかんじね。20%
<meter>要素は、残念ながらIEだけ未対応。その他のブラウザは Edge も含め対応しています。

これもHTML5 からの新要素
<output>と同じく、結果の値を送信するわけでなく、ただ表示するだけの役目です。
全体の範囲の中での現在の分量というか位置を示し、これは「ゲージ」と言うそうです。

<meter>要素は、特定の範囲がハッキリしないモノに使うのはNGなんだって。
あと、「進捗(しんちょく)状況」を示す「プログレスバー」場合は、次回の <progress>要素を使うべきで、この<meter>を使うのはNGだそうです。

<meter>は、満杯の量が決まっている中での、今の量を表示するようですね。
例えば、こんな場合に使えるようです。

  • ディスクの使用量
  • 投票率
  • 検索結果の関連性(的中率?)
  • ゲームのキャラのパワー残量
  • 達成率(寄付金集めとか、出席日数とか、ローン残高とか)
使用する要素 <meter> 〜 </meter>
<meter>の属性 value:必須。現在の位置を表す
min:最小値を指定
max:最大値を指定
low:低い値の境界点を指定
high:高い値の境界点を指定
optimum:最適な値を指定
form:親の<form>のID名を呼び出して関連づける
グローバル属性

まずは使ってみよう(value・min・max属性)

最低限必要な属性は value属性だけ。
また、未対応のブラウザのために<meter>と</meter>の間に「特定範囲内の位置」がわかるテキストを入れておきます。対応ブラウザには、このテキストは表示されません。

●サンプル1

*属性がまったく何も無い状態。value属性のデフォルトは「0」なので、
このようにゲージを表さない、バーだけの状態に。

0%
<meter>0%</meter>
<!--Valueのデフォルトは0ですが、略さず value="0"って書いたほうが良いそうです-->

*value属性で表示するゲージの値を指定。

20%
<meter value="0.2">20%</meter>

value値を「0.2」としてるのは、
min属性のデフォルトが「0」、max属性のデフォルトが「1」だから。
20%にしたいなら、0.2と指定します。
このように、属性には小数点以下の数値も使えます。

*じゃ、min属性、max属性を指定してみましょう。

40%
<meter min="0" max="100" value="40">40%</meter>

*上の例だとmin属性は「0」なので省略しても同じこと。
では、min属性にマイナスの値を入れてみましょう

-50%
<meter min="-100" max="100" value="-50">-50%</meter>

属性にはマイナスの数値も使えます。

縦にもできる。CSSの -moz-orientプロパティ

ちなみに、CSSの -moz-orientプロパティを使うと、<meter>要素を縦位置にする事もできます。
moz系(Firefox)だけ実装で、あんまり使えないけど...(Firefox で見てね)

40% 70% 100%

<meter class="vertical" min="0" max="100" value="40">40%</meter>
<meter class="vertical" min="0" max="100" value="70">70%</meter>
<meter class="vertical" min="0" max="100" value="100">100%</meter>

<style>
.vertical {
    -moz-orient: vertical; /*← horizontalは横(デフォルト)*/
    width: 20px;
    height: 80px;
    }
</style>

低・高・最適領域(low・high・optimum属性)

low属性は「低い領域の上限」。high属性は「高い領域の下限」を指定します。
optimum属性は「最適な領域のどこか1点」を指定。
図説するとこんなかんじ ↓

low属性のデフォルトはmin属性と同じになります。
high属性のデフォルトはmax属性と同じに。
optimum属性のデフォルトはminからmaxまでのど真ん中になります。
value属性以外ぜんぶ省略したら、minは0、maxは1なので、lowは0、highは1、optimumは0.5になります。

optimum属性なんですが、コレ、ピンポイントで1ヶ所を指定するわりには、
プレビューで反映されるのは、このポイントがある領域全体なんです。

optimum属性がある領域は、最適領域(optimum)として扱われ、
ゲージの色は、グリーンで表示されます。 100%
この最適領域の隣の領域は、準最適領域(suboptimal)として、
ゲージの色は、イエローで表示されます。 100%
このまた隣の最適領域から遠い領域は、非最適領域(less good)として、
ゲージの色は、レッドで表示されます。 100%

って読んだだけではアレなので、サンプルで見ていきましょう。

●サンプル2
このサンプルでは、optimum属性を使いません=デフォルト(ど真ん中)です。
low属性・high属性の位置によって、「最適領域」「準最適領域」「非最適領域」が変わるのを見てみますよ。

low属性・high属性を指定しないと、こんなかんじ。全部同じ色です。

10%
50%
90%
<meter max="100" value="10">10%</meter><br>
<meter max="100" value="50">50%</meter><br>
<meter max="100" value="90">90%</meter><br>

上の例だと lowは0、highは100になるため、ゲージ全体が1領域になってます。(領域が分けられてない)この場合 optimumは「50」なので、この50がある「最適領域」は全体ってことになり、3本とも全部グリーンになるわけです。

low属性を20、high属性を80に指定してみた。バーの色が変わっていますね。

10%
50%
90%
<meter max="100" low="20" high="80" value="10">10%</meter><br>
<meter max="100" low="20" high="80" value="50">50%</meter><br>
<meter max="100" low="20" high="80" value="90">90%</meter>

low と high で領域が3つに分けられました。
この場合 optimumは「50」なので、この50がある「最適領域」はグリーンに。
その両隣の、低い領域(0〜20)と高い領域(80〜100)は「準最適領域」になったのでイエローで表示されました。

lowを60に上げてみました。highは80のまま。

10%
20%
50%
80%
90%
<meter max="100" low="60" high="80" value="10">10%</meter><br>
<meter max="100" low="60" high="80" value="20">20%</meter><br>
<meter max="100" low="60" high="80" value="50">50%</meter><br>
<meter max="100" low="60" high="80" value="80">80%</meter><br>
<meter max="100" low="60" high="80" value="90">90%</meter>

もうお分かりですよね。 optimumはデフォの「50」。コレがある領域が最適領域なので、低い領域(1〜60)が最適領域になりました。
その隣の中間の領域が準最適領域でイエローに、そのまた隣の高い領域は「非最適領域」になったのでレッドに色分けされています。

こんどは逆に、lowを20、highを40と下げてみました。

10%
20%
50%
80%
90%
<meter max="100" low="20" high="40" value="10">10%</meter><br>
<meter max="100" low="20" high="40" value="20">20%</meter><br>
<meter max="100" low="20" high="40" value="50">50%</meter><br>
<meter max="100" low="20" high="40" value="80">80%</meter><br>
<meter max="100" low="20" high="40" value="90">90%</meter>

さっきのと逆に、optimumのデフォの「50」がある領域が最適になりましたね。

optimum属性で最適領域を決めよう

サンプル2で、デフォルトがど真ん中になるのがわかった optimum属性。
これとlow属性・high属性を指定すれば、グリーン、イエロー、レッドの領域を自由に決められるというわけです。

最適な領域って、<meter>を使う状況によって変わりますよね。
投票率とかなら、多いほうがいいので、高い領域を最適領域に指定しますね。
逆に少ないほうがイイもの(ディスクの使用量とかローン残高とか)もありますね。
最適領域を自由に指定するために optimum属性があります

●サンプル3
このサンプルは、全部 min=0、max=100、low=20、high=80にしています。

optimum属性を90にしてみた。

10%
20%
50%
80%
90%
<meter max="100" low="20" high="80" optimum="90" value="10">10%</meter><br>
<meter max="100" low="20" high="80" optimum="90" value="20">20%</meter><br>
<meter max="100" low="20" high="80" optimum="90" value="50">50%</meter><br>
<meter max="100" low="20" high="80" optimum="90" value="80">80%</meter><br>
<meter max="100" low="20" high="80" optimum="90" value="90">90%</meter>

optimum属性で指定した「90」がある領域が最適に、そこから離れるほど、イエロー、レッドと色が変わっていくのがわかりますね。

optimum属性を10にしてみた。

10%
20%
50%
80%
90%
<meter max="100" low="20" high="80" optimum="10" value="10">10%</meter><br>
<meter max="100" low="20" high="80" optimum="10" value="20">20%</meter><br>
<meter max="100" low="20" high="80" optimum="10" value="50">50%</meter><br>
<meter max="100" low="20" high="80" optimum="10" value="80">80%</meter><br>
<meter max="100" low="20" high="80" optimum="10" value="90">90%</meter>

今度は、optimum属性で指定した「10」がある領域が最適になりました。

他のフォーム部品と組み合わせてみた

<meter>要素も、<output>のように他のフォーム部品と組み合わせる使い方を考えてみました。
ついでに<output>でテキストも出してみました。<output>って、こんな時に便利ですね。

●サンプル4
数値の入力部品<input type="number">と組み合わせています。

出席日数ゲージ: 0days0

今月の出席日数を入力してください→
(0〜22日で入力してください)

「いいね!」などのメッセージは<output>要素で表示しています。
HTML & JavaScript はこのようになっています。

<script> 
function days(ctrl){	
// まず、meter のための指定
	var gage = document.getElementById('mtr1');
	gage.value = ctrl.value;
// ココから下は output のための指定
	var comment = document.getElementById('cmnt');
	if (ctrl.value <= 9) {
		comment.value = "少な。ダイジョウブ?";
	} else if (ctrl.value >= 10, ctrl.value <= 17) {
		comment.value = "まあまあ";
	} else if (ctrl.value >= 18, ctrl.value <= 22) {
		comment.value = "いいね!";
	} else {
		comment.value = "0〜22日までを入力してください";
	}
}
</script>
<!--ココからフォームの指定-->
<form oninput="days(yourDays)">
<p>
出席日数ゲージ:
<meter id="mtr1" value="0" min="0" max="22" low="10" high="17" optimum="22">0days</meter>:
<output id="cmnt">0</output>
</p>
<p>
今月の出席日数を入力してください→ 
<input type="text" name="yourDays" placeholder="日数を入力" size="10"> 日<br>
(0〜22日で入力してください)
</p>
</form>

●サンプル5
プッシュボタンの部品 <input type="button">と組み合わせています。
あんまり意味ないけど、コレで見ると、ゲージの色が変化する箇所がわかりやすいですね。

0push0 push ( Max=30 )

HTML & JavaScript はこのようになっています。

<script>
  function pushButton() {
    var pus = document.getElementById('pu2');
    pus.value++;
//「++」は ↑ 1ずつ加えるというコト
	var outPut = document.getElementById('rpr');
	outPut.value = pus.value;
  }
</script>

<input type="button" value="PUSH" onclick="pushButton()">:
<meter id="pu2" value="0" min="0" max="30" low="10" high="20" optimum="30">0push</meter>:
<output id="rpr">0</output> push ( Max=30 )

次回予告

次回は「プログレスバー」を表示するための <progress>要素について。今回の <meter>が静的なゲージを表すのに対して、<progress>は動的な進捗状況を表します。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
06 | 2018/07 | 08
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.