HTML プログレスタグの例

はじめに

HTMLの<progress>タグは、タスクの進行状況を示すために使用されます。通常、HTMLウェブページ内のタスク用のプログレスバーを表示するために使用されます。この実験では、HTMLの<progress>タグを使用して基本的なプログレスバーを作成する方法を学びます。

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/MultimediaandGraphicsGroup(["Multimedia and Graphics"]) html(("HTML")) -.-> html/FormsandInputGroup(["Forms and Input"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/MultimediaandGraphicsGroup -.-> html/embed_media("Embedding External Media") html/FormsandInputGroup -.-> html/forms("Form Elements") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") subgraph Lab Skills html/basic_elems -.-> lab-70819{{"HTML タスクの進行状況"}} html/head_elems -.-> lab-70819{{"HTML タスクの進行状況"}} html/embed_media -.-> lab-70819{{"HTML タスクの進行状況"}} html/forms -.-> lab-70819{{"HTML タスクの進行状況"}} html/inter_elems -.-> lab-70819{{"HTML タスクの進行状況"}} html/custom_attr -.-> lab-70819{{"HTML タスクの進行状況"}} end

HTML構造を作成する

まず、index.htmlファイルに次のコードを使用して、プログレスバー用の基本的なHTML構造を作成します。

<!doctype html>
<html>
  <head>
    <title>HTML Progress Tag Example</title>
  </head>
  <body>
    <h1>HTML Progress Tag</h1>
    <label for="progress-bar">Task Progress:</label>
    <progress id="progress-bar" max="100"></progress>
  </body>
</html>

このコードでは、HTMLページを作成するための必要なタグ、ページタイトル用の見出しタグ、プログレスバーを説明するラベルタグ、およびid属性が"progress-bar"でmax属性が100の<progress>タグを含めています。

プログレスバーの値を設定する

プログレスバーの値を設定するには、value属性を0から100までの値でプログレスタグに追加します。たとえば、プログレスバーを50％に設定するには、<progress>タグの後に次のコードを追加します。

<progress id="progress-bar" max="100" value="50"></progress>

プログレスバーを更新するためのJavaScriptの追加

プログレスバーを動的に更新するには、プログレスタグのvalue属性を変更するためのJavaScriptを追加します。

HTMLファイルに次のJavaScriptコードを追加します。

<script>
  let progressBar = document.getElementById("progress-bar");
  let percent = 0;

  function updateProgress() {
    if (percent == 100) {
      clearInterval(intervalId);
      return;
    }
    progressBar.value = percent;
    percent++;
  }

  let intervalId = setInterval(updateProgress, 100);
</script>

このコードでは、updateProgress()という関数を作成しており、これが100ミリ秒ごとにプログレスバーの値を更新します。この関数は、プログレスバーが100％に達しているかどうかをチェックし、その場合はインターバルを停止します。

最後に、updateProgress()関数と100ミリ秒の時間間隔を指定してsetInterval()を呼び出すことでインターバルを設定します。

index.htmlファイルを保存し、ウェブブラウザで開きます。すると、時間の経過とともに値が増加し、100％に達するまでのプログレスバーが表示されるはずです。

まとめ

上記の手順に従うことで、HTMLの<progress>タグを使用して基本的なプログレスバーを作成する方法を学びました。また、JavaScriptを使用してプログレスバーを動的に更新する方法も学びました。この技術は、長時間実行されるタスクの進行状況を表示するためや、ファイルアップロードの進行状況を示すために役立ちます。