今までグラフはイラストレーター、fireworksなどで作って画像にしてきましたが数値など定期的に変わったりするので毎回更新のたびに修正するのは手間がかかるなっと思ってました。
今回はCSSで横向きのグラフを作ってみました。
ページコンテンツ
HTML STEP1
|
1 2 3 |
<div class="BarChartBox"> <span class="bar1">36%</span> </div> |
divでくくってグラフの数値をspanで囲みます。
CSS STEP2
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.BarChartBox { width: 400px; margin-bottom: 10px; } .BarChartBox .bar1 { display: block; background: #006d97; text-align: center; color: #f0ffff; height: 2em; line-height: 2em; width:36%; } |
BarChartBoxはグラフの全体の横幅の設定値を入れます。私は400pxにしました。
クラスbar1にグラフを色（background）、グラフの横幅（width）を設定します。
このクラスにグラフの中の文字色を変えたり、文字のセンター寄せを左にしたりしてください。
複数のグラフもクラスを変えるだけで作れます。
まとめ
[サンプル] 横向きグラフ
簡単にCSSだけで横向きのグラフを作ることができました。
※firefox、クロームで動いていることを確認しております。
