HTML5における＜progress＞タグの使い方

<progress>タグは、プログレスバーと呼ばれるバーを表示させて、進捗状況を示すことができるタグです。今回は、HTML5における<progress>タグの使い方をご紹介します。

HTML5における<progress>タグの使い方

<progress>は、HTML5からの新要素です。<output> や<meter>などのように表示をすることができますが、<progress>は、ロードの状況や、アップロード状況のように、進行中のステータスの進捗状況を表示するのに利用します。

まず、value属性とmax属性を使用します。<progress>は進捗状況を表す要素なので、マイナスの値を指定することはできません。ただ、0.1などの小数の指定は可能です。

また、max属性を指定した場合は、value属性で指定できるのは、max属性の値までとなります。そして実際に<progress>使用して動かすには、JavaScriptなどの併用が必要です。

今回は、<progress>タグの基本的な記述の仕方について紹介します。

表示サンプルです。

上では表示もわかりにくいと思うので、max属性とvalue属性を追加してみました。

表示サンプルです。

CSSを使用すると、一部のブラウザでは縦表示にすることも可能です。自分の使い方に合わせて、プログラムを併用して使用してみてください。