「HTMLとCSSで進捗バーを作る1」の編集履歴(バックアップ)一覧はこちら

HTMLとCSSで進捗バーを作る1」(2015/10/11 (日) 10:41:45) の最新版変更点

追加された行は緑色になります。

削除された行は赤色になります。

進捗バーをHTMLとCSSで作っていきます。10月10日記事 ~ ~ イメージ &image(progress002.png); ~ ~ 目次 #contents ~ ~ ---- ~ *作成方法は主に2通り **HTMLだけで作る progressタグというものがあり、それを使って作る。インラインセマンティック要素という種類にはいります。基本形は <progress value="40" max="100"><span>40</span>%</progress>(40%)</label > ~ ~ **HTMLとCSSで作る position:relative,absoluteとz-indexを組み合わせて黒い背景に緑のバー的なイメージで作っていきます。 ~ ~ *両者のコード HTML <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> <title>進捗バーの表示1</title> </head> <body> <!--方法1:progressタグによる表記--> <div id="progress_contents"> <p>progressタグ インラインセマンティック要素</p> <?php //データベースで取得したりなどし、値などをとってきて計算する。 $percent1 = 0; $percent2 = 50; $percent3 = 95; ?> <p>レベル1:<label><progress value="<?php echo $percent1; ?>" max="100"><span><?php echo $percent1; ?></span>%</progress> (0%)</label></p> <p>レベル2:<label><progress value="<?php echo $percent2; ?>" max="100"><span><?php echo $percent2; ?></span>%</progress> (50%)</label></p> <p>レベル3:<label><progress value="<?php echo $percent3; ?>" max="100"><span><?php echo $percent3; ?></span>%</progress> (95%)</label></p> </div> <!--方法2:HTMLとCSSによる表記。動的な部分はHTMLファイル部分でCSSを記述する--> <div id="progress_contents2"> <p>HTMLとCSSで記述 ブロックレベル要素</p> <div class="bar"> <?php $percent4 = 40; ?> <p class="bar_over" style="width: <?php echo $percent4; ?>%"></p> <p class="bar_under"></p> <br> </div> <p><?php echo $percent4; ?>パーセント</p> </div> </body> </html> CSS @charset "UTF-8"; #progress_contents{ width: 300px; min-height: 100px; border: 1px solid #000; } #progress_contents progress{ width: 150px; height: 30px; } #progress_contents2{ margin-top:20px; width: 300px; min-height: 100px; border: 1px solid #000; } #progress_contents2 .bar{ min-height: 30px; position: relative; width: 300px; } #progress_contents2 .bar_over, #progress_contents2 .bar_under { height: 30px; margin: 0; position: absolute; } #progress_contents2 .bar_under { background: linear-gradient(#333, #000); background: -webkit-linear-gradient(#333, #000); background: -moz-linear-gradient(#333, #000); background: -ms-linear-gradient(#333, #000); background: -o-linear-gradient(#333, #000); width: 100%; } #progress_contents2 .bar_over { background: linear-gradient(#0C0, #090); background: -webkit-linear-gradient(#0C0, #090); background: -moz-linear-gradient(#0C0, #090); background: -ms-linear-gradient(#0C0, #090); background: -o-linear-gradient(#0C0, #090); /*width: 90% 静的なら要素を記述する。;*/ z-index: 1; } ~ ~ *まとめ progressタグはブラウザ間でかなり表示の差がありますので、ご確認ください。firefoxが一番かっこいいです。 進捗バーが増えていくのはanimation使えばできそうです。それは[[HTMLとCSSで進捗バーを作る2]]で行っていきたいと思います。 ~ ~ 以上
進捗バーをHTMLとCSSで作っていきます。10月10日記事 ~ ~ イメージ &image(progress002.png); ~ ~ 目次 #contents ~ ~ ---- ~ *作成方法は主に2通り **HTMLだけで作る progressタグというものがあり、それを使って作る。インラインセマンティック要素という種類にはいります。基本形は <progress value="40" max="100"></progress> ~ ~ **HTMLとCSSで作る position:relative,absoluteとz-indexを組み合わせて黒い背景に緑のバー的なイメージで作っていきます。 ~ ~ *両者のコード HTML <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> <title>進捗バーの表示1</title> </head> <body> <!--方法1:progressタグによる表記--> <div id="progress_contents"> <p>progressタグ インラインセマンティック要素</p> <?php //データベースで取得したりなどし、値などをとってきて計算する。 $percent1 = 0; $percent2 = 50; $percent3 = 95; ?> <p>レベル1:<label><progress value="<?php echo $percent1; ?>" max="100"><span><?php echo $percent1; ?></span>%</progress> (0%)</label></p> <p>レベル2:<label><progress value="<?php echo $percent2; ?>" max="100"><span><?php echo $percent2; ?></span>%</progress> (50%)</label></p> <p>レベル3:<label><progress value="<?php echo $percent3; ?>" max="100"><span><?php echo $percent3; ?></span>%</progress> (95%)</label></p> </div> <!--方法2:HTMLとCSSによる表記。動的な部分はHTMLファイル部分でCSSを記述する--> <div id="progress_contents2"> <p>HTMLとCSSで記述 ブロックレベル要素</p> <div class="bar"> <?php $percent4 = 40; ?> <p class="bar_over" style="width: <?php echo $percent4; ?>%"></p> <p class="bar_under"></p> <br> </div> <p><?php echo $percent4; ?>パーセント</p> </div> </body> </html> CSS @charset "UTF-8"; #progress_contents{ width: 300px; min-height: 100px; border: 1px solid #000; } #progress_contents progress{ width: 150px; height: 30px; } #progress_contents2{ margin-top:20px; width: 300px; min-height: 100px; border: 1px solid #000; } #progress_contents2 .bar{ min-height: 30px; position: relative; width: 300px; } #progress_contents2 .bar_over, #progress_contents2 .bar_under { height: 30px; margin: 0; position: absolute; } #progress_contents2 .bar_under { background: linear-gradient(#333, #000); background: -webkit-linear-gradient(#333, #000); background: -moz-linear-gradient(#333, #000); background: -ms-linear-gradient(#333, #000); background: -o-linear-gradient(#333, #000); width: 100%; } #progress_contents2 .bar_over { background: linear-gradient(#0C0, #090); background: -webkit-linear-gradient(#0C0, #090); background: -moz-linear-gradient(#0C0, #090); background: -ms-linear-gradient(#0C0, #090); background: -o-linear-gradient(#0C0, #090); /*width: 90% 静的なら要素を記述する。;*/ z-index: 1; } ~ ~ *まとめ progressタグはブラウザ間でかなり表示の差がありますので、ご確認ください。firefoxが一番かっこいいです。 進捗バーが増えていくのはanimation使えばできそうです。それは[[HTMLとCSSで進捗バーを作る2]]で行っていきたいと思います。 ~ ~ 以上

表示オプション

横に並べて表示:
変化行の前後のみ表示: