HTML・CSSのみでつくる円グラフのデザイン3選

2022/12/312023/1/1

HTML・CSSのみで実装する円グラフのスニペットをまとめました。「Chart.js」などのJavaScriptライブラリを使っておらず、カスタマイズしつつどれもコピペで簡単に利用することが可能です。

シンプルな円グラフ

スタンダード

グラフの色：#2589d0
背景色：#e2e2e2
割合：60%
割合の表示ありなし

60%

CSSの「conic-gradient」というプロパティ1つで描ける円グラフ。jsどころからSVGすら使わずに作れるお手軽さが特徴です。

<div class="pie-chart-001">
    <span>60%</span>
</div>

.pie-chart-001 {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto;
    border-radius: 50%;
    background-image: conic-gradient(#2589d0 60%, #e2e2e2 60% 100%);
}

.pie-chart-001 span {
    position: absolute;
    top: 50%;
    right: 25%;
    transform: translate(50%, -50%);
    color: #fff;
    font-weight: 600;
    font-size: 1.1em;
}

項目×2

項目1の色：#2589d0
項目2の色：#5ba9f7
背景色：#e2e2e2
項目1の割合：70%
項目2の割合：20%
凡例の有無ありなし

項目170%
項目220%

項目を2つ設定できるようにした円グラフ。右に並ぶ凡例のおかげで各項目が分かりやすくなってはいますが、こちらの有無に関してはお好みでどうぞ。

<div class="pie-chart-003">
    <div></div>
    <ol>
        <li><span>項目1</span>70%</li>
        <li><span>項目2</span>20%</li>
    </ol>
</div>

.pie-chart-003 {
    display: flex;
    justify-content: center;
    align-items: center;
}

.pie-chart-003 > div {
    width: 200px;
    height: 200px;
    margin: 0;
    border-radius: 50%;
    background-image: conic-gradient(#2589d0 70%, #5ba9f7 70% 90%, #e2e2e2 90% 100%);
}

.pie-chart-003 li {
    display: flex;
    list-style-type: none;
    align-items: center;
    font-size: .8em;
}

.pie-chart-003 li::before {
    display: inline-block;
    width: 1.2em;
    height: .8em;
    margin-right: 5px;
    content: '';
}

.pie-chart-003 li:nth-child(1)::before {
    background-color: #2589d0;
}

.pie-chart-003 li:nth-child(2)::before {
    background-color: #5ba9f7;
}

.pie-chart-003 span {
    margin-right: 10px;
    font-weight: 600;
}

ドーナツ型の円グラフ

スタンダード

グラフの色：#2589d0
背景色：#e2e2e2
割合：60%

円グラフの例

ドーナツのように、真ん中に穴を空けた円グラフ。グラフだけでなくテキストも目立たせたい場合におすすめです。

<div class="pie-chart-002">円グラフの例</div>

.pie-chart-002 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 200px;
    margin: 0 auto;
    border-radius: 50%;
    background-image: radial-gradient(#fff 55%, transparent 55%), conic-gradient(#2589d0 60%, #e2e2e2 60% 100%);
    font-weight: 600;
}