2026年6月6日

CSS円グラフ＆offset-pathプロンプト作例：2026年5月Web標準新機能

CSS Pie Chartが示す、JavaScript不要の具体策

2026年5月、Web標準に新たなCSS機能が加わった。中でも注目は、offset-pathプロパティのさらなる進化と、conic-gradientと組み合わせた円グラフの純粋CSS実装だ。CSS-Tricksが提示する作例は、従来JavaScriptに依存していたデータ可視化を、CSSのみで完結させる道筋を示している。

開発者にとって、この変化は単なる「円グラフの作り方」を超える。画面遷移やメディアクエリを超えた、パスベースのアニメーション制御が現実のものになった。Baseline定義が明確になった今、ブラウザ間の互換性リスクを減らしながら、表現の幅を広げられる。

offset-pathの実力：パスモーションを標準化する

offset-pathは、要素を任意のパスに沿って移動させるCSSプロパティ。2026年5月時点で、offset-path: path('M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80');のようなベジェ曲線を直接指定できる。また、offset-distanceやoffset-rotateと組み合わせれば、アニメーションの軌道と向きを細かく制御できる。

実務で考えると、ローディングアニメーションやグラフのデータポイント移動、キャラクターの軌跡表示に応用可能。例えば、@keyframes { from { offset-distance: 0%; } to { offset-distance: 100%; } }と書けば、SVGやCanvasを一切使わずにパス追跡アニメーションが実装できる。これは従来のtransform回転やtranslateでは難しかった、自然な曲線移動を実現する。

conic-gradientとの組み合わせで生まれる新しい表現

円グラフのCSS実装には、conic-gradientが中心的な役割を果たす。以下のコードは、CSS-Tricksの手法をベースにした実装例だ。

.pie {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    #ff6b6b 0deg 30deg,
    #4ecdc4 30deg 120deg,
    #45b7d1 120deg 360deg
  );
  /* offset-pathでパスモーションを追加 */
  offset-path: path('M100 20 A 80 80 0 0 1 180 100');
  animation: movePie 2s ease-in-out infinite alternate;
}
@keyframes movePie {
  from { offset-distance: 0%; }
  to { offset-distance: 100%; }
}

円グラフそのものの表示に加え、パスに沿って動かすことで、データの推移や強調表示を動的に表現できる。従来はJavaScriptとCanvasでやっていた処理を、CSSだけで実現できる点が大きい。

Baselineがもたらす安全な採用基準

2026年4月のBaseline再定義により、offset-pathは「全ブラウザがサポートした機能」として扱われている。SafariやFirefoxの最新版でも問題なく動作する。これにより、互換性を気にせず本番導入できる。開発者は「どのブラウザで動くか」ではなく「どの表現に使うか」に集中できる。

ただし、注意点もある。offset-pathはアニメーション性が強いため、アクセシビリティに配慮が必要。ユーザーが動きを嫌う場合、prefers-reduced-motionで無効化する設計を忘れてはならない。

次に起こりそうなこと

CSS Pie Chartの手法は、より複雑なチャート（ドーナツ、ゲージ、ファネル）への拡張が予想される。また、offset-pathとCSSネスト、@scroll-timelineの組み合わせで、スクロールに連動したパスアニメーションも現実的だ。JavaScript依存から脱却する流れが、これまで以上に加速する。

開発者の実務観点では、以下の点を押さえておきたい。

offset-pathのパス記法は、SVG pathの経験が活きる。事前にsvg-path-editorなどでパス形状を確認しておく
conic-gradientの色指定は、CSSカスタムプロパティで管理すると後から修正しやすい
Baseline対応状況は、web.dev/baselineで随時確認する。新機能追加時に更新される

2026年春のWeb標準は、CSSだけで完結する表現領域を急拡大している。chart.jsやD3.jsに頼らなくても、データの視覚化が可能になった。これを機に、CSSの可能性を再評価する価値がある。

参照

この記事を書いた人

理人と理子

ギフプロのブログを運営している理人（リト）と理子（リコ）です！理は知性を表す漢字でもあるので、AIを連想させる名前にしてもらいました。ブログの内容はAIで作成しているところもありますが、読者の方にとって有意義な情報になるように完全自動化ではなく、人の目も通して作成しています！