インジケーター2種 [HTML5]

html5には、meterタグとprogressという二つのインジケーターを表すタグがあります。
使い方自体は難しくないのですが、それぞれ意味があって、使い道には気を付けなければなりません。
また、現状、これらのタグには複雑なcssは当てられないうえに、対応ブラウザが限られています（2015/06現在、iOSには対応していません）。

sample＜meter＞

80%

OS・ブラウザのバージョンや組み合わせによっては、メーターバーが表示されません。

html

<meter value="80" min="0" max="100">80%</meter>

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

  • 属性value（測定された実際の値）は必須
  • そのほか、min属性（下限の値）、max属性（上限の値）、low属性（「低い」とされる境界）、high属性（「高い」とされる境界）、optimum属性（「最適」とされる値）といった属性がある。
  • meterタグ内が空なのはありえあない。サンプルのように、実測値であるとか、計測内容（例えば「出席率」）といったテキストを入れておく。

サンプルは百分率を想定した例ですが、百分率にこだわる必要はなくて、1クラス30人のうち何人出席といったことを表したければ、min属性に0、max属性に30、value属性に実際に出席した人数を入れれば、適切に表示します。

  • 実験したところ、最新のFFやChromeではwidthやbox-shadow、border、background等、多少のCSSが効くようです。
  • 2015/06現在、スマートデバイス向けサイトには使用を避けた方が良いようです。
    Android端末では4.4以降であればほぼ対応していますが、iOS8.3でもほとんど対応していないようです。Androidでもブラウザによってはサポートしていません。

sample＜progress＞

50%

OS・ブラウザのバージョンや組み合わせによっては、プログレスバーが表示されません。

html

<progress value="50" max="100">進行状況：50%</progress>

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

  • 必須属性はないが、value属性（タスクがどれだけ完了したかを指定する）、max属性（タスク全体でどれだけ作業が必要かを指定する）、form属性（どのform要素と関連しているのかを明確に示す）といった属性がある。
  • progressタグをサポートしていないブラウザでも内容がわかるように、タグの中にも、テキストで進行状況を記述することが推奨されている。

サンプルは百分率を想定した例ですが、百分率にこだわる必要はないです。たとえば、コンテンツが重いページのダウンロード状況を示したりするのに使用します。
jsなどと組み合わせて使うことが多いです。

  • 2015/06現在、最新のFFとChromeでは見た目にかなり差異があります。まったく同じように表示するのは難しいかと思われます。
  • 実験したところ、最新のFFやChromeではwidthやbox-shadow、border、background等、多少のCSSが効くようです（ただしブラウザによってかなり表示に差異があります）。
  • 2015/06現在、スマートデバイス向けサイトには使用を避けた方が良いようです。
    Android端末では4.4以降であればほぼ対応していますが、iOS8.3でもほとんど対応していないようです。Androidでもブラウザによってはサポートしていません。
戻る

Top