進捗バーをHTMLとCSSで作っていきます。10月10日記事
イメージ
目次
progressタグというものがあり、それを使って作る。インラインセマンティック要素という種類にはいります。基本形は
<progress value="40" max="100"></progress>
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で行っていきたいと思います。
以上