このページの本文へ

input要素だけじゃない HTML5のフォーム新機能 (2/2)

2012年06月22日 11時00分更新

文●浜 俊太朗/NHN Japan

  • この記事をはてなブックマークに追加
本文印刷

フォームで使うことが必須ではない要素

 progress要素とmeter要素は、仕様書では「4.10 Forms」にまとめられていますが、必ずしもform要素と一緒に使う必要はありません。

progress要素

  • カテゴリー:フローコンテンツ、フレージングコンテンツ、パルパブルコンテンツ、ラベル付け可能要素
  • この要素が使える文脈:フレージングコンテンツが予想される場所
  • コンテンツモデル:フレージングコンテンツだが、progress要素は入れられない
  • コンテンツ属性:グローバル属性、value、max

 progress要素は、あるタスクが完了するまでの進行度合い(進捗)を表します。たとえば、「動画をロードするときにリアルタイムで伸びていくプログレスバー」を想像すると分かりやすいでしょう。


<progress value="50" max="100">50%</progress>
スクショ:ss/progress.png

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> 
スクショ:ss/progress_2.png

Operaのスクリーンショット。進捗は7割といったところです


<progress value="50" max="100"></progress>
スクショ:ss/progress_3.png

Operaのスクリーンショット。進捗は5割です


<progress value="0.3" max="1"></progress>
スクショ:ss/progress_4.png

Operaのスクリーンショット。進捗は3割でしょう


<progress value="100" max="500"></progress>
スクショ:ss/progress_5.png

Operaのスクリーンショット。進捗は2割といったところでしょうか

 value属性の指定がない場合は、プログレスバーは「未確定」という扱いになります。Chromeの場合、以下のようにバーが動いて表示されます。


<progress max="1"></progress>
スクショ:ss/progress.png

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要素は、範囲が決められた数値や、割合を示す値を表します。たとえば、ハードディスクの最大容量に対する使用量、選挙の投票人口数に対する投票割合、学校のテストの成績などです。対応しているブラウザーでは、ゲージ状のコントロールで表示されます。

スクショ:ss/meter.png

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>
スクショ:ss/meter_3.png

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」(毎日コミュニケーションズ刊)がある。趣味はカメラとネットゲームと椅子。

前へ 1 2 次へ

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く