shape()関数の登場 — CSSだけで図形を描く時代へ
Webで複雑な図形を表現するには、これまでSVGの <path> 要素やCSS clip-path: path() が主な選択肢でした。しかし、SVGパスの構文（M 0 0 L 100 50 ...）は人間が読み書きするには難解で、レスポンシブ対応も困難という課題がありました。
2026年、CSS Shapes Module Level 2で定義された shape()関数 が主要ブラウザで利用可能に。% や rem、calc() が使えるレスポンシブ対応の図形描画が、CSSだけで実現できるようになりました。
ブラウザ対応状況
2026年2月にBaseline 2026に到達し、主要ブラウザすべてで利用可能です。
| ブラウザ | 対応バージョン |
|---|---|
| Chrome / Edge | 135以上 |
| Firefox | 148以上 |
| Safari | 18.4以上 |
Interop 2026の重点項目にも含まれており、クロスブラウザの安定実装が進んでいます。
基本構文
shape( [<fill-rule>]? from <起点>, <コマンド>[, ...] )clip-path または offset-path プロパティで使用します。
.element {
clip-path: shape(from 0% 0%, line to 100% 0%, line to 100% 100%, close);
}シェイプコマンド一覧
| コマンド | 機能 | 例 |
|---|---|---|
line to/by | 直線を描く | line to 100% 50% |
hline to/by | 水平線 | hline to 80% |
vline to/by | 垂直線 | vline to 100% |
curve to/by ... with | ベジェ曲線 | curve to 100% 50% with 50% 0% |
smooth to/by | 滑らかな連続曲線 | smooth to 80% 60% |
arc to/by ... of | 楕円弧 | arc to 50% 80% of 30% |
move to/by | 描画せずに移動 | move to 20% 20% |
close | パスを閉じる | close |
to（絶対座標） と by（相対座標） を切り替えられるのが便利なポイント。相対座標を使えば、基準点からの差分で図形を定義できます。
path()との決定的な違い
| 特徴 | shape() | path() |
|---|---|---|
| 単位 | px, %, rem, calc()等 | pxのみ |
| レスポンシブ | 対応 | 非対応 |
| CSS数学関数 | calc(), max(), abs()対応 | 非対応 |
| 構文 | CSS標準で読みやすい | SVGパス構文（難読） |
| アニメーション | カスタムプロパティで容易 | 制限あり |
最大の違いはレスポンシブ対応です。path() はピクセル値しか使えないため、画面サイズに応じた図形の変形ができませんでした。shape() では % や vw が使えるので、コンテナに追従する柔軟な図形が描けます。
実装例
波形クリッピング
.wave-section {
clip-path: shape(
from 0% 20%,
curve to 100% 20% with 25% 0% / 75% 40%,
vline to 100%,
hline to 0%,
close
);
}ヘッダーやセクションの境界を波形にするパターン。curve コマンドの制御点を調整するだけで波の形状を変更できます。
ハート型
.heart {
clip-path: shape(
from 50% 30%,
arc to 25% 25% of 25% cw,
arc to 50% 60% of 40% cw,
arc to 75% 25% of 40% cw,
arc to 50% 30% of 25% cw,
close
);
background: #e74c3c;
width: 200px;
aspect-ratio: 1;
}arc コマンドで円弧を組み合わせてハート型を構成。% で定義しているため、width を変えるだけでサイズが追従します。
吹き出し
.speech-bubble {
clip-path: shape(
from 0% 0%,
hline to 100%,
vline to 70%,
line to 20% 70%,
line to 10% 100%,
line to 15% 70%,
hline to 0%,
close
);
background: #f0f0f0;
padding: 1.5rem;
padding-bottom: 3rem;
}line コマンドで三角形の「しっぽ」部分を描画。チャットUIやツールチップに応用できます。
フォールバック戦略
未対応ブラウザ向けのフォールバックは @supports で検出できます。
/* 対応ブラウザ向け */
@supports (clip-path: shape(from 0 0, move to 0 0)) {
.element {
clip-path: shape(from 0% 0%, /* ... */);
}
}
/* 未対応ブラウザ向け */
@supports not (clip-path: shape(from 0 0, move to 0 0)) {
.element {
border-radius: 50%;
}
}2026年4月現在、Baseline 2026に到達しているため、最新バージョンのブラウザであれば問題なく利用できます。ただし、古いバージョンのサポートが必要な場合はフォールバックを用意しましょう。
アニメーションとの組み合わせ
CSSカスタムプロパティと組み合わせることで、図形のアニメーションも実現できます。
@property --wave-height {
syntax: '<percentage>';
inherits: false;
initial-value: 20%;
}
.animated-wave {
clip-path: shape(
from 0% var(--wave-height),
curve to 100% var(--wave-height) with 25% 0% / 75% 40%,
vline to 100%,
hline to 0%,
close
);
transition: --wave-height 0.5s ease;
}
.animated-wave:hover {
--wave-height: 10%;
}まとめ
CSS shape() は、Web上の図形表現における大きなパラダイムシフトです。
- SVGの知識が不要: CSSの標準的な構文で複雑な図形を定義
- レスポンシブ対応:
%・rem・calc()が使えるため、画面サイズに追従 - Baseline 2026到達: 主要ブラウザすべてで利用可能
- アニメーション対応: CSSカスタムプロパティとの組み合わせで動的な図形も実現
デザインカンプにある「ちょっと凝った図形」を実装するとき、もうSVGエディタを開く必要はないかもしれません。まずは clip-path: shape(...) で簡単な図形から試してみてください。
Web標準の進化に関連して、Webアクセシビリティ対応ガイドも合わせて確認しておくと、アクセシブルなデザインと装飾の両立に役立ちます。
