スマートフォンのモック
スタンダード
項目×2
スタンダード

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

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

シンプルな円グラフ

シンプルな円グラフのスタンダードバージョン

スタンダード

step1
デザインを調整する
  • 割合:60%
  • 割合の表示
60%

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

step2
HTMLをコピペする
HTML
<div class="pie-chart-001">
    <span>60%</span>
</div>
step3
CSSをコピペする
CSS
.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バージョン

項目×2

step1
デザインを調整する
  • 項目1の割合:70%
  • 項目2の割合:20%
  • 凡例の有無
  1. 項目170%
  2. 項目220%

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

step2
HTMLをコピペする
HTML
<div class="pie-chart-003">
    <div></div>
    <ol>
        <li><span>項目1</span>70%</li>
        <li><span>項目2</span>20%</li>
    </ol>
</div>
step3
CSSをコピペする
CSS
.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;
}

ドーナツ型の円グラフ

ドーナツ型の円グラフのスタンダードバージョン

スタンダード

step1
デザインを調整する
  • 割合:60%
円グラフの例

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

step2
HTMLをコピペする
HTML
<div class="pie-chart-002">円グラフの例</div>
step3
CSSをコピペする
CSS
.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;
}