CSS：
程序代码
<style>
#graphbox {
ボーダー：1pxソリッド＃e7e7e7;
パディング：10px;
幅：250px;
バックグラウンドカラー：＃f8f8f8;
マージン：5px 0;
}
#graphbox H2 {
色：＃666666;
フォントファミリー：arial;
フォントサイズ：18px;
font-weight：700;
}
。グラフ{
位置：相対;
バックグラウンドカラー：＃f0efef;
国境：1pxソリッド#cccccc;
パディング：2px;
フォントサイズ：13px;
font-weight：700;
}
.graph .orange、.green、.blue、.red、.black {
位置：相対;
テキストアライグ：左;
色：#ffffff;
高さ：18px;
ラインハイト：18px;
フォントファミリー：arial;
表示：ブロック;
}
.graph .orange {background-color：＃ff6600;}
.graph .green {background-color：＃66cc33;}
.graph .blue {background-color：＃3399cc;}
.graph .red {background-color：red;}
.graph .black {background-color：＃555;}
</style>
HTML：
程序代码
<div id = "graphbox">
<h2>バーグラフの例</h2>
<div class = "graph"> <span class = "orange" style = "width：35％;"> orange：35％</span> </div>
<div class = "graph"> <span class = "green" style = "width：90％;">緑：90％</span> </div>
<div class = "graph"> <span class = "blue" style = "width：75％;"> blue：75％</span> </div>
<div class = "graph"> <span class = "red" style = "width：85％;">赤：85％</span> </div>
<div class = "graph"> <span class = "black" style = "width：100％;"> black：100％</span> </div>
</div>