VIDEO LESSON

HTMLのmeterタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

再生時間 7:39動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00エイチティーエムエル、リファレンス解説です。
0:03エイチティーエムエルタグ編の四十九本目は、メータータグです。
0:07メーターは、あらかじめ範囲が決まっている測定値を表すためのタグです。
0:11たとえば、ゼロから百までのうち今は六十五、というような数値です。
0:15ブラウザーはこの数値をゲージのような見た目で表示してくれるので、どれくらいなのかが一目で伝わります。
0:21今回は基本の書き方から、範囲を三つに分ける属性、よく似たプログレスとの違いまで、
0:24順に学んでいきましょう。
0:28身近な表示を思い浮かべながら聞くと、役割がつかみやすくなります。
0:32使いどころを整理します。
0:34代表例は、保存領域の使用量や電池の残量のように、上限が決まっている量の表示です。
0:40テストの点数、商品の評価、ディスクの空き容量なども向いています。
0:45大切なのは、分母がはっきりしていることです。
0:48最大値が分からない数値や、どんどん増えていく途中の量には向きません。
0:54また、作業がどこまで進んだかを示す進捗には、後で紹介するプログレスという別のタグを使います。
1:01メーターは今の状態の測定値、プログレスは作業の進み具合、と覚えてください。
1:07身の回りの数値表示を思い浮かべると、候補が見つけやすくなります。
1:12基本の書き方を確認します。
1:14メーターには開始タグと終了タグの両方が必要です。
1:19一番シンプルな形は、バリュー属性だけを書く方法です。
1:23画面の一つ目は、ゼロから一までの割合として〇・六を指定し、六十パーセントと表示しています。
1:32二つ目は、ミンで最小値ゼロ、マックスで最大値百を指定し、バリューに六十五を入れた形です。
1:40タグの中にも六十五パーセントと文章で数値を書いておくのがポイントで、ゲージが表示できない環境でも内容が伝わります。
1:50まずはこの形を書けるようになりましょう。
1:54書いたらブラウザーで開いて、ゲージが表示されるか確かめてください。
2:00範囲を決める三つの属性を整理します。
2:03ミンは最小値で、省略するとゼロになります。
2:07マックスは最大値で、省略すると一になります。
2:11バリューは今の測定値そのものです。
2:14たとえば試験の点数なら、ミンがゼロ、マックスが百、バリューが七十二、という具合です。
2:21注意点として、バリューはミン以上マックス以下の範囲に収めてください。
2:27範囲から外れた値を書くと、ブラウザーが端の値に丸めて表示してしまうことがあります。
2:35単位は属性には書かず、パーセントなどの単位はラベルや文章の側で伝えるのが正しい書き方です。
2:43実際の数値で置き換えて考えると、それぞれの役割がはっきりします。
2:49メーターらしい機能が、範囲を三つに分ける三つの属性です。
2:53ローは低い範囲との境界、ハイは高い範囲との境界を示します。
2:57画面の例では、二十未満が低い範囲、二十から八十が中くらい、八十を超えると高い範囲、
3:01という分け方です。
3:05そしてオプティマムは、望ましい値がどこにあるかを示します。
3:10保存領域なら空いている方が望ましいのでゼロ寄り、逆に点数なら高い方が望ましいので百寄りに置きます。
3:17ブラウザーはバリューが望ましい範囲にあるかどうかで、ゲージの色合いを変えて表示することがあります。
3:25色の変化はブラウザーによって違うため、数値の確認も忘れないでください。
3:30記事の活用事例を読み解きます。
3:33保存領域の使用量を表す例で、ラベル要素が何の数値かを示し、メーター本体がアイディーで結びついています。
3:42値は百のうち六十五、つまり六十五パーセントです。
3:47ローが二十、ハイが八十なので、六十五は中くらいの範囲に入ります。
3:53オプティマムはゼロで、これは使用量は少ない方が望ましい、という意味です。
3:59もし値が九十五のように高い範囲に入ると、残りが少ない状態として色が変わって見える場合があります。
4:08数値と意味がセットで伝わる、良いお手本です。
4:12ラベルとゲージと数値がそろうと、初見の人にも迷わず伝わります。
4:18読み手への配慮も大切です。
4:20一つ目は、ラベル要素や見出しで、何を測った数値なのかを必ず言葉で示すことです。
4:27ゲージだけがぽつんと置かれていても、それが容量なのか評価なのか分かりません。
4:34二つ目は、タグの中や前後の文章に、三十五パーセントのように数値と単位を文章でも書くことです。
4:42ゲージの色の違いだけで良い悪いを判断させる作りは避けてください。
4:48色の見え方には個人差があり、読み上げツールでは色は伝わりません。
4:53数値を言葉でも添えることが、誰にでも伝わる表示につながります。
4:59自分が読み手になったつもりで、情報が足りるか見直してみてください。
5:05よく混同されるプログレスとの違いを整理します。
5:08プログレスは、ダウンロードやアップロード、読み込み中といった、作業がどこまで進んだかを示すタグです。
5:15これに対してメーターは、容量や評価など、今この瞬間の状態の測定値を示します。
5:20見た目が似ていても意味は別物なので、読み上げツールを使う人への伝わり方が変わってきます。
5:27判断に迷ったら、時間が経てば百パーセントに向かって増えていくものかどうかを考えてください。
5:33増えていく作業ならプログレス、時点の状態ならメーターです。
5:37この区別はセマンティックな書き方の大切な練習にもなります。
5:41見た目について確認します。
5:43メーターの標準表示はブラウザーごとに異なり、色や形はそれぞれのブラウザーのデザインに任されています。
5:51シーエスエスでは、画面の例のように幅や高さを指定するのが手軽で確実です。
5:56一方、ゲージ内部の色まで細かく変えようとすると、ブラウザーごとに異なる専用の指定が必要になり、
6:01初心者のうちは手間がかかりすぎます。
6:07まずは標準の見た目で意味を正しく伝えることを優先し、凝った配色が必要なら、
6:11数値を文章で添えるなど別の工夫と組み合わせましょう。
6:16表示の違いを前提に、どの環境でも意味が伝わる作りにしましょう。
6:21ブラウザー互換性を確認します。
6:23記事が参照するエムディーエヌの記録では、メータータグはクロームが六以降、
6:29エッジが十三以降、ファイアフォックスが十六以降、サファリが六以降と、主要ブラウザーで古くから対応しています。
6:35今回扱った六つの属性も、同じバージョンから使えます。
6:39作ったあとの確認では、三百二十ピクセル程度の細い画面幅や文字を拡大した状態でも、
6:43ラベルとゲージと数値が欠けずに読めるかを見てください。
6:48色だけでなく数値でも状態が分かるか、あわせて確かめると安心です。
6:52新しい属性を使うときは、本体とは別に対応状況も確認してください。
6:56最後にまとめです。
6:58メータータグは、最小値と最大値が決まった範囲の中で、今の測定値を示すタグでした。
7:04ポイントは三つです。
7:05一つ目、ミン、マックス、バリューで範囲と値を決めること。
7:10二つ目、ロー、ハイ、オプティマムを使うと、低い、中くらい、高いという状態と、
7:14どちらが望ましいかまで伝えられること。
7:19三つ目、作業の進捗にはプログレスを使い分け、数値は色だけでなく文章でも示すことです。
7:25練習として、自分のページに保存領域や達成率のゲージを作ってみてください。
7:31お疲れさまでした。
7:32次回もお楽しみに。
7:34小さな例から試すことが、正しい使い分けを身につける近道です。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

meterタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。既知の範囲内の測定値。容量や評価などに使い、処理の進捗とは区別します。

解説記事・サンプルコードを読む：HTMLのmeterタグとは？属性・使い方・ブラウザー互換性と活用例 →