HTMLとCSSで進捗バーを作る1やHTMLとCSSで進捗バーを作る2の続きです。今度はHTML5から追加されたmeterタグを使っていきます。11月9日記事
イメージ
インラインセマンティック要素にはいり、インラインとして分類されています。そのため文章中に埋め込むことも可能ですが、ブロック要素の中に入れていきます。(display:blockでやってももいいけどね。)
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="reset.css"> <link rel="stylesheet" type="text/css" href="style.css"> <title>meterタグで進捗バー</title> </head> <body> <div id="wrapper"> <section> <p class="item">進捗状況1</p> <p><meter value="4" max="16"></meter><br><!--16個中4個という意味--></p> <p class="item">進捗状況2</p> <p><meter value="30" min="0" max="100"></meter><!--最小値が0で最大値が100の中での割合--></p> </section> </div> </body> </html>
reset.cssはどこからかとってきてください。
style.css
@charset "utf-8"; /* CSS Document */ #wrapper{ margin: 10px auto; border:1px solid #000; width:400px; } p.item{ padding: 5px; } meter{ width: 400px; height: 40px; }
PHPと連動する場合、valueの値のところに<?php echo $num; ?>などとしていけばいけます。
以上