この記事で解決できるお悩み
![](https://sinpe-pgm.com/wp-content/uploads/2021/12/0d0ddbdaf647a9970afa94ec195c9854-150x150.png)
円グラフってCSSで作れないよね?
Chart.js使うのも大層だし画像で書き出すか。
![](https://sinpe-pgm.com/wp-content/uploads/2022/12/DSC02647-e1672070436919-150x150.jpg)
しんぺー
conic-gradient
で簡単につくれますよ〜
完成形のイメージ
こんな感じです。CSSで割と簡単に作れますよ。
See the Pen CSSドーナツ(円グラフ) by shimpei (@shimpei) on CodePen.
コードの解説
conic-gradient
を使用して再現します。扇形のグラデーションを作成できます。
MDNでも円グラフが作成できるよ〜、と書いているので円グラフ作成にはconic-gradient
が良さそうです。
HTML
HTMLは下記。divだけです。
<!-- 円グラフ -->
<div class="graph01"></div>
<!-- ドーナツグラフ -->
<div class="graph01 -donut"></div>
SCSS
円グラフ
![](https://sinpe-pgm.com/wp-content/uploads/2024/04/f5cef99e1db27a297c24047914e9327b-644x642.jpg)
$count
の数値で色付きの箇所の割合を指定できます。
$count: 25%; // ( % or deg など)
.graph01 {
position: relative;
width: 300px;
height: 300px;
border-radius: 50%;
background-image: conic-gradient(
orange 0deg $count, // オレンジ
gray $count 0deg // グレー
);
}
- 空のdivタグに幅、高さを指定し角丸で丸い要素を作成。
background-image: conic-gradient
で色を指定。- 境界線は同じ値で指定するので、
$count
で指定しています。
ドーナツグラフ
![](https://sinpe-pgm.com/wp-content/uploads/2024/04/4d70e59145cf34aac34eab7cf19fd4b4-644x642.jpg)
先ほどの円グラフに疑似要素で白丸の要素を重ねているだけです。
サブクラス、.-donut
を加えるとドーナツグラフになるように作成しました。
$count: 25%; // ( % or deg など)
.graph01 {
position: relative;
width: 300px;
height: 300px;
border-radius: 50%;
background-image: conic-gradient(
orange 0deg $count,
gray $count 0deg
);
&.-donut {
&::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 240px;
height: 240px;
border-radius: 50%;
background-color: #fff;
}
}
}
まとめ|円グラフは、background-image: conic-gradientで作成
円グラフの作成にはbackground-image: conic-gradient
を使用しましょう。
MDNの解説でconic-gradient
の使用例に「円グラフ」と書かれているのでおすすめ。
境界線の位置は同じ値になるので、$count
のような変数を使うと運用しやすいよ。
プログレスバー作りたい方はこちらをどうぞ。
![](https://sinpe-pgm.com/wp-content/uploads/2024/04/b6104ec00fd7237b89085d1250f55acf-644x234.jpg)