Webページ内に、ある測定値をメーターとして表示できる方法をご存じですか？ディスクの残りの容量やある事柄に対するパーセンテージなどを表示できるのが、meterタグ。
meterタグとは？基本の使い方や使用用途は？
今回は、meterタグの
・基本的な使い方
・meterタグと類似タグprogressタグとの違い
・meterタグをCSSで装飾する方法
について説明します。
目次
meterタグとは
meterタグの読み方
meterタグは「メータータグ」と読みます。meterは直訳するとメーター・計器という意味を持ちます。
meterタグの説明
meterタグは、特定範囲内の測定値を表示するタグです。使用用途は容量の使用率や投票率など、割合を表すものにmeterタグが使用されます。
meterタグで利用できる属性
meterタグではHTMLの全要素で使用できるグローバル属性に加え、以下の属性を使うことができます。
| グローバル属性 | 説明 |
|---|---|
| accesskey | 要素に体するショートカットキーを指定するための属性です。 |
| autocapitalize | ブラウザでユーザーが要素に入力や編集をした際、入力欄で入力した文字列の最初の文字が自動的に大文字化されるかどうかを設定する属性です。 |
| class | 要素にCSSでスタイル（見た目）を適用するためによく使われる属性です |
| contenteditable | 要素の内容を編集可能かどうかを指定する属性です。 |
| data-* | 要素にオリジナルのデータ属性を指定するための属性です。 |
| dir | テキストの文字の方向を右書き・左書きのどちらかに指定する属性です。 |
| draggable | 要素がドラッグ可能かどうかを指定する属性です。 |
| dropzone | 要素の上でコンテンツをドロップできるかどうかを指定する属性です。 |
| hidden | 要素の非表示を指定する属性です。 |
| id | class属性同様、要素にCSSでスタイルを適用するためによく使われます。同じid属性はページ内で1回しか使えません。 |
| inputmode | 仮想キーボードの種類の構成に関するヒントを与えます。 |
| is | 登録したカスタム内臓要素のように振舞うように指定できます。 |
| itemid | 項目で一意なグローバル識別子です。 |
| itemprop | その要素で記述された内容がどのような意味を持つかを定義する属性です。 |
| itemref | 項目に関連付けることができます。 |
| itemscope | itemtypeとセットで使用する属性です。ブロックに含まれているHTMLが特定の項目に関するということを指定します。 |
| itemtype | アイテムの種類を指定するための属性です。 |
| lang | 要素の中で使われる言語を定義する属性です。 |
| part | CSSの疑似要素::partを使用するためにパート名を付けます。 |
| slot | 要素にシャドウツリーのスロットを割り当てるための属性です。 |
| spellcheck | 要素のスペルチェックを有効にするかどうかを指定する属性です。 |
| style | 要素に直接スタイル（見た目）を指定するための属性です。 |
| tabindex | Tabキーを使って要素を選択する際の優先順位を指定する属性です。 |
| title | 要素のタイトルを定義します。パソコンのブラウザでは、要素部分にマウスを当てると定義したタイトルが表示されます。 |
| それ以外の属性 | 説明 |
| value | その要素で表示する初期値を指定する属性です。 |
| min | 要素の最小値を指定する属性です。 |
| max | 要素の最大値を指定する属性です。 |
| low | meter要素で低いと判断される範囲の上限値を指定する属性です。 |
| high | meter要素で高いと判断される範囲の下限値を指定する属性です。 |
| optimum | meter要素で最適な値を指定する属性です。 |
| form | input要素が所属するform要素を指定する属性です。 |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 6 |
| Edge | 18～ |
| Firefox | 16 |
| nternet Explorer | 未対応 |
| Opera | 11 |
| Safari | 6 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 未対応 |
| Android版Chrome | 18 |
| Android版Firefox | 16 |
| Android 版 Opera | 11 |
| iOS版Safari | 10.3 |
| Samsung Internet | 1.0 |
meterタグの基本的な使い方
meterタグの使い方
まずは基本的な使い方を解説します。meterタグは最適値やhigh値、low値の設定がカギ。それぞれの属性の動作をここでしっかり確認しておきましょう。
まずはlabelタグで、このメーターが何を表すのかを表示します。labelタグ内のfor属性はmeterタグのid属性と関連しますが、ここではなくても構いません。
次にmeterタグを設置してメーターを表示させます。属性の動作は以下の通りです。
・max : メーターの最大値
・min : メーターの最小値
・low : メーター内で少ないと判断される値
・optimum : メーター内の最適値
・value : 現在の値
この他にhigh属性があり、メーター内の値が高いと判断される値を設定できますが、ここでは設定しませんでした。JavaScriptで容量を自由に設定できるようにセットしたので、値を変えて動作を確認してk見てください。
See the Pen
meter 基本 by rabbittyu (@rabbittyu)
on CodePen.
meterタグと類似するprogress要素との違い
meterタグと混同しやすいのが、progressタグです。meterタグとの決定的な違いは、meterタグは割合を表し、progressはタスクの進捗状況を表すと言うことです。
そのためディスクの残り容量をprogressタグで表すのは適切ではありません。混同しそうになったら、meterタグは割合を表すということを思い出しましょう。
まとめ
今回はmeterタグについてご紹介しました。meterタグはディスクの残り容量や、投票率など、ある決まった値の割合を表すのに最適。使用する際は、high、low、optimumなど、細かい属性を使いこなせると良いでしょう。
実はmeterタグは装飾に向かないタグです。その理由はあまり装飾する意味がなく、ブラウザごとに細かい設定が必要になるから。しかし部品の組み合わせ次第で、かなり使用用途が広がるので、ぜひ習得して使いこなしてみてくださいね！
参考文献：
MDN web docks <meter>: HTML メーター要素
<meter>HTML5タグリファレンス
WEBページ作成リファレンス
