


HTML・CSSのみで作る棒グラフのデザイン2選
サイト内で複数の数値を比較し、それを図として可視化したい時ってありますよね。今回はそんな時におすすめな、HTML・CSSのみで作る棒グラフのデザインをまとめました。縦・横・積み上げなど様々な形にも対応しており、アニメーションを加えて描画することも可能です。

横型の棒グラフ
step1
デザインを調整する
- 項目1の値:
step2
HTMLをコピペする
HTML
<dl class="bar-chart-001">
<div>
<dt>項目1</dt>
<dd style="width: 60%">60%</dd>
</div>
<div>
<dt>項目2</dt>
<dd style="width: 70%">70%</dd>
</div>
<div>
<dt>項目3</dt>
<dd style="width: 80%">80%</dd>
</div>
</dl>
step3
CSSをコピペする
CSS
.bar-chart-001 {
font-size: .9em;
}
.bar-chart-001 > div {
display: flex;
align-items: center;
margin-bottom: 7px;
}
.bar-chart-001 dt {
width: 55px;
min-width: 55px;
}
.bar-chart-001 dd {
margin: 0;
padding-right: 15px;
border-radius: 3px;
background-color: #2589d0;
color: #fff;
font-weight: 600;
line-height: 45px;
text-align: right;
white-space: nowrap;
}

横型の棒グラフ(背景色あり)
step1
デザインを調整する
- 項目1の値:
step2
HTMLをコピペする
HTML
<dl class="bar-chart-002">
<div>
<dt>項目1</dt>
<dd><span style="width: 60%">60%</span></dd>
</div>
<div>
<dt>項目2</dt>
<dd><span style="width: 70%">70%</span></dd>
</div>
<div>
<dt>項目3</dt>
<dd><span style="width: 80%">80%</span></dd>
</div>
</dl>
step3
CSSをコピペする
CSS
.bar-chart-002 {
font-size: .9em;
}
.bar-chart-002 > div {
display: flex;
align-items: center;
margin-bottom: 7px;
}
.bar-chart-002 dt {
width: 55px;
min-width: 55px;
}
.bar-chart-002 dd {
width: 100%;
margin: 0;
border-radius: 3px;
background-color: #e6edf3;
}
.bar-chart-002 span {
display: inline-block;
padding-right: 15px;
border-radius: inherit;
background-color: #2589d0;
color: #fff;
font-weight: 600;
line-height: 45px;
text-align: right;
white-space: nowrap;
}
項目名と値が表示される、スタンダードな棒グラフ。自由に値を設定できるように、あえてインラインでグラフの幅を指定しています。グラフの数はお好みで調整してください。