HTML・CSSのみで作る棒グラフのデザイン2選【アニメーション対応】
サイト内で複数の数値を比較し、それを図として可視化したい時ってありますよね。今回はそんな時におすすめな、HTML・CSSのみで作る棒グラフのデザインをまとめました。縦・横・積み上げなど様々な形にも対応しており、アニメーションを加えて描画することも可能です。
横方向の棒グラフ
スタンダード
デザインを調整する
HTMLをコピペする
<dl class="bar-chart-1">
<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>
CSSをコピペする
.bar-chart-1 {
font-size: .9em;
}
.bar-chart-1 > div {
display: flex;
align-items: center;
margin-bottom: 7px;
}
.bar-chart-1 dt {
width: 55px;
min-width: 55px;
}
.bar-chart-1 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;
}
背景色あり
デザインを調整する
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>
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: #f2f2f2;
}
.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;
}