スタイルシートによる棒グラフ

グラフ幅を % 指定できる棒グラフを CSS作ってみます。

divタグでグラフの表示領域、spanタグで棒グラフを指定

<div class="graph">
    <span class="bar" style="width: 36%;">36%</span>
</div>

グラフの表示領域に対してスタイルを設定

.graph {
    position: relative; /* IE is dumb */
    width: 300px;
    border: 1px solid #207870;
    padding: 2px;
}

棒グラフに対してスタイルを設定

.graph .bar {
    display: block;
    position: relative;
    background: #409890;
    text-align: center;
    color: #f0ffff;
    height: 2em;
    line-height: 2em;
}
.graph .bar span { position: absolute; left: 1em; }

結果