【meterタグ】割合の値を棒グラフのゲージで表現してみよう！「HTML・解説・初心者向け」- ノブレコ
nobreco
★<meter>タグの特徴
・タグのカテゴリ ―― インライン要素。
・コンテンツモデル ―― フローコンテンツ、フレージングコンテンツ、パルパブルコンテンツ、ラベル付け可能コンテンツ。
・タグの省略 ―― 不可。（開始タグと終了タグが必要）
・使用可能な親要素 ―― フレージングコンテンツを許容するすべての親要素。
・グローバル属性を持つ。
・ARIAロール ―― 標準でのARIAロールは無し。
<meter>の説明
<meter>とは
このタグはHTML５から追加されたもので、一定範囲に収まるスカラー量や、割合を表現できる値を「棒グラフの様なゲージ」で表現するタグです。
見た目は<progress>要素に似たような表現になりますが、主に動的な進捗状況を表現したい場合は<progress>要素を使い、そうでない場合に<meter>要素を使うという形になります。
このタグは、事前にゲージの最大値と最小値の範囲が明確に決まっている物事に対して使用されます。
■使用目的
<meter>タグは、事前に最大値と最小値がはっきりと分かっているもので、その一定範囲内の測定値を表現するために使用します。
このタグの使用目的の具体例として、ディスク使用量、投票率、人口の割合、明確な作業進捗状況などを表したい場合の使用が挙げられます。
主な使い方は、<meter>の開始タグ内に、最小値の値をmin属性、最大値の値をmax属性を使って指定し、さらに必須属性であるvalue属性を使うことで測定値を表現することができます。
■使われる属性
・value
・min
・max
・low
・high
・optimum
・form
使用上の注意点
① この要素は進捗状況を表すものではありません。
進捗状況を表すには、<progress>タグの使用が定義されています。
② この要素は下限と上限が決まっていないものには適していません。
<meter>要素は測定値を表す要素で、下限をmin属性、上限をmax属性、測定値をvalue属性でそれぞれ指定するようにしてください。
またmin属性を省略した場合の下限値は「０」、max属性を省略した場合の上限値は「１．０」となり、value属性は下限と上限の間の値で指定する形となります。
③ <label>要素でラベルを付けることができる。
<meter>要素はラベル付け可能要素で、<input>要素などと同じようにラベルを付けることができます。
④ 装飾には向いていない。
この要素自体に装飾をする意味がなく、装飾を指定したとしても管理が少し複雑化するためオススメできません。
内容モデル
<meter>要素の内容モデルは「phrasing」です。
ですが、<meter>要素を子孫に持つことはできません。
<meter>要素の内容は表示されませんが、<meter>要素を解釈しないブラウザ―に対するフォールバックとして機能します。
アクセシビリティでの注意点
<meter>要素は標準でのARIAロールを持っていません。
スクリーンリーダーなどでは、ゲージの割合を読み上げた上で「レベルインジケーター」などと読み上げることがあります。
また、low属性、high属性を使用している場合は、特別な読み上げをすることはなく値がしきい値を超えていることが伝わらないことがあります。
この要素はラベル付け可能要素であり、必要に応じて<label>要素と関連を持たすことができます。単独で読み上げても理解しづらい場合はラベルを付けることも考慮しましょう。
<meter>の記述例
■基本的な使用例
★HTML
★実行結果
まとめ
この記事では<meter>タグについての解説をいたしました。
このタグは、ディスク容量や投票率などの一定範囲に収まるようなスカラー量や、割合で表現できるような測定値を示すために最適のタグです。
使い方次第では便利なタグですので、機会があれば是非使用を検討してみてください。
この記事が少しでも皆さんのお役に立てれば幸いです。
最後まで読んでいただき、ありがとうございました。またなん(☞ﾟヮﾟ)☞
