meter 要素のスタイリングについてのメモ for webkit & Opera

Category : CSS, HTML

HTML5 で追加された meter 要素。
Windows だと現在の最新版である Chrome8 と Opera11 で、何も指定しなくてもちゃんと表示してくれます(Mac 環境と開発版は試していないので分かりません)。
見た目の変更はできないのかなーと思って調べてみたら、webkit の独自拡張ではありますが、擬似要素がちゃんと用意されていました。
Opera は Dragonfly で確認してみましたがそれらしいプロパティを発見できませんでした。

この記事の CSS に関する情報は古くなっています。
新しく書き直しましたので、スタイリングについてはそちらをご覧ください。

今回のデモは以下をどうぞ。対応しているブラウザは Chrome です。

meter 要素のスタイリングについてのメモ デモページ

デモファイルをダウンロード

マークアップ

今回使う HTML はこんな感じです。

<meter min="0" max="100" low="20" high="80" optimum="50" value="100">100/100</meter><span>100/100</span><br />
<meter min="0" max="100" low="20" high="80" optimum="50" value="90">90/100</meter><span>90/100</span><br />
<meter min="0" max="100" low="20" high="80" optimum="50" value="70">70/100</meter><span>70/100</span><br />
<meter min="0" max="100" low="20" high="80" optimum="50" value="50">50/100</meter><span>50/100</span><br />
<meter min="0" max="100" low="20" high="80" optimum="50" value="30">30/100</meter><span>30/100</span><br />
<meter min="0" max="100" low="20" high="80" optimum="50" value="10">10/100</meter><span>10/100</span><br />
<meter min="0" max="100" low="20" high="80" optimum="50" value="1">1/100</meter><span>1/100</span>

各属性については、HTML5.JP を参照してください。

この記事でやるのは各擬似要素のスタイル指定ですので、擬似要素が指すものを知らなければなりません。
といっても上記の HTML5.JP の記事に書かれていますけどね……。
特に気をつけるのは以下の部分。

ゲージ領域に対するユーザーエージェントの要件:最適値が下限または上限またはその間のどこかに等しければ、ゲージの上下限間の領域は、最適領域として扱われなければいけません。そして、低と高の部分がもしあれば、それは準最適であるとして扱われなければいけません。そうでなければ、もし最適値が下限より小さければ、最小値と下限の間の領域は、最適領域として扱われなければいけません。下限と上限の間の領域は、準最適領域として扱われなければいけません。そして、上限と最大値の間の領域は、非最適領域として扱われなければいけません。最後に、最適値が上限より高ければ、その状況は逆転します。上限と最大値の間の領域は、最適領域として扱われなければいけません。上限と下限の間の領域は、準最適領域として扱われなければいけません。そして、残った下限と最大値の間の領域は、非最適領域として扱われなければいけません。

ゲージ表示に対するユーザーエージェントの要件: ユーザーに meter 要素を表示するとき、ユーザーエージェントは、最小値と最大値からの相対的な位置、そして実質値とゲージの 3 つの領域の間の関係を示すべきです。

webkit 用独自拡張の擬似要素は、主に最適領域・準最適領域・非最適領域を示すために使えるものです。
min, max, low, high, optimum, value の各属性の指定によって最適領域・準最適領域・非最適領域がどう変わるのかを確認するために、デモページには3種類用意してあります。

では次にスタイル指定をやってみます。

スタイル指定

使用できる擬似要素の説明をします。
これらは以下を参考にしました。

::-webkit-meter-horizontal-bar
横のメーターの場合に適用されます。
縦のメーターの場合には horizontal を vertical に変更します。これは以降の擬似要素でも同じです。
ちなみに、正方形の場合には横メーターだと解釈されるようです。
また、Opera11 では縦メーター自体が存在しないようです(あるかもしれませんが、指定方法が分かりません……)。
::-webkit-meter-horizontal-optimum-value
value の値が最適領域にある場合に適用されます。
デモページでは緑のバーとなります。
::-webkit-meter-horizontal-suboptimal-value
value の値が準最適領域にある場合に適用されます。
デモページでは黄色のバーとなります。
::-webkit-meter-horizontal-even-less-good-value
value の値が非最適領域にある場合に適用されます。
デモページでは赤のバーとなります。

参考ページには Max OS X では -webkit-appearance プロパティに以下を指定できるとも書いてあります。

  • continuous-capacity-level-indicator (デフォルト)
  • discrete-capacity-level-indicator (小さなブロック)
  • relevancy-level-indicator (細い線)
  • rating-level-indicator (星マーク)

どういうものなのかは名前で分かるかと思います。
参考ページには画像もありますので、そちらを参照してください。
それと、Mac 持ってないので実際に使えるかは確認してません。

デモページで使っている指定

デモページでは、下記のように各擬似要素に指定しています。

meter {
    margin-top: 10px;
    border: 1px solid #ccc;
    width: 300px;
    height: 20px;
    vertical-align: bottom;
}

meter::-webkit-meter-horizontal-bar {
    background-color: #eaeaea;
    background-image: -webkit-gradient(
                          linear, left top, left bottom,
                          from(#dadada),
                          color-stop(0.2, #eee),
                          to(#f0f0f0)
                      );
    background-image: -webkit-linear-gradient(
                          top,
                          #dadada,
                          #eee 20%,
                          #f0f0f0
                      );
    background-image: linear-gradient(
                          top,
                          #dadada,
                          #eee 20%,
                          #f0f0f0
                      );
}

meter::-webkit-meter-horizontal-optimum-value {
    background-color: #080;
    background-image: -webkit-gradient(
                          linear, left top, left bottom,
                          from(#a0ff9f),
                          to(#018f00)
                      );
    /* 中略(グラデーション用指定2種類) */
}

meter::-webkit-meter-horizontal-suboptimal-value {
    background-color: #ff0;
    background-image: -webkit-gradient(
                          linear, left top, left bottom,
                          from(#feff9f),
                          to(#dddf00)
                      );
    /* 中略(グラデーション用指定2種類) */
}

meter::-webkit-meter-horizontal-even-less-good-value {
    background-color: #f00;
    background-image: -webkit-gradient(
                          linear,
                          left top,
                          left bottom,
                          from(#ffafaf),
                          to(#f00)
                      );
    /* 中略(グラデーション用指定2種類) */
}

これで以下のような感じになると思います。

デモページを Chrome で表示したときのキャプチャ

グラデーション指定は以下を参考にしました。

指定自体は普通の指定と変わりませんね。普通の画像も使えます。
本当は meter 要素に :after 擬似要素使って content: attr(value) "/" attr(max); とかやりたかったんですけど、Chrome8 では表示してくれませんでした。

スタイリングのサンプルとして、GeckoTang さんが jsdo.it でいくつか作っていましたので、そちらも見てみるといいんじゃないかと思います。

それと、ちょっと気になったんですが、Opera の場合、meter 要素のデフォルトスタイルシートを上書きするような指定をした場合(border を指定するなど)、バーの色が通常のグラデーションからフラットな感じになってしまいます。:before, :after 擬似要素を指定した場合も同様です。

meter 要素に border を指定したときの Opera の表示

これは Opera 用の指定方法が分からないと直しようがないですね……。
でもまあ、そのうち対応するでしょう。

Trackbacks & Pingbacks

Leave a Reply