グラフ HTML

グラフ HTML: CSS で魅力的なデータビジュアライゼーションを実現

データの視覚化は、情報を分かりやすく伝える上で非常に重要です。この記事では、HTMLとCSSを使って魅力的で応答性の高いグラフを作成する方法を学びます。JavaScriptライブラリを使わずに、円グラフ、棒グラフ、折れ線グラフなどをスタイリングするためのステップバイステップガイドとコード例を紹介します。

副題

1. CSS グラフの基礎

CSSを使ってグラフを作成する利点は、シンプルさ、パフォーマンス、アクセシビリティにあります。複雑なJavaScriptライブラリを必要とせず、軽量で高速なグラフを作成できます。また、HTMLとCSSだけで構築されるため、スクリーンリーダーなどの支援技術との互換性が高く、アクセシブルなグラフを実現できます。

要素	説明
コンテナ	グラフ全体を含む要素。幅、高さ、背景色などを設定します。
バー	棒グラフの各バーを表す要素。高さ、色、幅などを設定します。
セグメント	円グラフの各スライスを表す要素。色、角度などを設定します。

CSSのプロパティを使って、グラフ要素の視覚調整を行います。例えば、width、height、background-color、border-radiusなどを用いて、グラフのサイズ、色、形状などを変更できます。

2. 円グラフ

HTMLとCSSを使用して円グラフを作成するには、まず円形のコンテナを作成します。次に、conic-gradientを使って、円を複数のセグメントに分割します。各セグメントのサイズは、データのパーセンテージに基づいて調整します。


<div class="pie-chart">
  <div class="pie-segment segment-1"></div>
  <div class="pie-segment segment-2"></div>
  <div class="pie-segment segment-3"></div>
</div>

CSSでは、border-radiusプロパティを使って円形を作成し、conic-gradientを使ってセグメントを色分けします。各セグメントの角度は、データのパーセンテージに合わせて調整します。


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

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

.segment-1 {
  background-color: #f44336;
  transform: rotate(120deg);
}

.segment-2 {
  background-color: #2196f3;
  transform: rotate(200deg);
}

.segment-3 {
  background-color: #4caf50;
  transform: rotate(320deg);
}

さらに、CSSアニメーションを使って円グラフをアニメーション化し、データの変化をより動的に表現することもできます。

3. 棒グラフ

HTMLとCSSでシンプルな棒グラフを作成するには、まずグラフのコンテナを作成します。次に、各データポイントに対してバー要素を追加します。バーの高さは、データの値に応じて調整します。


<div class="bar-chart">
  <div class="bar" style="height: 80%;"></div>
  <div class="bar" style="height: 50%;"></div>
  <div class="bar" style="height: 100%;"></div>
</div>

CSSでは、heightプロパティを使ってバーの高さを設定します。データに基づいて動的に高さを調整するには、インラインスタイルを使用するか、CSS変数を使用します。


.bar-chart {
  width: 300px;
  height: 200px;
  display: flex;
  justify-content: space-between;
}

.bar {
  width: 20px;
  background-color: #2196f3;
}

複数のバーを配置するには、CSSグリッドまたはフレックスボックスを使用します。また、バー間のスペースを調整したり、ラベルや凡例を追加することもできます。

4. 折れ線グラフ

HTMLとCSSを使って折れ線グラフを作成するには、まずグラフのコンテナを作成します。次に、データポイントを線で結びます。線の作成には、linear-gradientを使用します。データポイントのマーカーとラベルを追加して、グラフをより見やすくすることもできます。


<div class="line-chart">
  <div class="line"></div>
  <div class="data-point" style="left: 20%; bottom: 30%;"></div>
  <div class="data-point" style="left: 50%; bottom: 70%;"></div>
  <div class="data-point" style="left: 80%; bottom: 50%;"></div>
</div>


.line-chart {
  width: 400px;
  height: 200px;
  position: relative;
}

.line {
  width: 100%;
  height: 2px;
  background-image: linear-gradient(to right, transparent 20%, #2196f3 20%, #2196f3 50%, transparent 50%);
}

.data-point {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #2196f3;
  position: absolute;
}

linear-gradientの開始位置と終了位置を調整することで、線の形状を動的に変更できます。また、データポイントの位置もデータに基づいて調整します。

5. レスポンシブデザインとアクセシビリティ

グラフをさまざまな画面サイズに対応させるには、レスポンシブデザインを取り入れる必要があります。メディアクエリを使用して、画面サイズに応じてグラフのサイズやレイアウトを調整します。例えば、小さな画面ではグラフを縦向きにしたり、フォントサイズを小さくしたりすることができます。

アクセシビリティにも配慮することが重要です。スクリーンリーダーユーザーがグラフの内容を理解できるように、ARIA属性を使用してグラフの情報を提供します。例えば、各データポイントの値をARIA属性で指定したり、グラフのタイトルや凡例をスクリーンリーダーで読み上げられるようにすることができます。また、色覚異常を持つユーザーにも配慮し、色だけで情報を伝えないようにしましょう。

6. CSS グラフの例とインスピレーション

現実世界のウェブサイトでは、CSSグラフが多様な方法で活用されています。例えば、ダッシュボード、レポート、インフォグラフィックなどで、データの視覚化に役立てられています。CSSグラフのインスピレーションを得るには、以下のサイトをご覧ください。

7. 結論

HTMLとCSSだけでも、魅力的で応答性の高いデータビジュアライゼーションを作成できます。JavaScriptライブラリを使用しないことで、シンプルさ、パフォーマンス、アクセシビリティを向上させることができます。この記事で紹介したテクニックを参考に、ぜひ独自のCSSグラフを作成してみてください。

CSSグラフに関するQ&A

Q1: CSSグラフはどのような場合に適していますか？

A1: CSSグラフは、シンプルで軽量なデータビジュアライゼーションを作成する場合に適しています。複雑なインタラクションやアニメーションが必要な場合は、JavaScriptライブラリを使用する方が良いでしょう。

Q2: CSSグラフのアクセシビリティを向上させるにはどうすればよいですか？

A2: ARIA属性を使用してグラフの情報をスクリーンリーダーに提供します。また、色だけで情報を伝えないようにし、色覚異常を持つユーザーにも配慮しましょう。

Q3: CSSグラフのインスピレーションを得るにはどうすればよいですか？

A3: CSS-TricksやCodePenなどのウェブサイトで、他の開発者が作成したCSSグラフの例を参考にしましょう。また、現実世界のウェブサイトでどのようにCSSグラフが使用されているかを観察するのも良いでしょう。

その他の参考記事:グラフ jquery