個別記事

前後の記事

プログレスバーの進行度を CSS で表現する

この記事が属するカテゴリー
CSS

情報量の目安の伝達手段としてプログレスバーってのがある。例えばデータのローディング中に、データ読み込みの度合いを視覚的に表現したりってのはお馴染みだ。んでもって、プログレスバーを (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

2005-07-27T18:20:47+09:00 | コメント (0) | トラックバック (0) |はてなブックマーク

関連性が高いエントリー 5 件

トラックバック

このエントリーのトラックバックURL:
http://WWW.lucky-bag.com/cgi/mt/mt-tb.cgi/276

"プログレスバーの進行度を CSS で表現する"へのトラックバックはまだありません。

コメント

"プログレスバーの進行度を CSS で表現する"へのコメントはまだありません。

コメントしてください

コメント内ではタグは一切使えません。コメント内にてタグを表記したい場合は、お手数ですが、文字実体参照を利用して < を &lt; 、> を &gt; とそれぞれ置き換えてください。




保存しますか?


(V) (P)