« PostgreSQL 9.4について | トップページ | 眼精疲労・肩こり対策 »

2014.08.11

meter/progress要素

IEでは利用できないけどHTML5で打ち出されているmeter要素。
今回はこいつをしゃぶってみた。

meter要素では、グラフの最小値、最大値を設定して、自分の値を指定すると、自動的に比率に応じた横棒グラフ要素を描画する。

<form><meter min=0 max=100 value=30 style="width: 200px;">30%</meter></form>

これでIE以外であれば長さ200ピクセルの横棒のうち、60ピクセルが緑色のグラデーションで表示がされているはずである。

30%

単純に20刻みのグラフを作ってみよう。

90%90%
70%70%
50%50%
30%30%
10%10%

まあ、こんな具合である。

動的に表示するのであれば、JavaScriptで値を変更してあげればいい。

テキストボックスに任意の数値を入力すると、緑色のバーが変動することがわかるだろう。

次は、80%より大きければ緑色、20%を下回れば赤色、それ以外は黄色にバーの色を変えてみる。

90%90%
70%70%
50%50%
30%30%
10%10%
10%任意

この色分けを行っているのは、"optimum"プロパティと"low","high"プロパティの役割である。

<meter min=0 max=100 value=50 style="width: 200px;" low="20" high="80" optimum="90" >50%</meter>

この"optimum"属性というのは"最適値"であり、この最適値が最小値(low)最大値(high)と、どのような関係にあるかで、色分けの答えが変わってくる。
"最適値"がいくつになるのか、というのはデフォルトだと最小値と最大値の真ん中が想定される。
そのためoptimum="90"を削除してみると、20~80の間が緑色に表示され、19以下や80以上は黄色くなる。
最大値よりも大きい場所に最適値をセットすると(現在の設定)、maxより大きいと最適(緑)、low~maxの間だと準最適値(黄色)、lowを下回ると最適値適合せず(赤色)となっていく。

CSSを使うために

色の出方はわかったとして、色そのものなどはカスタマイズがしたくなるかもしれない。その場合はもちろんCSSで変更が可能である。
ただしwebkit系とmozila系で疑似要素が異なるので、クロスブラウザするのであれば双方に記述が必要となるのはHTML5のよくあるお話である。

Webkit系
::-webkit-meter-optimum-value
meterの値が最適値の場合。いわゆる現状緑色の世界。
::-webkit-meter-suboptimum-value
meterの値が準最適値の場合。いわゆる現状黄色の世界。
::-webkit-meter-even-less-good-value
meterの値が最適値不適合の場合。いわゆる現状赤色の世界。
◎例:
meter::-webkit-meter-optimum-value {
background: -webkit-gradient(linear, left top, left bottom, from(#ad7), to(#ad7), color-stop(0.20, #cea), color-stop(0.45, #7a3), color-stop(0.55, #7a3));
height: 100%;
}
続いてFirefox等での指定先。こっちは疑似クラスである。このためメーター自体の色合いなどはさらに疑似要素を足して表現しなければ行けないのがちょっち癖がある。
Mozilla系
:-moz-meter-optimum
meterの値が最適値の場合。いわゆる現状緑色の世界。
-moz-meter-sub-optimum
meterの値が準最適値の場合。いわゆる現状黄色の世界。
:-moz-meter-sub-sub-optimum
meterの値が最適値不適合の場合。いわゆる現状赤色の世界。
◎例:
:-moz-meter-optimum::-moz-meter-bar {
background: -moz-linear-gradient(top, #ad7, #ad7, #cea 20%, #7a3 45%, #7a3 55%);
}

あと、high側の境界値について、opera/chromeなどのwebkit系とmozila系では微妙に扱いが違う。
任意入力欄に"80"と入力した場合、webkit系は緑(最適値)と判断するが、mozilaでは黄色扱いとなる。mozilaで緑にするためには"81"以上を入力する必要がある。
このあたりまだまだブラウザ間の実装差違はなくならないものである(^^;

尚、meterに関する諸情報では『Unformed Building』さんを大いに参照させていただいた。 まあ、IEじゃ使えないんだけど。


progress

もういっちょご紹介はprogress要素。

こっちはずいぶんと素直なバー。
meterと違って、最適値に対する云々はないので、純粋な進捗状況(ダウンロード進行率とか)に適したデザインである。
昔はこういうのは、単色の画像ファイルのwidthを調整してtable内に書いたよなあ、、とかじじむさいことを考えてしまったw
まあ、IEじゃ使えないんだけど。

|

« PostgreSQL 9.4について | トップページ | 眼精疲労・肩こり対策 »

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/2022/60129694

この記事へのトラックバック一覧です: meter/progress要素:

« PostgreSQL 9.4について | トップページ | 眼精疲労・肩こり対策 »