JavaScriptを使わず、HTML＋CSSだけで棒グラフを作る方法

Webサイトで売上やアクセス数などのデータを視覚的に見せたい場合、
グラフを使うと一目で理解できます。
多くの人は「Chart.js」などのJavaScriptライブラリを使いますが、
今回はあえてJavaScriptを使わず、HTMLとCSSだけで棒グラフを作る方法をご紹介します。

1 HTMLコード

<div class="chart">
  <div class="bar" data-value="80"><span>1月</span></div>
  <div class="bar" data-value="140"><span>2月</span></div>
  <div class="bar" data-value="100"><span>3月</span></div>
  <div class="bar" data-value="160"><span>4月</span></div>
  <div class="bar" data-value="200"><span>5月</span></div>
</div>

各棒（bar）には data-value 属性で高さを指定しています。
この値に応じてCSSで高さを制御します。

2 汎用CSS

/* -----------------------------
 * 棒グラフ
----------------------------- */

.chart {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 220px;
  margin: 30px 0;
}

.bar {
  width: 40px;
  background: #4caf50;
  text-align: center;
  color: #fff;
  font-weight: bold;
  border-radius: 5px 5px 0 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  transition: height 0.5s;
}

.bar span {
  margin-bottom: 5px;
  font-size: 0.9em;
}

/* 棒の高さを data-value 属性で制御 */
.bar[data-value="80"]  { height: 80px; }
.bar[data-value="100"] { height: 100px; }
.bar[data-value="140"] { height: 140px; }
.bar[data-value="160"] { height: 160px; }
.bar[data-value="200"] { height: 200px; }

これでシンプルな棒グラフが表示されます。
背景色やフォントは自由にカスタマイズできます。

3 ポイント

• data-value の数値を変更するだけで高さを調整できます。
• background を変えると、グラフの色も変更可能。
• CSSの transition を使うと、ホバー時のアニメーションも簡単に追加できます。

/* -----------------------------
 * 棒グラフ　ホバー時のアニメーション
----------------------------- */

.bar:hover {
  opacity: 0.8;
  transform: scale(1.05);
}

4 完成イメージ

5 まとめ

JavaScriptを使わなくても、HTMLとCSSだけで棒グラフを表現できます。
データが静的な場合（毎月の固定データなど）なら、この方法はとても軽くて高速です。
動的データにしたい場合は、Chart.jsなどのライブラリを検討してみましょう。