CSS Stockを表示するスマートフォンのモック
デザインの例1デザインの例2デザインの例3

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

HTML・CSSのみで実装する円グラフのスニペットをまとめました。JavaScriptライブラリを使わず、どれもコピペで簡単に利用することが可能です。

シンプルな円グラフ

スタンダード

スタンダード

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

  • 割合の表示

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

項目×2

項目×2

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

  • 凡例

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

ドーナツ型の円グラフ

スタンダード

スタンダード

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

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