0Pricing
HTML Academy · レッスン

progress要素とmeter要素

ネイティブHTMLで進捗と測定値を表示します

「progress要素とmeter要素」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。

progress 要素

<progress> 要素は、タスクの完了を表します。

<label for="upload">File upload progress:</label>
<progress id="upload" max="100" value="72">72%</progress>
<!-- max: total amount of work (default: 1) -->
<!-- value: amount of work done -->
<!-- Content between tags: fallback for old browsers -->

不確定な進捗

value がない場合、progress は不確定状態のアニメーションを表示します。

<!-- Indeterminate: value not set -->
<progress id="loading">Loading...</progress>
<!-- Browser shows a cycling animation (no value known) -->

<!-- Set value when progress is known: -->
<script>
document.getElementById('loading').value = 45;
// Now shows 45% complete (with max=1: 0.45 = 45%)
</script>

JavaScriptで進捗をアニメーション表示する

進捗を動的に更新します。

<progress id="task" max="100" value="0"></progress>
<span id="pct">0%</span>

<script>
let progress = 0;
const bar = document.getElementById('task');
const pct = document.getElementById('pct');

const interval = setInterval(() => {
  progress += 10;
  bar.value = progress;
  pct.textContent = progress + '%';
  if (progress >= 100) clearInterval(interval);
}, 500);
</script>

meter 要素

<meter> 要素は、既知の範囲内のスカラー測定値を表示します。

<meter min="0" max="100" value="72">72 out of 100</meter>
<!-- Unlike progress (task completion), meter shows a static measurement:
  - Disk usage
  - Password strength
  - Score or rating
  - Fuel level
-->

meter の属性

meter には、最適範囲と警告範囲を定義するための属性がいくつかあります。

<meter
  min="0"      <!-- minimum possible value -->
  max="100"   <!-- maximum possible value -->
  low="30"    <!-- threshold: below this = low -->
  high="70"   <!-- threshold: above this = high -->
  optimum="50" <!-- where the optimal value lies -->
  value="85"
>85/100</meter>

meter の色の状態

ブラウザーは low/high/optimum に基づいて meter を色分けします。

<!-- optimum is in the low range: low values are good (e.g., error count) -->
<meter min="0" max="100" low="30" high="70" optimum="0" value="10">
  10 errors  <!-- green: value is in the good zone -->
</meter>

<!-- optimum is in the high range: high values are good (e.g., score) -->
<meter min="0" max="100" low="40" high="80" optimum="100" value="55">
  55 points  <!-- yellow: between low and high -->
</meter>

meter によるディスク使用量

meter の代表的な用途は、ディスクやメモリの使用量の表示です。

<label for="disk">Disk usage:</label>
<meter
  id="disk"
  min="0"
  max="500"
  low="400"
  high="450"
  optimum="0"
  value="420"
>420 GB of 500 GB used</meter>
<p>420 GB of 500 GB used (84%)</p>

meter によるパスワード強度

meter を使ってパスワードの強度を表示します。

<label for="pwd">Password</label>
<input type="password" id="pwd">
<label for="strength">Strength:</label>
<meter id="strength" min="0" max="4" low="1" high="3" optimum="4" value="0"></meter>

<script>
document.getElementById('pwd').addEventListener('input', function() {
  const strength = calculateStrength(this.value); // 0-4
  document.getElementById('strength').value = strength;
});
</script>

progress と meter のスタイル設定

progress と meter に独自のスタイルを設定します。

/* Basic progress styling */
progress {
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: #e2e8f0;
  border: none;
}

progress::-webkit-progress-bar { background: #e2e8f0; }
progress::-webkit-progress-value { background: #0070f3; }
progress::-moz-progress-bar { background: #0070f3; }

progress のアクセシビリティ

スクリーンリーダーへの対応を向上させるため、ARIA 属性を追加します。

<label for="upload">Upload progress</label>
<progress
  id="upload"
  max="100"
  value="65"
  aria-valuenow="65"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-label="File upload: 65% complete"
>65%</progress>

progress と meter の概要

重要な違い：

  • <progress> — 時間の経過に伴うタスクの完了を表します。value は max に向かって増加し、不確定状態にもできます
  • <meter> — 静的なスカラー測定値を表します。value はすでに決まっており、low/high/optimum の範囲があります

使い分け

用途の目安：

  • progress — ファイルのアップロード、フォーム入力の完了ウィザード、ローディングバー
  • meter — ディスク使用量、燃料計、クレジットスコア、バッテリー残量、検索結果の関連性

クイックチェック

ハードドライブがどの程度埋まっているかを表示するには、どの要素が適切でしょうか。

復習：progress と meter

progress と meter の要点：

  • <progress max value> — タスクの完了を表します。value がない場合は不確定状態になります
  • <meter min max low high optimum value> — 静的な測定値を表します
  • ブラウザーは optimum の位置に基づいて meter を自動的に色付けします
  • スクリーンリーダーに対応するため、aria-valuenow/min/max を追加します

よくある質問

「progress要素とmeter要素」レッスンは無料ですか？

はい。「progress要素とmeter要素」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。

「progress要素とmeter要素」で何を学びますか？

ネイティブHTMLで進捗と測定値を表示します ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

HTML Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。

「progress要素とmeter要素」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このHTML Academyレッスンでコードを書いて実行できますか？

はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. asideと補足コンテンツ
  2. figureとfigcaption再入門
  3. detailsとsummaryの開示ウィジェット
  4. progress要素とmeter要素
← HTML Academyに戻る