HTML のスカラー測定をマスターする

はじめに

HTML の<meter>タグは、既知の範囲内のスカラー測定値を表示するために使用されます。分数値やスカラー値の両方を表すことができます。

この実験では、<meter>タグの構文と属性を使って HTML で<meter>タグをどのように使用するかを学びます。また、<meter>タグの機能を示す基本的な例も見てみましょう。

注：index.htmlでコーディングを練習し、Visual Studio Code で HTML を書く方法を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行します。その後、Web 8080タブを更新してウェブページをプレビューできます。

HTML ファイルをセットアップする

このステップでは、index.htmlという名前の HTML ファイルを作成し、基本的な HTML 構造を追加します。

<!doctype html>
<html>
  <head>
    <title>HTML Meter Tag Lab</title>
  </head>
  <body></body>
</html>

HTML ファイルにタグを追加する

このステップでは、HTML ファイルに<meter>タグを追加し、そのvalue、max、およびmin属性を設定します。

<meter value="50" min="0" max="100"></meter>

タグ用のラベルを追加する

このステップでは、<meter>タグ用のラベルを追加して、アクセシビリティを向上させます。

<label for="meter">My Meter:</label>
<meter id="meter" value="50" min="0" max="100"></meter>

タグに低範囲を追加する

このステップでは、低値として考えられる範囲を指定するためにlow属性を追加します。

<label for="meter">My Meter:</label>
<meter id="meter" value="50" min="0" max="100" low="30"></meter>

タグに高範囲を追加する

このステップでは、高値として考えられる範囲を指定するためにhigh属性を追加します。

<label for="meter">My Meter:</label>
<meter id="meter" value="50" min="0" max="100" low="30" high="80"></meter>

タグに最適値を追加する

このステップでは、ゲージの最適値を設定するためにoptimum属性を追加します。

<label for="meter">My Meter:</label>
<meter
  id="meter"
  value="50"
  min="0"
  max="100"
  low="30"
  high="80"
  optimum="50"
></meter>

HTML ファイルをまとめる

このステップでは、<body>と<html>タグの終了タグを追加することで HTML ファイルをまとめます。

<!doctype html>
<html>
  <head>
    <title>HTML Meter Tag Lab</title>
  </head>
  <body>
    <label for="meter">My Meter:</label>
    <meter
      id="meter"
      value="50"
      min="0"
      max="100"
      low="30"
      high="80"
      optimum="50"
    ></meter>
  </body>
</html>

まとめ

この実験では、既知の範囲内のスカラー測定値を表示するために HTML の<meter>タグをどのように使用するかを学びました。HTML ファイルに<meter>タグを追加し、その属性を使用して低、高、最適と考えられる値の範囲を指定する方法を見ました。また、<meter>タグにラベルを追加して、アクセシビリティを向上させました。これで、HTML ドキュメントで<meter>タグを使用してスカラー測定値を表示できるようになりました。