HTML・CSSのみで作る棒グラフのデザイン2選

2023/1/72023/1/7

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

横型の棒グラフ

基調色：#2589d0
項目1の値：60%
アニメーションなしあり

項目1: 60%
項目2: 70%
項目3: 80%

項目名と値が表示される、スタンダードな棒グラフ。自由に値を設定できるように、あえてインラインでグラフの幅を指定しています。グラフの数はお好みで調整してください。

<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>

.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;
}

横型の棒グラフ(背景色あり)

バーの色：#2589d0
背景色：#e6edf3
項目1の値：60%
アニメーションなしあり

項目1: 60%
項目2: 70%
項目3: 80%

<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>

.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;
}