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

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

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

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

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

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

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

  <progress> 
  </progress>

表示サンプルです。

スクリーンショット 2016-06-29 11.53.13

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

  <progress max="100" value="50"> 
  </progress>

表示サンプルです。

スクリーンショット 2016-06-29 11.54.45


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


イベント