[57] プログレスバー(進捗状況)を出そう progress要素
最終更新日:2018年03月30日 (初回投稿日:2013年10月29日)
<progress>要素は作業の進捗状況を示す要素で「プログレスバー」を出します。
<output>や<meter>と同じく 表示をする 役目。これもHTML5 からの新要素です。
<meter>と違って静的な状況を示すのではなく、ページやファイルのロード状況とか、ファイルのアップロードの状況などの、動的な進捗状況を示すのに使います。
こんなかんじ。
*実際のページのロードに連動してません。動きを見せるために 1〜100までカウントしてるだけ。
使用する要素 | <progress> 〜 </progress> |
---|
<progress>の属性 | value:完了した量を表す。デフォルトは0.0〜1.0 |
---|---|
max:トータルの量を指定 | |
form:親の<form>のID名を呼び出して関連づける | |
グローバル属性 |
value属性と max属性の約束事
value属性と max属性、どちらも0以上の数値を使います。マイナスはNG。進捗状況だからね。
value属性のデフォルトは0.0から1.0。小数もOKってことね。
max属性があれば、value属性の値も max属性の値まで。逆にmax属性が無ければ、maxの値は1.0。
max属性は、0より大きい値でなければダメ(0じゃダメ)。
●サンプル1
静的なサンプルですが、value属性と max属性の指定によるプレビューです。
max値は全部 100にしています。
value値(これは実際には JavaScript によって変動するのですが)は、
上から、0、50、100。4番目は value属性が無い(または取得できない)状態のサンプルです。
<label ><progress value="0" max="100"><span>0</span>%</progress> (0%)</label >
<label ><progress value="50" max="100"><span>50</span>%</progress> (50%)</label >
<label ><progress value="100" max="100"><span>100</span>%</progress> (100%)</label >
<label ><progress max="100"><span>0</span>%</progress>(未確定)</label >
<progress>〜</progress>の間に、未対応ブラウザでも進捗を把握できるように、現在値と最大値をテキストで表示する事が推奨されてます。
<progress>に対応しているブラウザでは、この内容は表示されません。
で、具体的な使い方は …プログラマーのかたにお任せで〜す ヽ(´ー`)ノ
プログラマーの方なら、Javascriptで進捗の数値を取得して <progress>要素に表示させるのは簡単なんでしょうね。(未消化でゴメン!)
プログレスバーの サンプルコード が W3Cの<progress>のページ(EXAMPLE 56)にありましたので、一応ご参考までに貼っときます。
*この例では updateProgress() メソッドを、同じページの「別コード」から呼び出せば、タスクの進捗に従って プログレスバーを更新する、と説明されています。
<section>
<h2>Task Progress</h2>
<p>Progress: <progress id="p" max=100><span>0</span>%</progress></p>
<script>
var progressBar = document.getElementById('p');
function updateProgress(newValue) {
progressBar.value = newValue;
progressBar.getElementsByTagName('span')[0].textContent = newValue;
}
</script>
</section>
おまけサンプル
ということであんまり役に立たないけど、冒頭の <progress>を javaScriptで動かしてみたサンプルのソースを一応書いとくね。
value値を 1ずつ足しただけ。<output>要素も使ってみましたよ。
Loading : <progress id="prog" max="100" value="0">Loading...</progress>
: <output id="outp">0</output>%<br>
<input type="button" value="リロードして確認" onClick="location.reload(); return false;">
<script>
var pbar = document.getElementById('prog');
var ptxt = document.getElementById('outp');
var pup = setInterval("upPrgrss()",100);
function upPrgrss(){
if(pbar.value<=pbar.max){
pbar.value++; /*「++」で 1 ずつ足してます*/
ptxt.value = pbar.value;
}else{
clearInterval(pup);
}
}
</script>
次回予告
次回は <keygen>要素です。これは、シリアルナンバーとかCDキーとかを生成する役目だそうで、HTML5からの新要素です。
(注:この <keygen>要素は HTML5.2 で削除されました。2018年3月記)
- 関連記事
-
- [62] 外部コンテンツを組み込もう object要素・param要素
- [61] イメージマップ(リンク領域)を作ろう map要素・area要素
- (ちょっとメモ)属性の「引用符」や「値」の省略について
- (ちょっとメモ)HTML5 での 省略可能なタグについて
- [60] フォームを美しく整えよう(CSS使用)
- [59] フォームの属性 逆引き一覧 (どの属性がどの部品に使えるか)
- [58] 暗号鍵を作ろう keygen要素(HTML5.2で削除されました)
- [57] プログレスバー(進捗状況)を出そう progress要素
- [56] 数量や割合のゲージを表示しよう meter要素
- [55] 計算結果の出力欄を作ろう output要素
- [54] ラベルを付けて使いやすくしよう label要素
- [53] 文章 (複数行のテキスト) を入力してもらおう textarea要素
- [52] 入力候補のリストを作ろう datalist要素
- [51] セレクトメニューを作ろう(select・option・optgroup要素)
- (ちょっとメモ)整理しよう。フォームのボタン比較
初心者にも使いやすい(と思う)レンタルサーバー
「初心者ですがレンタルサーバーはどこがいい?」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、
スターサーバーや ロリポップ!
です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。
ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー
は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。
スポンサーリンク