CSSで簡単に作る円グラフの作り方と使い方を解説！

はじめに
●CSSとは
●円グラフとは
●CSSを使って円グラフを作る方法
●円グラフにラベルを表示する方法
●円グラフのテキストスタイルを変更する方法
●円グラフを活用した情報の可視化
まとめ

はじめに

こんにちは！

CSSを使った円グラフのデザイン、興味ありませんか？

この記事では、円グラフの作成と活用方法をシンプルに、かつ実践的に解説します。

CSSの経験がない方も心配無用。

ステップバイステップのガイドとともに、誰でも手軽に実装できる方法をお伝えします。

皆さんのウェブデザインの幅を広げる一助となれば嬉しいです。

最後まで、お付き合いください！

●CSSとは

まずは、CSSとは何かについて簡単に説明します。

CSSとは、「Cascading Style Sheets」の略称で、Webページのレイアウトやデザインを指定するための言語です。

HTMLと同様にWebページを作成する上で欠かせない言語の一つです。

●円グラフとは

円グラフは、データを円形に表したグラフです。

各要素の割合を比較しやすく、一目で分かりやすく表示することができます。

Webページの中に円グラフを表示することで、見やすさや情報の分かりやすさを向上させることができます。

●CSSを使って円グラフを作る方法

では、CSSを使って円グラフを作る方法について説明します。

まずは、次のようなHTMLのコードを書いてください。

<div class="chart">
  <div class="chart__item chart__item--1"></div>
  <div class="chart__item chart__item--2"></div>
  <div class="chart__item chart__item--3"></div>
  <div class="chart__item chart__item--4"></div>
  <div class="chart__item chart__item--5"></div>
</div>

上記のコードでは、クラス名が「chart」という要素を作成し、その中に5つのクラス名が「chart__item」という要素を作成しています。

次に、CSSのコードを下記のように書いてください。

.chart {
  width: 200px;
  height: 200px;
  position: relative;
  border-radius: 50%;
}

.chart__item {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  clip: rect(0, 100px, 200px, 100px);
}

.chart__item--1 {
  background-color: #F44336;
  transform: rotate(0deg);
}

.chart__item--2 {
  background-color: #E91E63;
  transform: rotate(72deg);
}

.chart__item--3 {
  background-color: #9C27B0;
  transform: rotate(144deg);
}

.chart__item--4 {
  background-color: #2196F3;
  transform: rotate(216deg);
}

.chart__item--5 {
  background-color: #4CAF50;
  transform: rotate(288deg);
}

上記のCSSコードでは、まず「chart」クラスを持つ要素に対して、横幅と高さを200pxに指定しています。

また、「position: relative;」を指定することで、その要素内での相対的な位置指定が可能になります。

さらに、「border-radius: 50%;」を指定することで、円形に要素を表示することができます。

次に、「chart__item」というクラスを持つ要素に対して、位置指定に関するプロパティを指定しています。

「position: absolute;」を指定することで、親要素からの相対的な位置指定が可能になります。

さらに、「width: 100%;」「height: 100%;」を指定することで、要素全体を覆うように表示することができます。

「clip: rect(0, 100px, 200px, 100px);」は、要素を矩形にクリップするためのプロパティです。

最後に、各要素に対して色と回転角度を指定しています。

色は「background-color」プロパティを使い、角度は「transform: rotate()」プロパティを使用して指定しています。

これで、CSSを書き終えました。

円グラフが表示されるようになっているはずです。

ただし、このままでは、円グラフに合わせたラベルなどを表示することができません。

そのため、次にラベルの表示方法について説明します。

●円グラフにラベルを表示する方法

円グラフにラベルを表示するには、次のようにHTMLとCSSを書き換える必要があります。

<div class="chart">
  <div class="chart__item chart__item--1">
    <span class="chart__label">25%</span>
  </div>
  <div class="chart__item chart__item--2">
    <span class="chart__label">20%</span>
  </div>
  <div class="chart__item chart__item--3">
    <span class="chart__label">15%</span>
  </div>
  <div class="chart__item chart__item--4">
    <span class="chart__label">30%</span>
  </div>
  <div class="chart__item chart__item--5">
    <span class="chart__label">10%</span>
  </div>
</div>

上記のHTMLコードでは、各要素内に「chart__label」というクラス名を持つ要素を追加しています。

ここで表示されるテキストは、円グラフ上に表示されるラベルのテキストです。

これに対応するCSSは次のように書き換えてください。

.chart__item {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  clip: rect(0, 100px, 200px, 100px);
  transform-origin: 50% 50%;
}

.chart__label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.chart__item--1 {
  background-color: #F44336;
  transform: rotate(0deg);
}

