CSSだけでデザインする棒グラフの作成方法

以下ソースです。

XHTML

<div id="graphbox">
<h2>Student Grades</h2>
<div class="graph"><strong class="orangebar" style="width: 55%;">Steve: 55%</strong></div>
<div class="graph"><strong class="greenbar" style="width: 90%;">Linda: 90%</strong></div>
<div class="graph"><strong class="bluebar" style="width: 75%;">Bill: 75%</strong></div>
<div class="graph"><strong class="orangebar" style="width: 32%;">Jill: 32%</strong></div>
<div class="graph"><strong class="greenbar" style="width: 98%;">Jose: 98%</strong></div>
<div class="graph"><strong class="greenbar" style="width: 85%;">George: 85%</strong></div>
<p class="footnote">Green: Exceptional. Blue: Marginal. Orange: Needs Improvement.</p>
</div>

CSS

graphbox {
  border: 1px solid e7e7e7;
  padding: 20px 20px;
  width: 250px;
  margin-right:10px;
  float:left;
  background: f8f8f8;
}

graphbox h2{
  color: 666666;
  font-family:Arial, sans-serif;
  font-size:1.1em;
  padding-bottom: 0.3em;
  font-weight:bold;
  text-align:center;
}

graphbox p {
  color: 888888;
  font-family:Arial, sans-serif;
  font-size:0.8em;
  padding-top: 0.3em;
  text-align:left;
}

.graph {
  position: relative;
  background: F0EFEF url(images/graphpaper.gif) left;
  border: 1px solid cccccc;
  padding: 2px 2px;
}

.graph .orangebar, .greenbar, .bluebar {
  text-align: left;
  color: ffffff;
  height: 1.8em;
  line-height: 1.8em;  
  font-family:Arial, sans-serif;
  display: block;
  position: relative;
}

.graph .orangebar {
  background: ff6600;
}

.graph .greenbar {
  background: 66CC33;
}

.graph .bluebar {
  background: 3399CC;
}

.graph .bar span {
  position: absolute;
  left: 1em;
}

.graph .orangebar, .greenbar, .bluebar {
  text-align: left;
  color: ffffff;
  height: 1.8em;
  line-height: 1.8em;
  font-family:Arial, sans-serif;
  display: block;
  position: relative;
}

詳しくはコチラから