CSSのインラインブロック要素で作る100%積み上げグラフ

カテゴリ:CSSテクニック 2009年4月 1日 23:30

インラインブロック要素で作る100%積み上げグラフ サンプル画像

最近インラインブロックが大好きになってきました。なんていうか使いやすい。n

ということで、インラインブロックを使って、積み上げ棒グラフを作ってみました。

インラインブロック要素で作る100%積み上げグラフ デモ

▼EntryMore▼

では順を追って見て行きたいと思います。
ちなみに、インラインブロックをクロスブラウザで実現する方法は、以前の記事で書いているのでそちらを参考にしてください。
»不特定の数の横に並ぶブロック要素をセンタリングさせる

HTML ソース

HTML はそれほど複雑ではありません。ただ、注意点としてdiv#graph内にあるp 要素(グラフのゲージの部分ですね)同士には改行やその他の空白の扱いになるものを入れてはいけません。n

これは、div#graphが内包しているp 要素はインラインブロック要素となるため、余計な空白があるとそれがブラウザ上でも半角スペースとして反映してしまうため、きれいにグラフのゲージが並ばないためです。n

徐々に完成する様子を見ていきます。n

まず空の状態

CSS ソース01

ここは特に目新しいことはしていません。
グラフの背景となる要素をdivに設定しただけです。
ここへ、グラフの要素を入れていきます。
※表示している CSS はデモページのものを説明していますが、ここで表示しているものは複数回登場するためクラスに書き換えています。

要素を 1 つ入れた状態

test

CSS ソース02

ひとつ要素が追加されました。
今回の青い部分の指定はp.plusの部分です。インラインブロック化されたp 要素に対して背景と幅を設定します。
グラフ自体の背景となる部分(空の容器のような背景)と同じ高さの背景を切り出しておき、それを横にリピートしただけです。n

実はこれでほぼ完成です。p 要素はインラインブロック化しているので追加するだけでインライン要素と同じように横に並びます。n

あとは、追加した p 要素分だけクラスを設定し、それぞれに違う色の背景を指定すれば完成です。n

完成形

50%

30%

20%

使っている画像
グラフの背景画像01グラフの背景画像02グラフの背景画像03

CSS ソース03

上記が、色分けのために追加されたクラスです。それぞれ赤と黄色の背景を指定しています。もし要素を 3 つ以上使いたい場合は、p 要素の数とそれに対応するクラスを複製して追加するだけで済みます。n

動作確認は、IE6, 7, 8, Firefox2, 3, Opera9, Safari4, Google Chrome で行っています。
1 点注意として、Firefox2 では微妙に動作が異なります。それは、パーセンテージの部分のテキストがセンタリングされません。n

これは p 要素の幅指定が % の場合、どうやら内包しているブロック化した span 要素の幅を 100% にしてもそれに追従してくれないようです。
なので、Firefox2 でも同様に表示させるにはspan 要素自体にwidthpx 単位で指定してあげることでこの問題が解決できます。n

合わせて読むと役に立つかもなエントリー

この記事のカテゴリー一覧を見る⇒CSSテクニック

  • このエントリーをはてなブックマークに追加

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/133

トラックバック

円グラフや棒グラフをエクセルじゃない方法で簡単に作成する方法まとめ

グラフ作成と言えばエクセルが思い浮かびますが、エクセルを持ってない、または開くのが面倒ということもあるかもしれません。というわけで...

by日刊ウェブログ式 2010年5月24日 18:50

コメント

1 - あーる さん

はじめまして。このCSSとても綺麗で便利そうなのですが、nこのグラフを複数表示するとしたらどうすればいいのでしょう?nA50%30%20%B25%25%50%みたいな感じにしたのですが。n

2009年6月11日 10:22