はじめに
HTML の<progress>タグは、タスクの進行状況を示すために使用されます。通常、HTML ウェブページ内のタスク用のプログレスバーを表示するために使用されます。この実験では、HTML の<progress>タグを使用して基本的なプログレスバーを作成する方法を学びます。
注：
index.htmlでコーディングを練習し、Visual Studio Code で HTML を書く方法を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行します。その後、Web 8080タブを更新してウェブページをプレビューできます。
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 を使用してプログレスバーを動的に更新する方法も学びました。この技術は、長時間実行されるタスクの進行状況を表示するためや、ファイルアップロードの進行状況を示すために役立ちます。
