▼EntryMore▼

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

HTML ソース

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

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

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

まず空の状態

CSS ソース01

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

要素を 1 つ入れた状態

CSS ソース02

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

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

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

完成形

使っている画像

CSS ソース03

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

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

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