DEMO

HTML

		<dl class="bar">
    <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>
    <div>
        <dt>項目4</dt>
        <dd style="width: 100%">100%</dd>
    </div>
</dl>	

		

HTML説明

グラフ数値の増減方法
「各数値（4.8.12.16行目）」を任意の数値に書き換えてください。
1つのグラフにつき2つ同じ数値を入れてください。

グラフ自体の増減方法
「<div>~</div>（2~5.6~9.10~13.14~17行目）」が1つのグラフです。
減らす場合は該当範囲を削除。増やす場合はコピー＆ペーストしてください。

CSS

		<style>
.bar {
    font-size: .9em;
    max-width: 580px;
    margin: 0 auto;
}

.bar > div {
    display: flex;
    align-items: center;
    margin-bottom: 7px;
}

.bar dt {
    width: 55px;
    min-width: 55px;
}

.bar 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;
}
</style>
		

CSS説明

グラフの色の変更方法
「色コード（23行目）」を任意の色に書き換えてください。