★HTML5タグリファレンス

私たちはカジノサイトを独自にレビューしています。当社のリンクを通じてサインアップすると、追加料金なしで当社に手数料が発生する場合があります。

<progress> …… タスク完了までの進行状況を示すHTML5から追加
Google Chrome6
広告



このページでは、HTML5のprogress要素を解説しています。
progress要素の最新情報は、以下を参照してください。

<progress>タグは、タスク完了までの進行状況を示す際に使用します。

タスクがどれだけ完了したかをvalue属性で、タスク全体でどれだけ作業が必要かをmax属性で指定します。

value属性とmax属性が存在する場合には、どちらも0以上の数値となります。また、value属性の値は、max属性の値以下となります。単位は任意で特に決められていません。

上記2つの属性を使えば、タスクの進行状況を指定することはできますが、
<progress>タグをサポートしていないブラウザを使用しているユーザーにも進行状況が分かるように、<progress>~</progress>の中にも、テキストで進行状況を記述することが推奨されています。

尚、ディスク使用量の表示など、何かを計測するのに<progress>タグを使用するのは不適切です。
このような場合には、<meter>タグを使用してください。

以下のサンプルは、ごく簡単なHTMLソースですが、JavaScriptなどと組み合わせて、より高機能なプログレスバーを作成しても良いでしょう。

■HTML4.01からHTML5へのバージョンアップによる変更点

progress要素は、HTML5から新たに追加された要素です。

■属性

value属性
タスクがどれだけ完了したかを指定する
max属性
タスク全体でどれだけ作業が必要かを指定する
form属性
どのform要素と関連しているのかを明確に示す

■使用例

HTMLソース

<section>
<h2>動画のダウンロード</h2>
<p>進行状況:<progress max=”100″>現在、動画をダウンロード中です。</progress></p>
</section>

↓↓↓

ブラウザ上の表示

動画のダウンロード

進行状況:現在、動画をダウンロード中です。

広告



Sponsors




山田 太郎
テック・リード
山田太郎は、ウェブ開発やグラフィックスプログラミングに10年以上の経験を持つテクノロジーの専門家です。特にHTML5 CanvasやJavaScript、インタラクティブメディアに精通しており、動的なユーザーインターフェースや最先端のウェブアプリケーションの開発に携わってきました。複雑な図形描画や画像操作、リアルタイムグラフィックスに関する知識が豊富で、ウェブ技術の限界を追求する開発者たちにとって頼りになる存在です。知識の共有に情熱を持ち、初心者からプロフェッショナルまで幅広く支援するため、技術フォーラムやブログにも積極的に貢献しています。

ギャンブルガイド もっと見る

カジノファインダー

どのカジノが自分に最適か分からないですか?

サインアップは必要なく、1 分以内に最適なブックメーカーを簡単に見つけることができます。
カジノを探す
Back
質問
Select one of the following options
{"is_any_tile":true}

どのカジノが自分に最適か分からないですか?

Back
Restart
やったー!
これはあなたの選択に基づいた最高のカジノです...
52 users signed up
もっと表示する