「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]]で行っていきたいと思います。
~
~
以上