学びBAR
  • Home
  • WEB関連知識のスキルアップ
    • Udemy 開催講座 >
      • HTML,CSSルール基礎知識 >
        • Udemy 1800円受講クーポン
    • セマンティックHTMLとは?
    • HTML特殊文字コード表
  • ストリートアカデミー講座
    • HTMLルール基礎 4h テキストダウンロード
  • 学びBARについて
  • コラム
  • お問合せ
HOME / WEB関連知識のスキルアップ / HTMLクイック・リファレンス / HTML5(目的別) / <meter>

<meter> …… 規定範囲内の測定値を表す

<meter>タグは、下限や上限などがあらかじめ分かっている、規定範囲内の測定値を示す際に使用します。 例えば、ディスク使用量、検索結果の関連性、候補者の得票などです。測定値は、必須属性のvalue属性で指定します。
value属性以外にも、下限・上限・低い・高い・最適とされる値を指定する属性が用意されています。これらの属性は必須属性ではありませんが、下限と上限を指定しない場合には範囲が0~1と見なされます。 この場合、value属性で指定する値を0~1の範囲内にする必要があります。
測定値は<meter>タグのvalue属性で指定しますが、<meter>タグをサポートしていないブラウザを使用しているユーザーにも分かるように、 <meter>~</meter>の中にも、測定状況をテキストで記述することが推奨されています。
尚、<meter>タグは、進行状況を示すのに使用するべきではありません。 そのような目的には<progress>タグを使用してください。また、最大値が分かっていない場合の体重や身長など、範囲がはっきりしない値に<meter>タグを使用するのも誤りです。

■HTML4.01からHTML5へのバージョンアップによる変更点

meter要素は、HTML5から新たに追加された要素です。

■属性

value属性
   測定された実際の値(※必須属性)
min属性
   下限の値
max属性
   上限の値
low属性
   「低い」とされる境界
high属性
   「高い」とされる境界
optimum属性
   「最適」とされる値
以下のサンプルでは、3つの<meter>タグが使用されています。 それぞれ、value属性で指定されている数値は異なりますが、いずれも全体の3/4であることを示しています。

■使用例

HTMLソース
<p>
残りは
<meter value="6" max="8">全8個中6個</meter>
です。
割合では
<meter value="75" min="0" max="100">七割五分</meter>
となります。
グラフでもご確認いただけます。
<meter value="0.75"><img alt="75%" src="images/graph75.png"></meter>
</p>
↓↓↓

残りは 全8個中6個 です。 割合では 七割五分 となります。 グラフでもご確認いただけます。 75%

HOME                      ABOUT                      SERVICES                      UPDATES                     CONTACT
画像
1996-2024(c)Cre'ps design lab.  All rights reserved.
  • Home
  • WEB関連知識のスキルアップ
    • Udemy 開催講座 >
      • HTML,CSSルール基礎知識 >
        • Udemy 1800円受講クーポン
    • セマンティックHTMLとは?
    • HTML特殊文字コード表
  • ストリートアカデミー講座
    • HTMLルール基礎 4h テキストダウンロード
  • 学びBARについて
  • コラム
  • お問合せ