https://idea-hack.com/blog/51942/
CSSでシンプルな円グラフを再現する6つの即席コード

CSSでシンプルな円グラフを再現する6つの即席コード

CSSだけで円グラフを表現する6つの即席コードを紹介しています。

近年、ブログでもビジュアルでデータを表現する重要性が高まっていますが、作るのが手間なので、なかなか図を用意してコンテンツを提供することができません。

そんな人向けに、円グラフをCSSで表現するコードを紹介します。

KAZUKI
具体的なコードの説明は下記コースで説明しているので、そちらも確認してみてくださいね。

CSSだけで円グラフを作成する

まずはCSSだけで円グラフを作成しましょう。

CSSで0~180度を表現①

CSSで0から180度まで対応可能な円グラフです。30度を表現しました。

Output
HTML
<div class="pie-1 mx-auto"></div>
CSS
.pie-1 {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #f5f5f5;
  background-image: linear-gradient(to right, transparent 50%, #74abdc 0);
}
.pie-1::before {
  content: '';
  display: block;
  margin-left: 50%;
  height: 100%;
  border-radius: 0 100% 100% 0 / 50%;
  background-color: inherit;
  -webkit-transform-origin: left;
          transform-origin: left;
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
}

CSSで0~180度を表現②

角度を変えてみました。145度を表現しました。

Output
HTML
<div class="pie-2 mx-auto"></div>
CSS
.pie-2 {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #f5f5f5;
  background-image: linear-gradient(to right, transparent 50%, #74abdc 0);
}
.pie-2::before {
  content: '';
  display: block;
  margin-left: 50%;
  height: 100%;
  border-radius: 0 100% 100% 0 / 50%;
  background-color: inherit;
  -webkit-transform-origin: left;
          transform-origin: left;
  -webkit-transform: rotate(145deg);
          transform: rotate(145deg);
}

CSSで181~360度を表現①

181度以降に対応するには、CSSのカスタマイズが必要です。210度を表現しました。

Output
HTML
<div class="pie-3 mx-auto"></div>
CSS
.pie-3 {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #f5f5f5;
  background-image: linear-gradient(to right, transparent 50%, #74abdc 0);
}
.pie-3::before {
  content: '';
  display: block;
  margin-left: 50%;
  height: 100%;
  border-radius: 0 100% 100% 0 / 50%;
  background-color:#74abdc;
  -webkit-transform-origin: left;
          transform-origin: left;
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
}

CSSで181~360度を表現②

同じようなコードで325度を再現しました。

Output
HTML
<div class="pie-4 mx-auto"></div>
CSS
.pie-4 {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #f5f5f5;
  background-image: linear-gradient(to right, transparent 50%, #74abdc 0);
}
.pie-4::before {
  content: '';
  display: block;
  margin-left: 50%;
  height: 100%;
  border-radius: 0 100% 100% 0 / 50%;
  background-color:#74abdc;
  -webkit-transform-origin: left;
          transform-origin: left;
  -webkit-transform: rotate(145deg);
          transform: rotate(145deg);
}

CSSで0~360度を表現①

これまでのコードでは180度の時点でCSSコードの書き換えが必要なので、すべての角度に共通のコードも用意しました。

さらにこれまでは360度までを表現するためのコードを記述しましたが、実際には0 ~ 360度ではなく、0%から100%のような形式にしたほうが便利です。

なので、0%から100%対応の円を記述します。

まずは30%で記述してみましょう。

Output
30%
HTML
<div class="pie-5 mx-auto" style="animation-delay: -30s;">30%</div>
CSS
@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(0.5turn);
            transform: rotate(0.5turn);
  }
}
@keyframes spin {
  100% {
    -webkit-transform: rotate(0.5turn);
            transform: rotate(0.5turn);
  }
}
@-webkit-keyframes background {
  50% {
    background: #74abdc;
  }
}
@keyframes background {
  50% {
    background: #74abdc;
  }
}
.pie-5 {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: #f5f5f5;
  background-image: linear-gradient(to right, transparent 50%, #74abdc 50%);
}
.pie-5::before {
  content: '';
  display: block;
  margin-left: 50%;
  height: 100%;
  background-color: inherit;
  border-radius: 0 100% 100% 0 / 50%;
  -webkit-transform-origin: left;
          transform-origin: left;
  -webkit-animation: spin 50s linear 2, background 100s step-end 1;
          animation: spin 50s linear 2, background 100s step-end 1;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-delay: inherit;
          animation-delay: inherit;
}

CSSで0~360度を表現②

続いて、80%を表現します。

Output
80%
HTML
<div class="pie-6 mx-auto" style="animation-delay: -80s;">80%</div>
CSS
@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(0.5turn);
            transform: rotate(0.5turn);
  }
}
@keyframes spin {
  100% {
    -webkit-transform: rotate(0.5turn);
            transform: rotate(0.5turn);
  }
}
@-webkit-keyframes background {
  50% {
    background: #74abdc;
  }
}
@keyframes background {
  50% {
    background: #74abdc;
  }
}
.pie-6 {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: #f5f5f5;
  background-image: linear-gradient(to right, transparent 50%, #74abdc 50%);
}
.pie-6::before {
  content: '';
  display: block;
  margin-left: 50%;
  height: 100%;
  background-color: inherit;
  border-radius: 0 100% 100% 0 / 50%;
  -webkit-transform-origin: left;
          transform-origin: left;
  -webkit-animation: spin 50s linear 2, background 100s step-end 1;
          animation: spin 50s linear 2, background 100s step-end 1;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-delay: inherit;
          animation-delay: inherit;
}

まとめ

以上のように、CSSコードだけで簡単にシンプルな円グラフを記載することができます。しかし、CSSは2色までしか対応できず、3色以降はSVGを使う別の方式が必要になります。