【HTML Living Standard】meter要素の使い方
meter要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
meterオブジェクトは、既知の範囲内のスカラー測定値を表すオブジェクトです。この要素は、例えばディスクの使用量、クエリの関連性、投票結果、バッテリー残量など、特定の最小値から最大値までの範囲における現在の値を視覚的に表示するために使用されます。
この要素には、現在の値を指定するvalue属性、範囲の最小値を指定するmin属性、そして最大値を指定するmax属性があります。これらの属性は必須ではありませんが、その値が持つ意味を正確に伝え、適切に表示するために、通常はこれらを適切に設定することが推奨されます。
さらに、low属性は低すぎる値の範囲、high属性は高すぎる値の範囲、optimum属性は最適な値の範囲を示すことができます。これらの属性を組み合わせることで、測定値が正常な範囲にあるか、それとも注意が必要な範囲にあるかをユーザーに視覚的に伝えることが可能です。
meter要素は、タスクの進行状況を示すprogress要素とは異なり、完了までの進捗ではなく、指定された範囲内での現在の測定値を示すことに特化しています。したがって、現在の状態が特定の範囲に対してどのように位置するかを表現する際に適しており、数値データを直感的かつ視覚的に表現し、ユーザーインターフェースの使いやすさを向上させることができます。
構文(syntax)
1<meter min="0" max="100" value="75">75%</meter>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML meter要素のデザインと属性
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML meter要素のサンプル</title> 7 <!-- meter要素とそのデザインに関するCSSスタイルを定義 --> 8 <style> 9 body { 10 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 11 margin: 20px; 12 background-color: #f4f7f6; 13 color: #333; 14 } 15 16 h1 { 17 color: #2c3e50; 18 border-bottom: 2px solid #3498db; 19 padding-bottom: 10px; 20 } 21 22 .example-section { 23 background-color: #ffffff; 24 border: 1px solid #e0e0e0; 25 border-radius: 8px; 26 padding: 20px; 27 margin-bottom: 25px; 28 box-shadow: 0 2px 5px rgba(0,0,0,0.1); 29 } 30 31 h2 { 32 color: #34495e; 33 font-size: 1.3em; 34 margin-top: 0; 35 margin-bottom: 15px; 36 } 37 38 p { 39 margin-bottom: 10px; 40 } 41 42 /* 1. 基本的なmeter要素のスタイル（デフォルトの見た目を尊重） */ 43 .basic-meter { 44 vertical-align: middle; /* テキストと高さを合わせる */ 45 } 46 47 /* 2. low, high, optimum属性による表示変化をCSSで視覚的に強調する */ 48 .status-meter-container { 49 display: flex; 50 align-items: center; 51 margin-bottom: 8px; 52 } 53 .status-meter-container p { 54 margin-right: 10px; 55 min-width: 120px; 56 } 57 .status-meter { 58 width: 200px; /* meter要素の幅を統一 */ 59 height: 20px; 60 vertical-align: middle; 61 border: 1px solid #ccc; 62 border-radius: 5px; 63 } 64 65 /* 3. CSSでサイズや外観をカスタマイズしたmeter要素 */ 66 .custom-meter { 67 width: 350px; /* 幅を広げる */ 68 height: 30px; /* 高さを高くする */ 69 border: 2px solid #28a745; /* 緑色の枠線を追加 */ 70 border-radius: 15px; /* 角を丸くする */ 71 background-color: #e9ecef; /* 背景色を設定 */ 72 vertical-align: middle; 73 /* 注意: meter要素の内部バーの色はブラウザのデフォルト実装に強く依存します。 74 標準的なCSSでは直接制御が難しいですが、low/high/optimum属性によってブラウザが色を変えることがあります。 */ 75 } 76 .custom-meter-label { 77 font-weight: bold; 78 color: #28a745; 79 margin-left: 10px; 80 } 81 </style> 82</head> 83<body> 84 <h1>HTML meter要素の使用例とデザイン</h1> 85 86 <div class="example-section"> 87 <h2>1. 基本的な使用例</h2> 88 <p> 89 現在の進捗率: <meter class="basic-meter" value="0.7">70%</meter> 90 <span style="margin-left: 10px;">(デフォルトの範囲 0.0 ～ 1.0 の間で 0.7 を表示)</span> 91 </p> 92 <!-- value属性のみを指定したシンプルなmeter要素 --> 93 </div> 94 95 <div class="example-section"> 96 <h2>2. low, high, optimum属性による表示変化</h2> 97 <p>これらの属性により、ブラウザは値の状態に応じてmeterの色を自動的に調整することがあります。</p> 98 <div class="status-meter-container"> 99 <p>ディスク使用量 (最適):</p> 100 <meter class="status-meter" value="0.6" min="0" max="1" low="0.3" high="0.8" optimum="0.6">60%</meter> 101 <span>(60% - 最適値に近いので「良好」)</span> 102 </div> 103 <div class="status-meter-container"> 104 <p>ディスク使用量 (低い):</p> 105 <meter class="status-meter" value="0.2" min="0" max="1" low="0.3" high="0.8" optimum="0.6">20%</meter> 106 <span>(20% - low値より低いので「注意」)</span> 107 </div> 108 <div class="status-meter-container"> 109 <p>ディスク使用量 (高い):</p> 110 <meter class="status-meter" value="0.9" min="0" max="1" low="0.3" high="0.8" optimum="0.6">90%</meter> 111 <span>(90% - high値より高いので「危険」)</span> 112 </div> 113 <!-- low, high, optimum属性を指定し、ブラウザのデフォルトデザインの変化を示す --> 114 </div> 115 116 <div class="example-section"> 117 <h2>3. CSSでサイズや外観をカスタマイズした例</h2> 118 <p>CSSを使って、meter要素の外枠や背景、サイズを変更することができます。</p> 119 <p> 120 タスク完了度: <meter class="custom-meter" value="75" min="0" max="100">75%</meter> 121 <span class="custom-meter-label">75% 完了</span> 122 </p> 123 <!-- CSSで要素の幅、高さ、枠線、背景色をカスタマイズしたmeter要素 --> 124 </div> 125 126</body> 127</html>
meter要素は、HTMLで指定された範囲内の測定値（例えば、ディスク使用量、進捗率など）を視覚的に表示するために使用される要素です。この要素自体に引数や戻り値はありませんが、さまざまな属性を使って表示する値を定義します。
サンプルコードでは、まずvalue属性のみを使った基本的なmeter要素の表示方法を示しています。これは、デフォルトの0.0から1.0の範囲で、現在の値（例では0.7）をメーターとして表現します。
次に、min（最小値）、max（最大値）に加えて、low（低い閾値）、high（高い閾値）、optimum（最適値）の各属性を指定する例が示されています。これらの属性を設定することで、ブラウザは値が「低すぎる」「高すぎる」「最適」といった状態にあることを認識し、その状態に応じてメーターの色を自動的に調整して表示することがあります。これにより、値の健康状態や危険度をユーザーに視覚的に伝えることができます。
さらに、CSSを使用してmeter要素の外観をデザインする方法も紹介しています。meter要素の幅、高さ、枠線の色や太さ、角の丸み、背景色などをCSSでカスタマイズし、ウェブサイトのデザインに合わせた見た目に変更することが可能です。ただし、メーターの内部で進捗を示すバーの色は、ブラウザのデフォルト実装に強く依存するため、すべてのブラウザでCSSによる直接的な色変更が容易ではない点に注意が必要です。この要素は、数値データを直感的に理解できるよう補助的な役割を果たします。
HTMLのmeter要素は、指定された範囲内の数値を視覚的に表現する際に用います。value属性で現在の値を、minとmaxで表示範囲を設定してください。low、high、optimum属性を使うと、値が低い、高い、最適などの状態をブラウザに伝え、ブラウザが自動的にメーターの色を変更することがあります。しかし、meter要素内部の進捗バーの具体的な色やデザインをCSSで完全に制御することは、ブラウザのデフォルト実装に強く依存するため非常に難しい点に注意が必要です。外枠のサイズや背景色はCSSでカスタマイズできますが、バーの色は直接変更できない場合が多いです。より複雑なデザインが必要な場合は、CSSやJavaScriptでカスタムの進捗表示を実装することも検討してください。
HTML meter要素のスタイル設定
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML meter要素のサンプル</title> 7 <style> 8 /* 9 * meter要素全体の基本的なスタイルを設定します。 10 * これにより、メーターの見た目をカスタマイズできます。 11 * 内部のバーの色は、min/max/low/high/optimum属性の値に応じて 12 * ブラウザが自動的に色を変化させることがあります（例: 緑、黄、赤）。 13 */ 14 meter { 15 width: 250px; /* 横幅を調整 */ 16 height: 25px; /* 高さを調整 */ 17 border: 1px solid #ccc; /* 枠線を追加 */ 18 border-radius: 5px; /* 角を丸くする */ 19 background-color: #f0f0f0; /* 背景色を設定 */ 20 margin: 5px 0; /* 上下の余白を追加 */ 21 vertical-align: middle; /* テキストと垂直方向中央に揃える */ 22 display: inline-block; /* インライン要素として表示し、幅と高さを指定可能にする */ 23 } 24 25 /* p要素内の要素を横並びにして見やすくするためのスタイル */ 26 p { 27 display: flex; /* Flexboxコンテナとして設定 */ 28 align-items: center; /* 垂直方向中央揃え */ 29 gap: 10px; /* 要素間のスペース */ 30 margin-bottom: 15px; /* 下部に余白 */ 31 } 32 </style> 33</head> 34<body> 35 <h1>HTML meter要素のサンプル</h1> 36 37 <p> 38 <span><strong>ディスク使用量:</strong></span> 39 <!-- value: 現在の値 (0.7), min: 最小値 (0), max: 最大値 (1) --> 40 <!-- optimum: 最適な値が最大値 (1) であることを示します。 --> 41 <meter value="0.7" min="0" max="1" optimum="1" title="ディスク使用量: 70%"></meter> 42 <span>70%</span> 43 </p> 44 45 <p> 46 <span><strong>タスクの進捗:</strong></span> 47 <!-- value: 現在の値 (75), min: 最小値 (0), max: 最大値 (100) --> 48 <!-- low: 低いと見なされる値の上限 (30), high: 高いと見なされる値の下限 (70) --> 49 <!-- optimum: 最適な値が最大値 (100) であることを示します。 --> 50 <meter value="75" min="0" max="100" low="30" high="70" optimum="100" title="タスク進捗率: 75%"></meter> 51 <span>75%</span> 52 </p> 53 54 <p> 55 <span><strong>バッテリー残量 (低):</strong></span> 56 <!-- value: 現在の値 (15), min: 最小値 (0), max: 最大値 (100) --> 57 <!-- low: 低いと見なされる値の上限 (20), high: 高いと見なされる値の下限 (60) --> 58 <!-- optimum: 最適な値 (80) が高いが、現在の値がlowを下回っている例です。 --> 59 <meter value="15" min="0" max="100" low="20" high="60" optimum="80" title="バッテリー残量: 15%"></meter> 60 <span>15%</span> 61 </p> 62 63 <p> 64 <span><strong>サーバー負荷 (中程度):</strong></span> 65 <!-- value: 現在の値 (45), min: 最小値 (0), max: 最大値 (100) --> 66 <!-- low: 低いと見なされる値の上限 (30), high: 高いと見なされる値の下限 (70) --> 67 <!-- optimum: 中央の値 (50) が最適であることを示します。 --> 68 <meter value="45" min="0" max="100" low="30" high="70" optimum="50" title="サーバー負荷: 45%"></meter> 69 <span>45%</span> 70 </p> 71 72 <p> 73 <span><strong>サーバー負荷 (高負荷):</strong></span> 74 <!-- optimum: 中央の値 (50) が最適だが、現在の値 (85) がhighを超えている例です。 --> 75 <meter value="85" min="0" max="100" low="30" high="70" optimum="50" title="サーバー負荷: 85%"></meter> 76 <span>85%</span> 77 </p> 78 79</body> 80</html>
HTMLのmeter要素は、ある範囲内の数値をゲージやインジケーターとして視覚的に表示するために使われます。例えば、ディスクの使用量やタスクの進捗状況、バッテリー残量などを、現在の状態と基準値を合わせて分かりやすく表現するのに適しています。この要素はウェブページの構造を定義するHTMLの一部であり、プログラミング言語における関数のような引数や戻り値は持ちません。
meter要素には、現在の値を示すvalue属性、最小値を示すmin属性、最大値を示すmax属性が必須または推奨されます。さらに、low属性で「低い」と見なされる上限値、high属性で「高い」と見なされる下限値、そしてoptimum属性で最適な値を指定できます。これらの属性を設定することで、現在の値が「低すぎる」「高すぎる」「適切」といった状態に応じて、ブラウザがメーターの色を自動的に変化させることがあり、ユーザーは一目で状況を把握できます。
サンプルコードでは、styleタグ内に記述されたCSS（カスケーディングスタイルシート）を用いて、meter要素の横幅や高さ、枠線、背景色などを調整し、デフォルトの見た目からデザインをカスタマイズしています。これにより、ウェブサイト全体のデザインと調和させながら、情報を効果的に伝えることが可能です。異なる値や属性の組み合わせにより、さまざまな状況を示すメーターの表示例が確認できます。
meter要素は、既知の範囲内の計測値を視覚的に表示する際に用いるものです。進行中のタスクの進捗状況を示す場合は、<progress>要素を使うのが適切ですので、両者の用途を区別するようにしましょう。value、min、max属性は必ず設定し、現在の値と計測範囲を明確にしてください。low、high、optimum属性を適切に設定することで、ブラウザが自動的にメーターの色を変え、値の状態（例えば、低い、高い、最適など）を直感的に伝えられます。ユーザーがメーターの意味を理解できるよう、隣接するテキストやtitle属性で具体的な情報を補足し、アクセシビリティを高めることが重要です。meter要素の見た目はCSSで調整できますが、内部のバーの色はブラウザのデフォルトスタイルやこれらの属性値に依存することが多いため、完全にCSSだけで制御できるわけではない点に注意が必要です。