情報量の目安の伝達手段としてプログレスバーってのがある。例えばデータのローディング中に、データ読み込みの度合いを視覚的に表現したりってのはお馴染みだ。んでもって、プログレスバーを (X)HTML と CSS で作るとしたらどんな感じかなぁって思ったんで、ちょっと作ってみた。
<div class="progress">
<div class="bar" style="width: 75%;"></div>
</div>これに対して、下記のように CSS で指定する。
.progress {
background: #ffffff;
width: 500px;
border: 1px solid #999;
}
.bar {
background: #ddffbb;
height: 20px;
margin: 2px;
}class="bar" の幅をインラインスタイルにしてプログレスバーの長さを指定しているんだけど、ここら辺を JavaScript とかでゴニョゴニョすれば良い感じなのかな。と、ここまでやっておいて、論理的なマークアップの観点からすると情報を全て CSS 側に委ねてしまっていて、(X)HTML の方はただの空 DIV じゃんって思ったら萎えた。
うーん、class="bar" 内に井桁（#）を数値分 10 桁単位で document.write して、CSS で color を class="bar" と同じ色を指定。はみ出した分はoverflow: hidden; とかすれば良いのかなぁ、良く分かんないけど:-P
Comments