1. TOP
  2. HTML / CSS Web
  3. CSSとhtmlと画像1枚で簡単なプログレスバーを作る

CSSとhtmlと画像1枚で簡単なプログレスバーを作る

カテゴリ:
HTML / CSS
Web
| トラックバック(0)
投稿者:めか めか
CSSとhtmlで簡単なプログレスバーを作る

CSSとhtml(と画像1枚)でお手軽にできるプログレスバーです。

解説

1pxのバー用の画像を作成し、大枠のclassを基準にwidth="●●%"で伸ばしているだけのお手軽なプログレスバーです。

CSSも単純で、.progressに背景とボーダーと高さを指定しているだけです。
(ブラウザによって隙間が空く事があるためline-heightを0にして対応しています。)
また、0%だった場合に画像を取ってしまっても背景は表示されるように念のためheightを入れています。(空タグになっちゃいますが)

特に横幅を決めていないので、どの場所(メインカラムからサイドメニューとか)に移しても入っているカラムの●●%を算出できます。
htmlの%指定をいじくるだけなので、MTだったらカスタムフィールドで%を設定する項目を作ってページに入れてみたりとか、jQueryを使用して%を動かしてみたりなどなど色々出来そうです。

ただこのプログレスバー、CSSを切ってしまうと大変かわいそうな事になるので注意です。
(画面いっぱいから%を算出してくれます...。)

IE6、IE7、IE8、Firefox3.6、Opera10、Safari4(Win)で動作を確認済みです。
IE6に関してはborderのバグがあるため1、2px位大きさが前後するかも?

デモページ

デモページはこちら

ソース

html

CSS

.progress {
	background: url(../img/bg_progress.gif) top repeat-x;
	border: 1px solid #d3d3d3;
	line-height: 0;
	height: 46px;
}

その他の方法

バー自体の幅を固定(画像)にして背景色をつけたdivを伸ばす方法もあります。
特に使いまわす事がない場合はこっちの方が良いかもです。

(むしろこっちの方が全体的に秀逸ですね!精進精進......)

Simple CSS shiny progress bar technique

« リニューアルしました! | ホーム | 国内の商用無料、著作権表記・リンク不要の写真素材サイト »

トラックバック

http://pulltab.info/mt/mt-tb.cgi/44
ページの先頭に戻る