フォームで使うことが必須ではない要素
progress要素とmeter要素は、仕様書では「4.10 Forms」にまとめられていますが、必ずしもform要素と一緒に使う必要はありません。
progress要素
- カテゴリー：フローコンテンツ、フレージングコンテンツ、パルパブルコンテンツ、ラベル付け可能要素
- この要素が使える文脈：フレージングコンテンツが予想される場所
- コンテンツモデル：フレージングコンテンツだが、progress要素は入れられない
- コンテンツ属性：グローバル属性、value、max
progress要素は、あるタスクが完了するまでの進行度合い（進捗）を表します。たとえば、「動画をロードするときにリアルタイムで伸びていくプログレスバー」を想像すると分かりやすいでしょう。
<progress value="50" max="100">50%</progress>
Operaのスクリーンショット
進行度合いは、max属性とvalue属性によって指定します。max属性はタスクが完了するために必要な作業量を示し、value属性は現在までに完了した作業量を示します。max属性／value属性ともに単位は任意で、特に決まりはありません。
max属性を省略した場合のprogress要素の最大値は1.0となり、value属性の値には0.0から1.0までの数値を指定します。max属性が指定されている場合は、value属性の値には0からmax属性の値までの数値を指定します。分かりづらいので、以下にいくつかの例を示しましょう。
<progress value="0.7"></progress>
Operaのスクリーンショット。進捗は7割といったところです
<progress value="50" max="100"></progress>
Operaのスクリーンショット。進捗は5割です
<progress value="0.3" max="1"></progress>
Operaのスクリーンショット。進捗は3割でしょう
<progress value="100" max="500"></progress>
Operaのスクリーンショット。進捗は2割といったところでしょうか
value属性の指定がない場合は、プログレスバーは「未確定」という扱いになります。Chromeの場合、以下のようにバーが動いて表示されます。
<progress max="1"></progress>
Chromeのスクリーンショット。バーは左から右へと移動し続ける
progress要素の内容には、progress要素に対応していないブラウザー向けに、プログレスバーの内容を表すコンテンツを入れることが推奨されています。progress要素内に書いた内容は、progress要素に対応しているブラウザーでは表示されません。
<progress value="70" max="100">70%</progress>
meter要素
- カテゴリー：フローコンテンツ、フレージングコンテンツ、パルパブルコンテンツ、ラベル付け可能要素
- この要素が使える文脈：フレージングコンテンツが予想される場所
- コンテンツモデル：フレージングコンテンツだが、meter要素は入れられない
- コンテンツ属性：グローバル属性、value、min、max、low、high、optimum
<meter value="50" max="100"></meter>
meter要素は、範囲が決められた数値や、割合を示す値を表します。たとえば、ハードディスクの最大容量に対する使用量、選挙の投票人口数に対する投票割合、学校のテストの成績などです。対応しているブラウザーでは、ゲージ状のコントロールで表示されます。
Operaのスクリーンショット
meter要素は、範囲が決まっている数値を扱う要素ですので、たとえば身長や体重のように、最小値と最大値が不明の値には使えません。また、何かの進行度合い（進捗）を示す場合には、前述のprogress要素を使います。
ゲージの長さは、max属性とvalue属性によって決まります。max属性は数値の最大値を示し、value属性は実際の数値を示します。value属性の値がmax属性の値より大きい場合は、value属性の値はmax属性の値と同じになります。
以下のサンプルコードでは、0〜100の範囲にある、50の位置にバーが表示されます。
<meter value="50" max="100"></meter>
min属性を指定すると、数値の最小値も示せます。value属性の値がmin属性の値よりも小さい場合は、value属性の値はmin属性の値と同じになります。
以下のサンプルコードでは、30〜100の範囲にある、50の位置にバーが表示されます。
<meter value="50" min="30" max="100"></meter>
ポイント
meter要素にmax属性もmin属性も無い場合は、ゲージの範囲はデフォルト値である0〜1.0になります。
meter要素は、low属性とhigh属性を使って、ゲージを「低・中・高」の3つの範囲に分けられます。low属性で指定した値以下が「低」の範囲、high属性で指定した値以上が「高」の範囲、それ以外が「中」の範囲になります。
また、optimum属性を使って、「最適値」も指定できます。以下は、low属性、high属性、optimum属性を使ったmeter要素の記述例です。
<meter value="20" max="100" low="30" high="70" optimum="100"></meter>
<meter value="50" max="100" low="30" high="70" optimum="100"></meter>
<meter value="80" max="100" low="30" high="70" optimum="100"></meter>
value属性の値が異なる3つのゲージ。value属性の値が「低・中・高」のどの範囲に属するかによって、ゲージの色が変わる。optimum属性の値は100で共通
最適値と聞くと、常に最大値が最適と思いがちですが、実際にはゲージが示す内容によって異なります。たとえば、学校のテストの点数を表すゲージなら最適値は100ですが、ゲームのスコアの被弾数（敵の攻撃を受けてしまった回数）なら最適値は0でしょう（最大値は失敗できる限界数である残機数とします）。あるいは、体温計であれば、36度が最適値となるはずです。
progress要素同様、meter要素の内容には、meter要素に対応していないブラウザー向けに、ゲージの内容を表すコンテンツを入れることが推奨されています。meter要素内に記述した内容は、meter要素に対応しているブラウザーでは表示されません。
<meter value="80" max="100" low="30" high="70" optimum="100">100点満点中80点</meter>
meter要素には単位を明示する手段は用意されていませんが、title属性の値に単位を指定できます。
<meter value="80" max="100" low="30" high="70" optimum="100" title="点">100点満点中80点</meter>
◆
2回に渡ってフォームまわりの新機能を紹介してきましたが、いかがだったでしょうか。次回は、HTML5で意味が変更された要素などを解説する予定です。
著者：浜 俊太朗 （はま・しゅんたろう）
NHN Japanで働くマークアップエンジニア／ディレクター。
ブログ「hamashun.me」はコーディングに限定せずさまざまな話題を扱っている。主な著書に「一週間でマスターするXHTML & CSS for Windows」（毎日コミュニケーションズ刊）がある。趣味はカメラとネットゲームと椅子。
