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

最終更新日:-0001年11月30日  (初回投稿日:2013年10月22日)

<meter>要素は、特定の範囲内でどの分量かを表示する要素です。
こんなかんじね。20% (← IE8以下、Safari は未対応。Firefox、Chrome、Operaは対応)
これもHTML5 からの新要素です。
<output>と同じく、結果の値を送信するわけでなく、ただ表示するだけの役目です。

全体の範囲の中での現在の分量というか位置を示します。これは「ゲージ」と言うそうです。
<meter>要素は、特定の範囲がハッキリしないモノに使うのはNGなんだって。

あと、「進捗(しんちょく)状況」を示す「プログレスバー」場合は、次回の<progress> を使うべきで、この<meter>を使うのはNGだって。

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

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

なお、<meter>は「title属性で単位を指定することができる」W3C の仕様書に書いてあります。
<meter>は、ゲージのバーは表示するけど、その数値や単位はプレビューできないので。
(titleで単位を書いても、ユーザに見えないのは変わらないんですけどね)

まずは使ってみよう(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属性にマイナスの値を入れてみましょう

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

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

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

ちなみに、CSSの 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 type="text/css">
    .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」がある領域が最適になりました。

で、具体的にはどう使うのか…なんですが

W3Cの仕様書には「ゲージを表示する」と書いてあり、具体的なサンプルイメージもあります(ソースと共に)。
やはり、レンダリングだけの要素のようです。

例えば、投票率ならこんなふうに使うのかな。

【○○○○○○選挙 投票率】

午前8時〜10時: 9.5% (9.5%)
〜午後0時: 17.8% (17.8%)
〜午後2時: 21.1% (21.1%)
〜午後4時: 15.3% (15.3%)
〜午後6時: 30.1% (30.1%)

lowを10、highを20、optimumを100に指定しています。(投票率こんなにあるわけないけど)

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

<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="number" 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 )

★JavaScriptの記述位置について★
このブログでは便宜上、<script>要素をHTMLの本文中に置いていますが、コレ、本来はあんまりよくない。
JavaScript は CSSと同じで、HTML文書の本文中に大量に書くのは非推奨になってます。
JavaScript を外部ファイルにして、使用するページの<head>部分に<script>要素で読み込むのが正統派。
外部ファイルに「.js」と拡張子をつけて、
<head>
<script src="../js/○○○.js"></script>
</head>
といった具合で読み込みます。
<script>要素については「 [44] scriptでスクリプトを読み込む or HTMLに直接書く」をご覧ください。

次回予告

次回は、今回の冒頭で少し触れた、「プログレスバー」を表示するための要素 <progress>です。
今回の <meter>が静的なゲージを表すのに対して、<progress>は動的な進捗状況を表します。
その動的な状況を調べるのは、やはりJavaScriptで行い、<progress>は表示するだけの要素です。

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

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

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

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

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

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
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.