CSS:
程序代
<スタイル>
#グラフボックス{
ボーダー:1px ソリッド #e7e7e7;
パディング:10ピクセル;
幅:250ピクセル;
背景色:#f8f8f8;
マージン:5px 0;
}
#グラフボックスh2{
色:#666666;
フォントファミリー:Arial;
フォントサイズ:18px;
フォントの太さ:700;
}
。グラフ{
位置:相対;
背景色:#F0EFEF;
ボーダー:1px ソリッド #cccccc;
パディング:2px;
フォントサイズ:13px;
フォントの太さ:700;
}
.graph .orange、.green、.blue、.red、.black{
位置:相対;
テキスト整列:左;
色:#ffffff;
高さ:18ピクセル;
行の高さ:18px;
フォントファミリー:Arial;
表示:ブロック;
}
.graph .orange{背景色:#ff6600;}
.graph .green{背景色:#66CC33;}
.graph .blue{背景色:#3399CC;}
.graph .red{背景色:赤;}
.graph .black{背景色:#555;}
</スタイル>
HTML:
程序代
<div id="グラフボックス">
<h2>棒グラフの例</h2>
<div class="graph"><span class="orange" style="width:35%;">オレンジ:35%</span></div>
<div class="graph"><span class="green" style="width:90%;">緑:90%</span></div>
<div class="graph"><span class="blue" style="width:75%;">青:75%</span></div>
<div class="graph"><span class="red" style="width:85%;">赤:85%</span></div>
<div class="graph"><span class="black" style="width:100%;">黒:100%</span></div>
</div>