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; ?>などとしていけばいけます。
以上
