CSSのみで円グラフを実装：offset-pathとconic-gradientの作例プロンプト
CSSだけでここまでできる：円グラフ実装の新局面
2026年5月、CSS-Tricksに掲載された「Another Stab at the Perfect CSS Pie Chart… Sans JavaScript!」は、CSSだけで円グラフを表現する新たなアプローチを提示した。これまでJavaScriptライブラリ（Chart.jsやD3.js）に依存していた可視化が、純粋なCSSで現実的な品質に達したことを示す。特に、offset-pathプロパティを使ったラベル配置が実用的なレベルに到達しており、開発者は「描画」ではなく「マークアップ」の延長でデータ可視化を扱えるようになる。
伝統的なCSS円グラフとその限界
従来、CSSだけで円グラフを描くにはconic-gradientが使われてきた。背景に扇形のグラデーションを適用し、疑似要素で穴を開けてドーナツ型にするのが定番。この手法はデータ比率の変更をCSSカスタムプロパティで制御できる反面、ラベルやツールチップの配置が難しかった。conic-gradientはあくまで背景画像であり、各セクターに対応するDOM要素がない。そのため「あるセクターの中央にラベルを置く」といった操作がJavaScriptなしでは不可能だった。さらにアニメーションやインタラクションにも制約が多かった。
新手法の核心：offset-pathでラベルを正確に配置
今回の記事で注目すべきはoffset-pathプロパティの応用だ。offset-pathは元々、要素をパスに沿って移動させるアニメーション用プロパティだが、ラベルを円弧上の正確な位置に固定する用途に転用できる。具体的な実装手順は以下の通り。
conic-gradientでグラフの色分けを描画- 各セクターに対応するラベル要素を
position: absoluteで配置 offset-path: path(...)で円弧上のパスを定義offset-distanceで各ラベルの位置（角度に対応）を指定offset-rotate: autoでラベルの向きを常に円の外側に
この方法なら、各ラベルは独立したDOM要素として存在するため、ホバーやクリックによるスタイル変更もCSSだけで実現できる。JavaScriptはデータの受け渡し（CSSカスタムプロパティ経由）にのみ使うか、完全に排除可能だ。
offset-pathのAlmanac：2026年現在の実装状況
CSS-TricksのAlmanac「offset-path」ページによれば、本プロパティは2026年4月時点でBaselineに追加された。主要ブラウザ（Chrome 116+、Firefox 117+、Safari 17.4+）で安定して動作する。ただし、offset-path: path()のうち、弧（arc）や曲線を含むパスは一部のブラウザで描画にばらつきがある。ラベル配置では単純な円弧パスを使うため問題になりにくいが、複雑な形状を扱う際は注意が必要だ。
実務上のメリットと移行コスト
この手法の最大の利点は、外部ライブラリへの依存を減らせる点にある。軽量なページではJSのバンドルサイズを削減でき、特にCDNやキャッシュに制約がある環境で効果を発揮する。ただし、現時点では動的データの更新やアニメーションの滑らかさではChart.jsなどの専用ライブラリに劣る。複雑なインタラクション（ドリルダウン、絞り込み）が必要な場合は従来通りJSベースの選択が妥当。開発者は「静的または軽度の動的グラフ」に限定してこのCSS手法を採用すべきだ。
今後の展望：CSSでどこまで可視化できるか
offset-pathとconic-gradientの組み合わせは、円グラフ以外にも応用範囲が広い。レーダーチャートやゲージ、進行状況表示など、角度や半径に依存する可視化はCSSのみで構築可能になる。将来的にshape()関数やclip-pathの拡張が進めば、より複雑なチャート（棒グラフの斜め配置や極座標プロット）も標準化されるだろう。Baselineの定義が「安全に使える」から「十分に表現力がある」へとシフトしつつある証拠だ。
参照
この記事を書いた人
理人と理子
ギフプロのブログを運営している理人（リト）と理子（リコ）です！理は知性を表す漢字でもあるので、AIを連想させる名前にしてもらいました。ブログの内容はAIで作成しているところもありますが、読者の方にとって有意義な情報になるように完全自動化ではなく、人の目も通して作成しています！