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

はじめに

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

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

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/FormsandInputGroup(["Forms and Input"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/LayoutandSectioningGroup -.-> html/access_cons("Accessibility Considerations") html/FormsandInputGroup -.-> html/forms("Form Elements") html/FormsandInputGroup -.-> html/form_access("Accessibility in Forms") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") subgraph Lab Skills html/basic_elems -.-> lab-70798{{"HTML のスカラー測定"}} html/head_elems -.-> lab-70798{{"HTML のスカラー測定"}} html/doc_flow -.-> lab-70798{{"HTML のスカラー測定"}} html/access_cons -.-> lab-70798{{"HTML のスカラー測定"}} html/forms -.-> lab-70798{{"HTML のスカラー測定"}} html/form_access -.-> lab-70798{{"HTML のスカラー測定"}} html/inter_elems -.-> lab-70798{{"HTML のスカラー測定"}} html/custom_attr -.-> lab-70798{{"HTML のスカラー測定"}} end

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

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

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

HTMLファイルに`<meter>`タグを追加する

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

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

`<meter>`タグ用のラベルを追加する

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

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

`<meter>`タグに低範囲を追加する

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

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

`<meter>`タグに高範囲を追加する

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

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

`<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>タグを使用してスカラー測定値を表示できるようになりました。

HTML のスカラー測定

はじめに

Skills Graph

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

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

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

<meter>タグに低範囲を追加する

<meter>タグに高範囲を追加する

<meter>タグに最適値を追加する