HTML - progress 要素

概要

名前
progress
カテゴリー
  • Flow content
  • Phrasing content
  • Palpable content
  • Labelable element
配置できる場所
Phrasing content が期待される場所。
コンテンツモデル
Phrasing content。ただし、別の progress 要素の先祖になってはいけない。
説明
progress 要素は、タスクの全体量に対する進捗状況を示すための要素です。現在値を更新するには、Javascript などを使用します。progress 要素に未対応のブラウザでも進捗状況が分かるようにするために、要素内容としてインラインのテキストを含めることが推奨されています。
タグの省略
開始タグも終了タグも省略できません。
DOM Interface
HTMLProgressElement
仕様書
仕様書策定状況コメント
LS:現行の標準
REC:勧告
サポートブラウザ
ie
IE
edge
Edge
firefox
Firefox
chrome
Chrome
safari
Safari
opera
Opera
safari
iOS Safari
android
Android
10666117
○:Support ×:Not Support ?:未定義 n:以降の Version で Support

属性

属性サポートブラウザ
属性名 ie
IE
edge
Edge
firefox
Firefox
chrome
Chrome
safari
Safari
opera
Opera
safari
iOS Safari
android
Android
max10666117
value10666117
○:Support ×:Not Support ?:未定義 n:以降の Version で Support
グローバル属性
すべての要素で共通に利用できるグローバル属性を指定できます。
max
この属性は progress 要素で示すタスクで必要とする総作業量を設定します。max 属性を指定する場合は、値を 0 より大きい有効な浮動小数点数値にしなければなりません。既定値は 1 です。
value
この属性は、タスクの進捗状況を設定します。値は 0 から max までの間、または max を省略する場合は 0 から 1 までの間の有効な浮動小数点数値であることが必要です。value 属性がない場合は、プログレスバーは不定、タスクは処理中であるものの完了までが予想できない状態になります。最小値は常に 0 であり、min 属性は progress 要素で許可されていません。-moz-orient CSS プロパティを使用して、プログレスバーを水平方向に表示する (既定値) か垂直方向に表示するかを指定できます。:indeterminate 疑似クラスは、不定状態のプログレスバーにマッチします。プログレスバーを値がある状態から不定の状態に変更するには element.removeAttribute("value")value 属性を削除しなければなりません。

サンプルコード

progress 要素のサンプルコードは以下のとおりです。

<progress value="70" max="100">70 %</progress>
progress 要素のサンプルコード

関連記事

HTML の全般的な記事はHTML タグの基本と使い方を参照してください。

Category:
プログラミング
公開日:
更新日:
Pageviews:
8
Shares:
0
Tag:
HTML
hatebu icon
hatebu