KikuchiCSSだけで円グラフを表現する6つの即席コードを紹介しています。近年、ブログでもビジュアルでデータを表現する重要性が高まっていますが、作るのが手間なので、なかなか図を用意してコンテンツを提供することができません。そんな人向けに、円グラフをCSSで表現するコードを紹介します。KAZUKI具体的なコードの説明は下記コースで説明しているので、そちらも確認してみてくださいね。https://idea-hack.com/course/39674/CSSだけで円グラフを作成するまずはCSSだけで円グラフを作成しましょう。CSSで0~180度を表現1CSSで0から180度まで対応可能な円グラフです。30度を表現しました。rotate(30deg);}CSSで0~180度を表現2角度を変えてみました。145度を表現しました。rotate(145deg);}CSSで181~360度を表現1181度以降に対応するには、CSSのカスタマイズが必要です。210度を表現しました。rotate(30deg);}CSSで181~360度を表現2同じようなコードで325度を再現しました。rotate(145deg);}CSSで0~360度を表現1これまでのコードでは180度の時点でCSSコードの書き換えが必要なので、すべての角度に共通のコードも用意しました。360度ではなく、0%から100%のような形式にしたほうが便利です。0%から100%対応の円を記述します。30%で記述してみましょう。inherit;}CSSで0~360度を表現2続いて、80%を表現します。inherit;}まとめ以上のように、CSSコードだけで簡単にシンプルな円グラフを記載することができます。CSSは2色までしか対応できず、3色以降はSVGを使う別の方式が必要になります。HACKHomeShareFollowTop。