はじめに
前回の記事ではCSSの border-radius で作った円形要素を floating アニメーションで浮遊させる実装方法と、z-index の正しい使い方を解説しました。今回は**clip-path を使った斜めのセクション区切りや波形デザインの実装方法を解説します。単調な横一直線のセクション区切りに動きを出したい場合に非常に役立つテクニックです。また記事の後半では、コードを書いていると気になるインデントや余分なスペースを一瞬で整えてくれるVSCodeのフォーマッター（Shift + Alt + F）**についても解説します。第二十弾でも「長年の課題だった」と触れたインデント問題の解決策です。
1. clip-pathとは
1.1 clip-pathの概要
clip-path はCSSで要素の表示範囲を任意の形にクリッピング（切り抜き）するプロパティです。overflow: hidden と似ていますが、clip-path は四角形以外の多様な形状を指定できる点が大きな違いです。
| 形状関数 | 説明 | 用途 |
|---|---|---|
polygon() | 多角形。頂点の座標を指定 | 斜め・矢印・ダイヤ型 |
circle() | 円形 | 丸く切り抜く |
ellipse() | 楕円形 | 楕円で切り抜く |
path() | SVGパスで任意形状 | 波形・複雑な曲線 |
inset() | 内側を長方形で切り抜く | 角丸の調整 |
1.2 polygon()の座標の読み方
polygon() の座標は X軸 Y軸 の順で**左上を原点（0% 0%）**として指定します。
/* 四角形をそのまま表示（clip-pathなしと同じ） */
.box {
clip-path: polygon(
0% 0%, /* 左上 */
100% 0%, /* 右上 */
100% 100%, /* 右下 */
0% 100% /* 左下 */
);
}
/* 右下だけずらして斜めにする */
.slant {
clip-path: polygon(
0% 0%, /* 左上：そのまま */
100% 0%, /* 右上：そのまま */
100% 85%, /* 右下：少し上げる */
0% 100% /* 左下：そのまま */
);
}
2. 斜めのセクション区切りを作る
2.1 下辺を斜めにする
/* セクションの下辺を斜めにカットする */
.section-slant-bottom {
clip-path: polygon(
0% 0%,
100% 0%,
100% 88%, /* 右下を上げる */
0% 100% /* 左下はそのまま */
);
/* 必ずpadding-bottomを大きめにする（切り取られる分を補う） */
padding-bottom: 120px;
background-color: #1a1a2e;
}
2.2 上辺を斜めにする
/* セクションの上辺を斜めにカットする（前のセクションと合わせる） */
.section-slant-top {
clip-path: polygon(
0% 12%, /* 左上を下げる */
100% 0%, /* 右上はそのまま */
100% 100%,
0% 100%
);
/* 切り取られる上部の分をpadding-topで補う */
padding-top: 120px;
margin-top: -60px; /* 前のセクションと重ねる */
background-color: #0f3460;
}
2.3 上下を両方斜めにする（平行四辺形に近い形）
.section-slant-both {
clip-path: polygon(
0% 8%,
100% 0%,
100% 92%,
0% 100%
);
padding: 120px 0;
margin-top: -60px;
background: linear-gradient(135deg, #1a1a2e, #0f3460);
}
💡 隣り合うセクションの斜めの角度を揃えましょう： 左下から右上に向かう斜めなら、次のセクションも同じ傾きで始まるように座標を合わせると自然なつながりになります。
2.4 矢印型（V字）のセクション区切り
/* 下向きの矢印（Vシェイプ） */
.section-arrow-bottom {
clip-path: polygon(
0% 0%,
100% 0%,
100% 80%,
50% 100%, /* 中央の下端を頂点にする */
0% 80%
);
padding-bottom: 140px;
background-color: #1a1a2e;
}
3. 波形デザインを作る
3.1 polygon()で擬似的な波形を作る
polygon() に多くの点を打つことで曲線に近い波形が作れます。
/* 下辺に緩やかな波をつける */
.section-wave {
clip-path: polygon(
0% 0%,
100% 0%,
100% 88%,
95% 92%,
90% 94%,
85% 95%,
80% 94%,
75% 92%,
70% 88%,
65% 86%,
60% 88%,
55% 92%,
50% 95%,
45% 96%,
40% 95%,
35% 92%,
30% 88%,
25% 86%,
20% 88%,
15% 92%,
10% 94%,
5% 95%,
0% 93%
);
padding-bottom: 120px;
}
💡 点の数が多いほど滑らかな波になります： ただし点が多すぎると管理が大変になるため、緩やかな波なら8〜12点程度が実用的です。
3.2 path()とSVGで本格的な波形を作る
より滑らかな波形には path() 関数とSVGのベジェ曲線を組み合わせます。
/* SVGのpathコマンドをそのままclip-pathに使う */
.section-smooth-wave {
clip-path: path(
'M 0 0 L 1440 0 L 1440 320 Q 1200 280 960 300 Q 720 320 480 290 Q 240 260 0 300 Z'
);
}
ただし path() は座標が固定ピクセルになるため、レスポンシブ対応が必要な場合はSVGを別要素として配置する方法が柔軟です。
<!-- セクションの境界にSVGを配置するアプローチ -->
<section class="hero-section">
<div class="hero-content">
<!-- コンテンツ -->
</div>
<!-- 下部に波形のSVGを絶対配置 -->
<div class="wave-divider" aria-hidden="true">
<svg
viewBox="0 0 1440 80"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="none"
>
<path
d="M 0 40 Q 180 0 360 40 Q 540 80 720 40 Q 900 0 1080 40 Q 1260 80 1440 40 L 1440 80 L 0 80 Z"
fill="#0f3460"
/>
</svg>
</div>
</section>
.hero-section {
position: relative;
background-color: #1a1a2e;
padding-bottom: 80px; /* SVGの高さ分の余白 */
}
.wave-divider {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
}
.wave-divider svg {
display: block;
width: 100%;
height: 80px;
}
💡 SVGの fill の色を次のセクションの背景色に合わせましょう： 波形のSVGが次のセクションの背景色で塗りつぶされていると、波形がセクションの境界として自然に見えます。
4. clip-pathのアニメーション
4.1 polygon()をアニメーションさせる
clip-path は @keyframes でアニメーションできます。ただし頂点の数が同じでなければアニメーションが動作しないことに注意が必要です。
/* 波が動くアニメーション */
@keyframes wave-animation {
0% {
clip-path: polygon(
0% 0%, 100% 0%, 100% 85%,
75% 95%, 50% 85%, 25% 95%, 0% 85%
);
}
50% {
clip-path: polygon(
0% 0%, 100% 0%, 100% 95%,
75% 85%, 50% 95%, 25% 85%, 0% 95%
);
}
100% {
clip-path: polygon(
0% 0%, 100% 0%, 100% 85%,
75% 95%, 50% 85%, 25% 95%, 0% 85%
);
}
}
.animated-wave {
animation: wave-animation 4s ease-in-out infinite;
}
4.2 clip-pathでフェードインアニメーション
前回解説した fade-in-view と組み合わせて、スクロール時に要素が「スライドして現れる」演出ができます。
/* 左からスライドインするclip-pathアニメーション */
@keyframes slide-in-clip {
from {
clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
opacity: 0;
}
to {
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
opacity: 1;
}
}
.clip-slide-in {
animation: slide-in-clip 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
5. VSCodeフォーマッターでコードを整える
5.1 フォーマッターとは
ここで少し話題を変えます。第二十弾の振り返りで「インデントを揃えることが長年の課題だった」という話をしました。コードを手動で整形するのは時間がかかり、一貫性を保つのも大変です。そこで活躍するのがVSCodeのフォーマッターです。
手動でインデントを揃える前のコード：
.section{
position:relative;
background-color:#1a1a2e;
padding: 80px 0;
clip-path: polygon(0% 0%,100% 0%,
100% 88%,0% 100%);
}
↓ Shift + Alt + F を押すと一瞬で整形
.section {
position: relative;
background-color: #1a1a2e;
padding: 80px 0;
clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 0% 100%);
}
5.2 Shift + Alt + Fの使い方
| OS | ショートカット |
|---|---|
| Windows | Shift + Alt + F |
| Mac | Shift + Option + F |
| Linux | Ctrl + Shift + I |
- 整形したいファイルをVSCodeで開きます。
- Shift + Alt + F（Macは Shift + Option + F）を押します。
- ファイル全体のインデント・スペース・改行が自動的に整形されます。
💡 ファイルの種類によって使用するフォーマッターが変わります： HTMLは「HTML Language Features」・CSSは「CSS Language Features」・JavaScriptは「JavaScript Language Features」がVSCodeに標準搭載されています。
5.3 保存時に自動フォーマットする設定
毎回ショートカットを押さなくても、ファイルを保存するたびに自動的に整形するよう設定できます。
設定の手順：
- VSCodeで Ctrl + Shift + P（Mac：Command + Shift + P）を押してコマンドパレットを開きます。
- 「settings.json」と入力して「基本設定：ユーザー設定を開く（JSON）」を選択します。
- 以下の設定を追加します。
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.tabSize": 4,
"editor.insertSpaces": true
}
5.4 Prettierを導入するとさらに強力
VSCode標準のフォーマッターに加えてPrettierという拡張機能を導入するとより細かい整形が可能になります。
インストール手順：
- VSCodeの拡張機能パネル（Ctrl + Shift + X）を開きます。
- 「Prettier – Code formatter」を検索します。
- 「インストール」をクリックします。
/* プロジェクトのルートに .prettierrc ファイルを作成 */
{
"printWidth": 100,
"tabWidth": 4,
"useTabs": false,
"semi": true,
"singleQuote": true,
"trailingComma": "es5",
"bracketSpacing": true
}
| 設定項目 | 内容 |
|---|---|
printWidth | 1行の最大文字数（超えると折り返す） |
tabWidth | インデントのスペース数 |
useTabs | タブ文字を使うか（falseならスペース） |
semi | 文末にセミコロンを付けるか |
singleQuote | クォートをシングルにするか |
trailingComma | 末尾のカンマを付けるか |
💡 チームで開発するときは .prettierrc をGitで共有しましょう： 全員が同じフォーマット設定を使うことで「インデントが人によってバラバラ」という問題をゼロにできます。個人ブログやポートフォリオサイトでも習慣として持っておくと長期的に役立ちます。
⚠️ フォーマッターをかける前にGitでコミットしておきましょう： フォーマッターは既存コードの見た目を大きく変えることがあります。差分が大量に出て本来の変更が埋もれないよう、フォーマット前の状態をコミットしてから実行するのが安全です。
6. clip-pathのブラウザ対応確認
/* 主要ブラウザでの対応状況（2026年時点） */
/* Chrome・Firefox・Safari・Edge：すべて対応済み */
/* polygon()・circle()・ellipse()：広くサポート */
/* path()：一部古いブラウザで非対応 */
/* フォールバックを用意する場合 */
.section {
/* フォールバック：clip-pathが効かない場合は通常の矩形 */
background-color: #1a1a2e;
/* clip-pathが効く場合に適用 */
clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 0% 100%);
}
7. 実装チェックリスト
✓ 隣り合うセクションの斜めの傾きが一致しているか
✓ clip-pathで切り取られる部分を padding で補っているか
✓ アニメーションするclip-pathは頂点の数が同じか
✓ SVG波形の fill の色が次のセクションの背景色と一致しているか
✓ SVGの装飾要素に aria-hidden="true" を設定しているか
✓ prefers-reduced-motion でアニメーションを止める設定をしているか
✓ VSCodeに "editor.formatOnSave": true を設定したか
✓ Prettierをインストールして .prettierrc を作成したか
✓ フォーマッターをかける前にGitでコミットしたか
✓ Chrome DevToolsで表示崩れがないか確認したか
まとめ
今回はCSSの clip-path で斜めのセクション区切りや波形デザインを作る方法と、VSCodeのフォーマッターでコードを整える方法を解説しました。ポイントをまとめると：
clip-path: polygon()で頂点の座標を指定することで斜め・矢印・V字型のセクション区切りが作れる- 切り取られた部分は
paddingを大きめに取ることで補う - 滑らかな波形には
polygon()の多点指定かpath()関数・またはSVG要素を絶対配置する方法がある clip-pathの@keyframesアニメーションは頂点の数を揃えることが前提条件- VSCodeの Shift + Alt + F（Mac：Shift + Option + F）でファイル全体のインデントを一瞬で整形できる
"editor.formatOnSave": trueを設定すると保存するたびに自動整形される- PrettierとVSCode拡張機能を組み合わせると
.prettierrcでチーム全体のコードスタイルを統一できる
次の記事では、Chromeの拡張機能『素晴らしい画面の並べ替えとスクリーンショット』で作成したサイト全体を一枚のPDFにしてクライアントに確認してもらう方法や『Sider: すべてのAIとチャット: GPT-5, Claude, DeepSeek, Gemini, Grok』でAIにお手伝いしてもらう方法を紹介します。お楽しみに！
コメント