HTML進捗状況を表示する<progress>タグの使い方を徹底解説

ファイルのダウンロード中や、フォームでの入力完了件数など、今どの時点にいるのか「進捗状況」を表示するタグがあるのをご存じですか?

HTMLで進捗状況を表示するタグとは?

今回は、progressタグの

・基本的な使い方
・JavaScriptで少しずつ進行させる方法

・CSSでバーの見た目を装飾する方法

について説明します。

progressタグとは

progressタグの読み方

progressタグは「プログレスタグ」と読みます。progressは進捗という意味を持つ英単語です。

progressタグの説明

progressタグは、タスクの進捗状況を表示するためのタグです。進捗状況の値は自分で設定することもできますが、設定しない場合はロード中のようにバーが右から左へ、左から右へを繰り返します。

progressタグで利用できる属性

progressタグでは、HTMLの全要素で使用できるグローバル属性と以下の属性を使うことができます。

グローバル属性 説明
 accesskey  要素に体するショートカットキーを指定するための属性です。
 autocapitalize  ブラウザでユーザーが要素に入力や編集をした際、入力欄で入力した文字列の最初の文字が自動的に大文字化されるかどうかを設定する属性です。
class  要素にCSSでスタイル(見た目)を適用するためによく使われる属性です
 contenteditable  要素の内容を編集可能かどうかを指定する属性です。
 data-*  要素にオリジナルのデータ属性を指定するための属性です。
 dir  テキストの文字の方向を右書き・左書きのどちらかに指定する属性です。
draggable  要素がドラッグ可能かどうかを指定する属性です。
 dropzone  要素の上でコンテンツをドロップできるかどうかを指定する属性です。
hidden  要素の非表示を指定する属性です。
 id  class属性同様、要素にCSSでスタイルを適用するためによく使われます。同じid属性はページ内で1回しか使えません。
 inputmode 仮想キーボードの種類の構成に関するヒントを与えます。
 is  登録したカスタム内臓要素のように振舞うように指定できます。
 itemid  項目で一意なグローバル識別子です。
 itemprop  その要素で記述された内容がどのような意味を持つかを定義する属性です。
 itemref  項目に関連付けることができます。
 itemscope itemtypeとセットで使用する属性です。ブロックに含まれているHTMLが特定の項目に関するということを指定します。
 itemtype  アイテムの種類を指定するための属性です。
 lang  要素の中で使われる言語を定義する属性です。
 part CSSの疑似要素::partを使用するためにパート名を付けます。
 slot  要素にシャドウツリーのスロットを割り当てるための属性です。
 spellcheck  要素のスペルチェックを有効にするかどうかを指定する属性です。
 style  要素に直接スタイル(見た目)を指定するための属性です。
 tabindex  Tabキーを使って要素を選択する際の優先順位を指定する属性です。
 title  要素のタイトルを定義します。パソコンのブラウザでは、要素部分にマウスを当てると定義したタイトルが表示されます。
それ以外の属性 説明
max  要素の最大値を指定する属性です。
value  その要素で表示する初期値を指定する属性です。
form input要素が所属するform要素を指定する属性です。

対応ブラウザ

対応ブラウザは以下の通りです。

PC用ブラウザ 対応状況
Chrome 6
Edge 12
Firefox  6
nternet Explorer  10
Opera  11
Safari  6
スマートフォン用ブラウザ 対応状況
Android webview  完全対応
Android版Chrome  完全対応
Android版Firefox  6
Android 版 Opera  11
iOS版Safari  7
Samsung Internet  完全対応

progressタグの基本的な使い方

progressタグの使い方

progressタグは2種類の使い方をすることができます。1つめは最大値を設定し、現在の進捗状況を自ら決定できる方法です。

まずはprogressタグを設置し、その中にvalue属性とmax属性を書きます。value属性には現在の進捗度を、maxには最大値を設定してください。

See the Pen
progress
by rabbittyu (@rabbittyu)
on CodePen.

もう1つはロード中のように、値を決めずに設定する方法です。設定方法は簡単!先ほどは記載していたvalue属性を書かないことで、ロード中のバーを設置することができました。

See the Pen
progress②
by rabbittyu (@rabbittyu)
on CodePen.

progressタグの応用的な使い方

JavaScriptで少しずつ進捗度を進める方法

少し応用的ですが余裕がある方は、JavaScriptの関数を使用した処理も併せて学んでみてください。ここでは解説するために、少し冗長性のあるコードにしていますが、もっと短く記載することもできます。

まずは関数内で登場するメソッドについて説明しておきます。

・document.getElementById(‘prog1’).value
このメソッドは簡単に言うと、HTMLの特定の要素に直にアクセスするメソッドです。括弧内にprog1を設定しているので、prog1にアクセスし、.valueでprog1のvalue値を取り出すという処理になります。
・setTimeout(get_prog, 100)
一定時間後にget_progを呼び出すというタイマー処理です。時間はミリ単位のため、100ミリ秒後に関数を呼び出します。

関数は3つ用意しました。ボタンクリック時の処理onclickで呼び出すstart()、処理が最大値まで進んでいた場合は値をリセットするreset()、そして100ミリ秒ごとに進捗度を進めるget_prog()です。

開始ボタンをクリックすると、start()関数が呼び出され、その中で条件判定を行います。そこで今現在の値が最大値より大きければ、reset()関数を呼び出してからget_prog()関数で、進捗度を進めます。

See the Pen
progress JS
by rabbittyu (@rabbittyu)
on CodePen.

CSSで進捗度のバーの見た目を変更する方法

ここでは進捗状況を一目で確認できるように、outputタグで進捗度を数値で表示しています。outputタグにidを設定し、document.getElementById(‘outputのid名’)でoutputタグにアクセスし、value値を変化させましょう。

CSSではバーの色と、高さ、枠線に変更を加えました。一応動作はしますが、実行するブラウザによって設定が複雑に異なるため、できればデフォルトのままで使用するのが良いでしょう。

See the Pen
progress CSS
by rabbittyu (@rabbittyu)
on CodePen.

まとめ

今回はprogressタグについて解説しました!設定自体は単純ですが、値を他の要素と連動させるとなると、少しややこしくなってしまいますね。

ここではJavaScriptでの動作も併せてご紹介しましたが、もし余裕がある方は様々な値と連動させ、よりprogressタグの存在意義を高めてみましょう!

参考文献:
MDN web docks <progress>:進捗表示要素
progress HTML5タグリファレンス
WEB作成リファレンス
あたまのなかとっちらか~る

BLOGコンテンツをパーソナライズします

あなたは現在「プログラミング学習者」ですか?