どうも！LSSです！！
ブログやWebサイトを構築されている皆様、ページ内に「円グラフ」を使いたくなった事はありますか？
自分は今のところありません。
が、もし必要となった場合…
- お絵描きソフトで描く
- Excelのグラフ機能を使って描く
など、他のソフトを使って描いて貼り付ける事が多いかもですが、実はCSSでお手軽に作成する事ができます。
円グラフ
コード
<div style="width: 200px; height: 200px; border-radius: 50%; background: conic-gradient(red 0% 43%,blue 43% 66%,yellow 66% 85%,green 85% 100%);"> </div>
わずかこれだけのコードで、円グラフが作れます^^
コード解説
分かりやすいように改行を入れてみました↓。
<div style="
width: 200px;
height: 200px;
border-radius: 50%;
background:
conic-gradient(
red 0% 43%,
blue 43% 66%,
yellow 66% 85%,
green 85% 100%
);"> </div>
width: 200px;
height: 200px;
幅（width）と高さ（height）を指定しています。
これが円グラフのサイズとなります。
ここではどちらも同じ200pxとしていますが、別々の値でもよく、その場合は楕円になります。
↑こんな感じ。（これは width: 300px; height: 150px; にしてみた例）
border-radius: 50%;
この指定で、完全に角がない円形（または楕円形）にしています。
background:
conic-gradient(
red 0% 43%,
blue 43% 66%,
yellow 66% 85%,
green 85% 100%
);
ここで、円グラフの色とパーセンテージを指定しています。
red 0% 43%,
は「赤で0%～43%までを塗りつぶす」という意味になり、
blue 43% 66%,
は「青で43%から66%までを塗りつぶす」という意味になります。
この例で言うと、「青」の内容は「66-43=23%分」という事になりますね。
色・％はグラフの内容に応じて好きに変更する事ができます。
※前の色の最後の%と、１つめの%が同じになるようにしてください。
※この例では分かりやすく「red」「blue」という色名での指定をしていますが、「#ff88cc」のようなカラーコード指定も可能です。
今回の例では４色で作っていますが、作りたい円グラフに応じて増やしても減らしてもOK！
ただ、この例のように「最後の色以外は最後にカンマを入れ、最後の色だけカンマをつけない」点にご注意ください。
あとがき
「お手軽（？）な円グラフの描き方」と題した記事ですが、ちょっと足し算しないといけない、というところはありますね。
それでも、別途ソフトを起動して作るよりはお手軽かな？と思いますが、いかがでしょうか？
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
