進捗バーをHTMLとCSSで作っていきます。10月10日記事

イメージ



目次





作成方法は主に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で行っていきたいと思います。

以上

最終更新:2015年10月11日 10:41