【CSS】お手軽（？）な円グラフの描き方【小ネタ】 - Little Strange Software

どうも！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> わずかこれだけのコードで、円グラフが作れます^^ コード解説 分かりやすいように改行を入れてみ

[newgenworld]

お疲れ様です✨コメントありがとうございます🙇‍♂️病院は落ち着きますが、WiFiないんで細かい事何にも出来ません😅

[kefugahi]

なるほどそう言えば見たことあったような気がします。こうやって書くのですね。

[localnavi]

画像を作るよりも実際手軽だしサイズ変更も簡単で良いが、完全に視覚効果しかないので、divタグに「円グラフ　赤43％、青23％、黄19％、緑15％」というtitle属性を追加しておく方が親切。

[hukunekox]

円グラフも斜めにすると、おしゃれに見えるのは、私だけでしょうかww☺️