SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

HTMLのprogressタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

再生時間 7:58動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

  1. 0:00こんにちは。
  2. 0:00エイチティーエムエル、リファレンス解説です。
  3. 0:04HTMLタグ編の三十八本目は、プログレスタグです。
  4. 0:07ファイルを送っている途中や、大きな処理が動いているとき、あとどれくらい待てば終わるのかが分かると安心しますよね。
  5. 0:15プログレスは、そんな処理の進み具合をバーで伝えるためのタグです。
  6. 0:20今回は、基本の書き方から、値の決め方、進捗が分からない場合の書き方までを順に確認していきます。
  7. 0:27似た役割のミータータグとの違いも合わせて押さえましょう。
  8. 0:31待つ時間の長さが見えるかどうかで、利用者の不安は大きく変わります。
  9. 0:36その安心感を作るのが、このタグの役割です。
  10. 0:39どんな場面で使うのか、具体例から考えてみましょう。
  11. 0:43ファイルをアップロードしている途中、データをダウンロードしている最中、少し時間のかかる計算や送信処理が進んでいる場面が代表例です。
  12. 0:53共通しているのは、処理に始まりと終わりがあり、完了までの割合を伝えられることです。
  13. 0:59反対に、ディスクの使用量や気温のように、終わりという概念がない測定値には使いません。
  14. 1:06そちらは後ほど紹介するミータータグの役割です。
  15. 1:10まずは、これは進み続ける処理かどうか、という観点で判断してください。
  16. 1:15進捗バーがあると、利用者は処理が止まっていないことを確認でき、途中でページを閉じてしまうことも減ります。
  17. 1:23基本の書き方を確認します。
  18. 1:25プログレスタグには、開始タグと終了タグがあり、その間に文字で割合を書いておくことができます。
  19. 1:32肝心なのは二つの属性です。
  20. 1:34バリューは今どこまで進んだかを示す現在の値、マックスは完了となる最大値です。
  21. 1:39スライドの例は、マックスが百、バリューが三十なので、全体の三十パーセントまで進んだ状態という意味になります。
  22. 1:47マックスを省略すると最大値は一として扱われますが、初心者のうちは百分率で考えるほうが分かりやすいので、
  23. 1:52百を明示する書き方をおすすめします。
  24. 1:57書く順番はマックスが先でも構いませんが、現在の値と最大値のペアで読む習慣を付けておくと、
  25. 2:02値の確認がしやすくなります。
  26. 2:06次に、ラベルと組み合わせた実用的な例です。
  27. 2:09バーだけが画面にあると、それが何の進捗なのか分かりません。
  28. 2:13そこでレーベルタグを一緒に置き、アップロードの進捗、という説明を付けます。
  29. 2:19レーベルのフォー属性と、プログレスのアイディーを一致させることで、両者が結びつき、
  30. 2:24支援技術を使う人にも何のバーなのかが伝わります。
  31. 2:28さらに、タグの中にも三十パーセントと文字で書いておくと、バーが表示できない環境でも内容が伝わります。
  32. 2:36見た目と意味の両面で、伝わる書き方を心がけましょう。
  33. 2:40実際のページでは、見出しや説明文と並べて置くことも多いので、周囲の文章とのつながりも意識して配置してください。
  34. 2:48バリューとマックスの決め方を、もう少し詳しく見ます。
  35. 2:51バリューはゼロ以上、マックス以下に収めるのが原則です。
  36. 2:55マックスは必ずゼロより大きな数にしてください。
  37. 2:58単位はパーセントでなければならない、という決まりはありません。
  38. 3:03たとえば二百件の処理のうち七十件が終わったなら、バリュー七十、マックス二百と、
  39. 3:06そのまま件数で書けます。
  40. 3:10割合の計算はブラウザーが行い、バーは三十五パーセントの位置まで伸びます。
  41. 3:15扱っているデータの単位そのままで書けるので、変換ミスが起きにくい点も、このタグの便利なところです。
  42. 3:22最大値を百にそろえるか、件数のままにするかは、チームやページ全体で決め方を統一しておくと、
  43. 3:26読み手も書き手も迷いません。
  44. 3:30進捗の割合が分からない場面では、どう書けばよいのでしょうか。
  45. 3:35答えはシンプルで、バリュー属性を書かないことです。
  46. 3:38バリューがないプログレスは不確定な状態となり、ブラウザーは処理が進んでいることだけを示す、
  47. 3:42動きのあるバーを表示します。
  48. 3:47たとえば、サーバーからの応答を待っていて、全体量がまだ分からない読み込みの場面に合います。
  49. 3:53適当な数字をでっち上げて書くよりも、正直に分からないと示すほうが、利用者を惑わせません。
  50. 3:59割合が判明したタイミングで、バリューを付けた形に切り替えてください。
  51. 4:04読み込み中という文字を中に入れておくと、不確定な状態であることが、バーの見た目以外からも伝わりやすくなります。
  52. 4:12よく似たタグに、ミーターがあります。
  53. 4:15使い分けの基準は、値が時間とともに終わりへ向かって進むかどうかです。
  54. 4:21プログレスは、ダウンロードのように、完了に向けて増えていく進捗専用です。
  55. 4:27一方ミーターは、ディスクの使用量、テストの点数、残りの容量など、決まった範囲の中にある現在の測定値を示します。
  56. 4:35こちらは進んでいるわけではなく、その時点の状態を表しています。
  57. 4:40迷ったときは、この値は放っておくと完了に近づくか、と自問してみてください。
  58. 4:46近づくならプログレス、状態を示すだけならミーターです。
  59. 4:51名前が似ているため混同しやすい組み合わせです。
  60. 4:55違いを言葉で説明できるようになると、実務でも自信を持って選べます。
  61. 5:00大切な注意点があります。
  62. 5:02プログレスタグを置いただけでは、バーは勝手に動きません。
  63. 5:07表示を更新する仕組みは、ジャバスクリプトなどで別に用意する必要があります。
  64. 5:13実際の処理、たとえばアップロードの進行状況を受け取るたびに、バリューを新しい値に書き換えることで、
  65. 5:18バーが少しずつ伸びていきます。
  66. 5:23そのとき、タグの中の文字のパーセント表示も一緒に更新すると、数字と見た目が食い違いません。
  67. 5:31タグは進捗を見せる器、進捗を数えて伝えるのはプログラム、という分担を覚えておいてください。
  68. 5:38処理が完了したらバリューをマックスと同じ値にし、完了したことを文字でも伝えると、
  69. 5:42より丁寧な案内になります。
  70. 5:47属性と見た目を整理します。
  71. 5:49プログレス専用の属性は、バリューとマックスの二つだけです。
  72. 5:53ほかに、アイディー、クラス、ラング、独自の値を保持するデータ属性といった共通属性が使えます。
  73. 6:00見た目については注意が必要です。
  74. 6:02バーの色や形はブラウザーが標準で用意したものが表示され、ブラウザーごとに少しずつ異なります。
  75. 6:09幅や高さはシーエスエスで調整できますが、バーの色を細かく変える指定はブラウザーごとに書き方が分かれています。
  76. 6:17まずは標準の見た目で使い、必要な場合だけ公式資料を確認しながら調整してください。
  77. 6:23色を変える場合は、進捗が伝わるコントラストを保つことも大切です。
  78. 6:27薄すぎる色は、進み具合が分かりにくくなります。
  79. 6:31ブラウザー互換性を確認します。
  80. 6:33記事が参照するエムディーエヌの記録では、プログレスタグはクロームがバージョン六以降、
  81. 6:39エッジが十二以降、ファイアフォックスが六以降、サファリが六以降と、主要ブラウザーで古くから対応しています。
  82. 6:45バリューとマックスの両属性についても、同じ範囲で対応が記録されています。
  83. 6:50そのため、対応を心配して使用をためらう必要はほとんどありません。
  84. 6:54ただし先ほど触れたように、バーの見た目の細部はブラウザーごとに異なります。
  85. 6:59公開前に、対象のブラウザーで一度表示を確認しておくと安心です。
  86. 7:03スマートフォン向けのブラウザーでも基本的な表示はそろっていますが、実機での見え方は最後に自分の目で確かめましょう。
  87. 7:11最後に注意点とまとめです。
  88. 7:13気をつけたいのは三つです。
  89. 7:15一つ目、バーだけを置かないことです。
  90. 7:17何の進捗なのか、レーベルや見出しで必ず言葉でも示してください。
  91. 7:22二つ目、進捗が分からないときに適当な数字を書かないことです。
  92. 7:27バリューを省く不確定な表示が正解です。
  93. 7:30三つ目、用途の取り違えです。
  94. 7:32容量などの測定値はミータータグに任せましょう。
  95. 7:35練習として、ラベル付きで七十パーセントのプログレスを書き、値の意味を自分の言葉で説明してみてください。
  96. 7:43お疲れさまでした。
  97. 7:45次回は、整形済みテキストを示すプリタグを解説します。
  98. 7:49進捗表示は、速さそのものではなく、待つ間の不安を減らすための工夫です。
  99. 7:54その視点を持つことが、良いページ作りにつながります。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

progressタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。処理の進捗。value と max を設定し、進捗不明なら value を省きます。

解説記事・サンプルコードを読む：HTMLのprogressタグとは？属性・使い方・ブラウザー互換性と活用例 →