HTML5メーターの使い方とスタイル[ガイド]

実行されたアクティビティの量を示すHTMLプログレスバーに慣れている場合は、メーター要素がそれに似ていることがわかります - 両方とも 最大値以外の現在値を表示. プログレスバーとは異なり、メーターバーは進行状況を表示するために使用されるべきではありません.

それを示すために使用されます 特定の範囲の静的な値, たとえば、ディスク容量のうちどれだけの容量が使用され、どの容量が使用されていないかを表示することによって、ディスク容量を指定できます。.

それに加えて、メーター要素は、その範囲内で最大3つの領域を視覚化するためにも使用できます。ストレージスペースの例を再利用して、占有されているスペースの量だけを表示するのではなく、占有されているスペースがまばらにいっぱい（30％以下）か半分近く（30〜60％）またはそれ以上かを視覚的に示すこともできます。異なる色を使用して半分いっぱい（60％以上）. これにより、ユーザーはいつ記憶域の制限に達しているかを知ることができます。.

この記事では、私たちはあなたを紹介します メーターバーのスタイル 上記の両方の目的のために 簡易ゲージ （表示領域なし）と3色表示領域を持つゲージの2つの例。後者については、私たちは取り組むつもりです 「マーク」ゲージを作成する 貧弱な、普通の、そして良いマークを示すため 「pH」ゲージ 酸性、神経性、アルカリ性のpH値を表示するため.

属性

例から始めて詳細を説明する前に、以下の属性の一覧を見てみましょう。デフォルトなどの属性についての詳細は、例で説明します。.

値 - の値 メーター 素子
分 - メーターの範囲の最小値
最大 - メーターの範囲の最大値
低い - 下限値を示します
高い - 上限値を示します
最適 - 範囲内の最適点

1.シンプルなゲージのスタイリング

これは、属性を1つだけ使用した非常に単純な例です。 値. 先に進む前に、まず3つのことを知っておく必要があります。

（1） デフォルトがあります 分 そして 最大 範囲を定義する値 メーター, それぞれ0と1. （2） ユーザー指定の場合 値 内に収まりません メーター 範囲、それはどちらかの値を取ります 分 または 最大, 最も近い方. （3） 終了タグは必須です.

構文は次のとおりです。

0.5

あるいは、追加することもできます 分 そして 最大 属性はこのようにユーザー定義の範囲を提供します。

2.マークスゲージのスタイリング

まず、範囲を3つの領域（左/低、中、右/高）に分割する必要があります。これは 低い そして 高い 属性が効いてきます。これが3つの地域の分け方です.

3つの領域は、 分 ＆ 低い , 低い ＆ 高い そして 高い ＆ 最大.

今では特定の条件があることは明らかです 低い そして 高い 形成される3つの領域に対して値が続く必要があります。

低い より小さくすることはできません 分 そしてより大きい 高い ＆ 最大
高い より大きくすることはできません 最大 そしてより小 低い ＆ 分.
そして基準が破られたとき 低い そして 高い 満たされていない基準で他の変数の値を取ります。 低い 値がより小さい 分 それはすべきではありません, 低い 取得します 分 値.

この例では、左から右への3つの領域を次のように見なします。

悪い：（0〜33）
平均：（34〜60）
良い：（61〜100）

したがって、以下は属性の値です。 min = "0" low = "34" high = "60" max = "100".

これは、地域を視覚化した画像です。.

今作成したメーターには3つの領域がありますが、現時点では2つの色で2種類の領域しか示されません。どうして？なぜなら 最適 中部地域にあります.

最適ポイント

（3つの）どちらの地域でも 最適 ポイントが入る、それはデフォルトで緑色に着色された「最適な領域」と見なされます。そのすぐ隣の領域は「準最適領域」と呼ばれ、オレンジ色に着色されています。一番遠くにあるのは「あまり最適ではない地域」で、赤く着色されています.

これまでの例では、次の値を割り当てていません。 最適. したがって、デフォルト値は50になり、中間領域を「最適領域」とし、その右側（左側と右側の両方）を「準最適領域」とします。.

手短に言えば、上記の場合、 メーター 中間領域に入る要素は緑色で表示されます。残りのオレンジ.

それは私たちが望むことではありません。このように色付けして欲しいのです。悪い（赤）, 平均（オレンジ）, 良い（緑）

右領域は私たちの最適な領域と見なされるため、次のようになります。 最適 右領域に入る値（61と100を含む、61と100の間の任意の値）.

この例では90を取っています。これにより、右側の領域は「最適」、真ん中（そのすぐ隣の領域）は「準最適」、最も左側の領域は「最適ではない」領域になります。.

これは私達が私達のゲージで得るものです.

2. "pH"ゲージのスタイリング

第一に、pH値の向上です。酸性溶液は7未満のpHを持ち、アルカリ性溶液は7を超えるpHを持ち、7に着地した場合、それは中性の溶液です。.

したがって、以下の値と属性を使用します。

低= "7" , 高い= "7", 最大= "14", そしてその 分 デフォルト値のゼロを取ります。.

コードを完成させるために残りの属性を追加する前に、色を決めましょう。酸性（赤）, 中性（白）そして アルカリ性 （青）。酸性領域（7より下の左側の領域）も「最適」と考えてみましょう。

これは、目的のビジュアルを取得するためにターゲットとするCSS擬似要素です。 Firefox. （Webkitメーターの擬似要素などについては、「参照」の下にリストされているリンクを参照してください。）

 .ph_meter 背景：ライトグレー;幅：300ピクセル。 .ph_meter：-moz-meter-optim :: :: moz-meter-bar background：indianred; .ph_meter：-moz-meter-sub-ideal ::  -  moz-meter-bar 背景：アンティークホワイト; .ph_meter：-moz-meter-sub-sub-optim :: :: moz-meter-bar 背景：steelblue;

これが完全なHTMLコードとpHゲージの最終結果です。.

参考文献

HTML5メーターW3C仕様
Webkitの擬似要素とクラスのリスト
ベンダー固有の疑似要素のリスト

Hongkiatの詳細：HTML5を使用したプログレスバーの作成とスタイル