diff options
Diffstat (limited to 'files/ja/web/html/element/meter/index.html')
| -rw-r--r-- | files/ja/web/html/element/meter/index.html | 147 |
1 files changed, 147 insertions, 0 deletions
diff --git a/files/ja/web/html/element/meter/index.html b/files/ja/web/html/element/meter/index.html new file mode 100644 index 0000000000..40f64645b3 --- /dev/null +++ b/files/ja/web/html/element/meter/index.html @@ -0,0 +1,147 @@ +--- +title: '<meter>: HTML メーター要素' +slug: Web/HTML/Element/meter +tags: + - Element + - HTML + - HTML forms + - HTML5 + - Reference + - Web +translation_of: Web/HTML/Element/meter +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML の <code><meter></code> 要素</strong>は、既知の範囲内のスカラー値、または小数値を表します。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/meter.html", "tabbed-shorter")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>, ラベル付け可能コンテンツ, 知覚可能コンテンツ</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>。ただし他の <code><meter></code> 要素の子孫要素として配置してはならない。</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>許可されている <code>role</code> なし</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLMeterElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>他のすべての要素と同様に、この要素は<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>を持ちます。</p> + +<dl> + <dt>{{htmlattrdef("value")}}</dt> + <dd>現在の数値。<code>min</code> 属性と <code>max</code> 属性が指定されている場合、これらの表す範囲内に収まる値でなくてはなりません。この <code>value</code> 属性が未定義、あるいは不正な値であった場合は、その値は <code>0</code> となります。指定されている値が <code>min</code> 属性と <code>max</code> 属性が示す範囲の範囲外の値である場合、その範囲の内のもっとも近い値が適用されます。 + <div class="note"><strong>注意:</strong> <code>value</code> 属性の値が <code>0</code> を下限、<code>1</code> を上限とするものでない限り、<code>min</code> 属性および <code>max</code> 属性で <code>value</code> 属性の下限および上限を定義しなくてはなりません。</div> + </dd> + <dt>{{htmlattrdef("min")}}</dt> + <dd>範囲全体の下限。 <code>max</code> 属性により上限が設定されている場合は、それより小さい値でなくてはなりません。未設定の場合、下限値は <code>0</code> となります。</dd> + <dt>{{htmlattrdef("max")}}</dt> + <dd>範囲全体の上限。 <code>min</code> 属性により下限が設定されている場合は、それより大きい値でなくてはなりません。未設定の場合、上限値は <code>1</code> となります。</dd> + <dt>{{htmlattrdef("low")}}</dt> + <dd>「低」とされる範囲全体の上限値。属性値は、<code>min</code> 属性の値より大きく、かつ <code>high</code> 属性および <code>max</code> 属性の値より小さいものでなくてはなりません (※これらが定義されている場合)。<code>low</code> が未定義、もしくはその値が <code>min</code> 属性の値より小さい場合、<code>low</code> の値は最小値と同じです。</dd> + <dt>{{htmlattrdef("high")}}</dt> + <dd>「高」とされる範囲全体の下限値。属性値は、<code>max</code> 属性の値より小さく、かつ <code>low</code> 属性や <code>min</code> 属性の値より大きいものでなくてはなりません (※これらが定義されている場合)。<code>high</code> 属性が未定義、もしくはその値が <code>max</code> 属性の値より大きい場合、<code>high</code> の値は最大値と同じです。</dd> + <dt>{{htmlattrdef("optimum")}}</dt> + <dd><strong>最適な数値の範囲</strong>を表します。<code>min</code> 属性と <code>max</code> 属性によって定義される範囲内の値でなくてはなりません。 <code>low</code> 属性と <code>high</code> 属性が指定されている場合、この属性の値を含む範囲が最適な数値の範囲とみなされます。例えば、値が <code>min</code> 属性と <code>low</code> 属性の間のいずれかであった場合、「低」の範囲が最適な数値となります。ブラウザーは optimum の値以下であるかどうかでメーターのバーの色を変更することがあります。</dd> + <dt>{{htmlattrdef("form")}}</dt> + <dd><code><meter></code> 要素と関連付ける {{HTMLElement("form")}} 要素 (<em>フォームオーナー</em>) です。この属性の値は同じ文書内の <code><form></code> の {{htmlattrxref("id")}} である必要があります。この属性が設定されていなかった場合、その <code><meter></code> の祖先に <code><form></code> 要素があれば、それに関連付けられます。この属性は <code><meter></code> 要素がフォーム関連要素として使用されている場合、例えば対応する <a href="/ja/docs/Web/HTML/Element/input/number"><code><input type="number"></code></a> の範囲を表示するようなものでのみ使用されます。</dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Simple_example" name="Simple_example">シンプルな例</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><p>オーブンの温度: <meter min="200" max="500" + value="350">350 degrees</meter></p> +</pre> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{EmbedLiveSample("Simple_example", 300, 60)}}</p> + +<p>Google Chrome での表示結果は以下のようになります。</p> + +<p><img alt="meter1.png" class="default internal" src="/@api/deki/files/4940/=meter1.png"></p> + +<h3 id="High_and_Low_range_example" name="High_and_Low_range_example">「高」の範囲と「低」の範囲の使用例</h3> + +<p>この例では {{htmlattrxref("min", "meter")}} 属性が省略されています。よって、下限値は <code>0</code> となっています。</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html notranslate"><p>He got a <meter low="69" high="80" max="100" + value="84">B</meter> on the exam.</p> +</pre> + +<h4 id="Result_2" name="Result_2">結果</h4> + +<p>{{EmbedLiveSample("High_and_Low_range_example", 300, 60)}}</p> + +<p>Google Chrome では、 meter の結果は次のように見えます。</p> + +<p><img alt="meter2.png" class="default internal" src="/@api/deki/files/4941/=meter2.png"></p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-meter-element', '<meter>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-meter-element', '<meter>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.meter")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{HTMLElement("progress")}}</li> +</ul> |