.chart__item--2 {
  background-color: #E91E63;
  transform: rotate(72deg);
}

.chart__item--3 {
  background-color: #9C27B0;
  transform: rotate(144deg);
}

.chart__item--4 {
  background-color: #2196F3;
  transform: rotate(216deg);
}

.chart__item--5 {
  background-color: #4CAF50;
  transform: rotate(288deg);
}

上記のCSSコードでは、各要素に対して「transform-origin: 50% 50%;」を追加しています。

これは、回転の中心を中心点に変更するプロパティです。

また、「chart__label」クラスを持つ要素に対して、テキストを中央に表示するプロパティを指定しています。

これで、円グラフにラベルが表示されるようになっています。

ただし、これだけでは、円グラフ上に表示されるテキストの色やフォントサイズなどを変更することができません。

そのため、次の章で、テキストのスタイルを変更する方法について説明します。

●円グラフのテキストスタイルを変更する方法

円グラフ上のテキストのスタイルを変更するには、次のようにCSSを書き換えてください。

.chart__label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  font-weight: bold;
  color: #fff;
}

上記のCSSコードでは、「font-size」でフォントサイズ、「font-weight」で文字の太さ、「color」で文字色を指定しています。

このように、テキストのスタイルを指定することで、より見やすい円グラフを作成することができます。

●円グラフを活用した情報の可視化

現代のウェブデザインやアプリケーション開発において、情報を効果的に伝えるためのビジュアルエレメントとして円グラフは非常に役立つツールです。

円グラフは、情報をパーセンテージや比率として視覚的に表示することで、ユーザーがデータを瞬時に理解しやすくします。

それでは、円グラフの応用例を3つ紹介し、それぞれの実装方法とその詳細な説明を提供します。

○投票結果の可視化

アンケートや投票の結果を円グラフで表示することで、参加者や閲覧者は投票のトレンドや結果をすぐに理解することができます。

<!-- HTML -->
<div id="voteResult"></div>

// JavaScript
const voteData = {
  "選択肢A": 45,
  "選択肢B": 30,
  "選択肢C": 25
};

const chart = new Chart(document.getElementById("voteResult"), {
  type: 'pie',
  data: {
    labels: Object.keys(voteData),
    datasets: [{
      data: Object.values(voteData),
      backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
    }]
  }
});

このコードは、特定のアンケートの結果を表す円グラフを生成しています。

HTMLでは、divタグを使用して円グラフを表示する領域を確保します。

JavaScriptの部分では、Chartオブジェクトを使用して、アンケートの各選択肢とその投票数を円グラフとして表示しています。

この例では、選択肢A、B、Cの3つの選択肢があり、それぞれの色を指定しています。

○売上の割合の可視化

特定の期間の商品やサービスの売上を円グラフで表示することで、ビジネスの動向やトレンドを迅速に把握することが可能になります。

<!-- HTML -->
<div id="salesResult"></div>

// JavaScript
const salesData = {
  "商品A": 40,
  "商品B": 35,
  "商品C": 25
};

const chart = new Chart(document.getElementById("salesResult"), {
  type: 'pie',
  data: {
    labels: Object.keys(salesData),
    datasets: [{
      data: Object.values(salesData),
      backgroundColor: ['#FFD700', '#C0C0C0', '#CD7F32']
    }]
  }
});

上記のコードは、特定の商品の売上割合を表す円グラフを生成します。

HTML部分は円グラフの表示領域を確保し、JavaScript部分では各商品の売上データとそれに対応する色を指定して、円グラフを生成しています。

このようにして、ビジネスの各商品の売上の動向や比率を視覚的に把握することができます。

○スキルレベルの可視化

プロフィールページやポートフォリオサイトにおいて、自身のスキルセットや能力を円グラフで表示することで、訪問者に自分の強みや特技を効果的にアピールできます。

<!-- HTML -->
<div id="skillLevel"></div>

// JavaScript
const skillData = {
  "HTML": 90,
  "CSS": 85,
  "JavaScript": 80
};

const chart = new Chart(document.getElementById("skillLevel"), {
  type: 'pie',
  data: {
    labels: Object.keys(skillData),
    datasets: [{
      data: Object.values(skillData),
      backgroundColor: ['#E44D25', '#016FB9', '#F7DF1E']
    }]
  }
});

このコード例では、特定の技術や言語のスキルレベルを示す円グラフを生成しています。

HTML部分は円グラフの表示領域を確保し、JavaScript部分では各スキルのレベルとそれに対応する色を指定して、円グラフを生成しています。

このように、自分の技術や能力を視覚的に表すことで、ポートフォリオやプロフィールがより魅力的になります。