[56] 数量や割合のゲージを表示しよう meter要素
最終更新日:2018年03月30日 (初回投稿日:2013年10月22日)
<meter>要素は、特定の範囲内でどの分量かを表示する要素です。
こんなかんじね。
<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」なので、
このようにゲージを表さない、バーだけの状態に。
<meter>0%</meter>
<!--Valueのデフォルトは0ですが、略さず value="0"って書いたほうが良いそうです-->
*value属性で表示するゲージの値を指定。
<meter value="0.2">20%</meter>
value値を「0.2」としてるのは、
min属性のデフォルトが「0」、max属性のデフォルトが「1」だから。
20%にしたいなら、0.2と指定します。
このように、属性には小数点以下の数値も使えます。
*じゃ、min属性、max属性を指定してみましょう。
<meter min="0" max="100" value="40">40%</meter>
*上の例だとmin属性は「0」なので省略しても同じこと。
では、min属性にマイナスの値を入れてみましょう
<meter min="-100" max="100" value="-50">-50%</meter>
属性にはマイナスの数値も使えます。
縦にもできる。CSSの -moz-orientプロパティ
ちなみに、CSSの -moz-orientプロパティを使うと、<meter>要素を縦位置にする事もできます。
moz系(Firefox)だけ実装で、あんまり使えないけど...(Firefox で見てね)
<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)として扱われ、
ゲージの色は、グリーンで表示されます。
この最適領域の隣の領域は、準最適領域(suboptimal)として、
ゲージの色は、イエローで表示されます。
このまた隣の最適領域から遠い領域は、非最適領域(less good)として、
ゲージの色は、レッドで表示されます。
って読んだだけではアレなので、サンプルで見ていきましょう。
●サンプル2
このサンプルでは、optimum属性を使いません=デフォルト(ど真ん中)です。
low属性・high属性の位置によって、「最適領域」「準最適領域」「非最適領域」が変わるのを見てみますよ。
low属性・high属性を指定しないと、こんなかんじ。全部同じ色です。
<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に指定してみた。バーの色が変わっていますね。
<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のまま。
<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と下げてみました。
<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にしてみた。
<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にしてみた。
<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">と組み合わせています。
「いいね!」などのメッセージは<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">と組み合わせています。
あんまり意味ないけど、コレで見ると、ゲージの色が変化する箇所がわかりやすいですね。
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>は動的な進捗状況を表します。
- 関連記事
-
- [61] イメージマップ(リンク領域)を作ろう map要素・area要素
- (ちょっとメモ)属性の「引用符」や「値」の省略について
- (ちょっとメモ)HTML5 での 省略可能なタグについて
- [60] フォームを美しく整えよう(CSS使用)
- [59] フォームの属性 逆引き一覧 (どの属性がどの部品に使えるか)
- [58] 暗号鍵を作ろう keygen要素(HTML5.2で削除されました)
- [57] プログレスバー(進捗状況)を出そう progress要素
- [56] 数量や割合のゲージを表示しよう meter要素
- [55] 計算結果の出力欄を作ろう output要素
- [54] ラベルを付けて使いやすくしよう label要素
- [53] 文章 (複数行のテキスト) を入力してもらおう textarea要素
- [52] 入力候補のリストを作ろう datalist要素
- [51] セレクトメニューを作ろう(select・option・optgroup要素)
- (ちょっとメモ)整理しよう。フォームのボタン比較
- [50] button要素で送信・リセット・汎用ボタンを自由に作ろう
初心者にも使いやすい(と思う)レンタルサーバー
「初心者ですがレンタルサーバーはどこがいい?」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、
スターサーバーや ロリポップ!
です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。
ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー
は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。
スポンサーリンク