追記:この記事のCSSに関する情報は古くなっています。新しく書き直しましたので、スタイリングについてはそちらをご覧ください。2012年10月HTML5で追加されたmeter要素。11で、何も指定しなくてもちゃんと表示してくれます(Mac環境と開発版は試していないので分かりません)。見た目の変更はできないのかなーと思って調べてみたら、Webkitの独自拡張ではありますが、擬似要素がちゃんと用意されていました。OperaはDragonflyで確認してみましたがそれらしいプロパティを発見できませんでした。今回のデモは以下をどうぞ。対応しているブラウザはChromeです。デモページデモファイルをダウンロードマークアップ今回使うHTMLはこんな感じです。value="1">1/100</meter><span>1/100</span>各属性については、『HTML5.JP』を参照してください。HTML5.JPこの記事でやるのは各擬似要素のスタイル指定ですので、擬似要素が指すものを知らなければなりません。いっても上記の『HTML5.JP』の記事に書かれていますけどね......。気をつけるのは以下の部分。ゲージ領域に対するユーザーエージェントの要件:最適値が下限または上限またはその間のどこかに等しければ、ゲージの上下限間の領域は、最適領域として扱われなければいけません。低と高の部分がもしあれば、それは準最適であるとして扱われなければいけません。なければ、もし最適値が下限より小さければ、最小値と下限の間の領域は、最適領域として扱われなければいけません。下限と上限の間の領域は、準最適領域として扱われなければいけません。上限と最大値の間の領域は、非最適領域として扱われなければいけません。最後に、最適値が上限より高ければ、その状況は逆転します。上限と最大値の間の領域は、最適領域として扱われなければいけません。上限と下限の間の領域は、準最適領域として扱われなければいけません。残った下限と最大値の間の領域は、非最適領域として扱われなければいけません。つの領域の間の関係を示すべきです。示すために使えるものです。変わるのかを確認するために、デモページには3種類用意してあります。次にスタイル指定をやってみます。使用できる擬似要素の説明をします。これらは以下を参考にしました。WebKit::-webkit-meter-horizontal-bar横のメーターの場合に適用されます。縦のメーターの場合にはhorizontalをverticalに変更します。これは以降の擬似要素でも同じです。ちなみに、正方形の場合には横メーターだと解釈されるようです。11では縦メーター自体が存在しないようです(あるかもしれませんが、指定方法が分かりません......)。::-webkit-meter-horizontal-optimum-valuevalueの値が最適領域にある場合に適用されます。デモページでは緑のバーとなります。::-webkit-meter-horizontal-suboptimal-valuevalueの値が準最適領域にある場合に適用されます。デモページでは黄色のバーとなります。::-webkit-meter-horizontal-even-less-good-valuevalueの値が非最適領域にある場合に適用されます。デモページでは赤のバーとなります。Xでは-webkit-appearanceプロパティに以下を指定できるとも書いてあります。continuous-capacity-level-indicator(デフォルト)discrete-capacity-level-indicator(小さなブロック)relevancy-level-indicator(細い線)rating-level-indicator(星マーク)どういうものなのかは名前で分かるかと思います。参考ページには画像もありますので、そちらを参照してください。それと、Mac持ってないので実際に使えるかは確認してません。デモページで使っている指定デモページでは、下記のように各擬似要素に指定しています。*/}これで以下のような感じになると思います。グラデーション指定は以下を参考にしました。3指定自体は普通の指定と変わりませんね。普通の画像も使えます。8では表示してくれませんでした。スタイリングのサンプルとして、GeckoTangさんが『jsdo.it』でいくつか作っていましたので、そちらも見てみるといいんじゃないかと思います。meter要素を色々飾ってみた。jsdo.itそれと、ちょっと気になったんですが、Operaの場合、meter要素のデフォルトスタイルシートを上書きするような指定をした場合(borderを指定するなど)、バーの色が通常のグラデーションからフラットな感じになってしまいます。:after擬似要素を指定した場合も同様です。これはOpera用の指定方法が分からないと直しようがないですね......。そのうち対応するでしょう。Requestを送るIssueを作成するTwitterでメンションする記事を共有TwitterFacebookPocketはてなブックマークLINEコンテンツホームブログこのサイトについて。