ファイルのダウンロード中や、フォームでの入力完了件数など、今どの時点にいるのか「進捗状況」を表示するタグがあるのをご存じですか？
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作成リファレンス
あたまのなかとっちらか～る
