ISSEN 
目次
はじめに
みなさん、こんにちは！
「Webサイトの区切りをおしゃれにしたいけど、どうやって波型を作ればいいかわからない…」
そんなふうに悩んだことはありませんか？
フッターやセクションの境界を波型にするだけで、デザインの印象はグッと柔らかくなります。でも実際に実装しようとすると、画像を使うべきか、CSSだけでやるべきか、どの方法が一番きれいで軽いのか迷いますよね。
僕自身、今まで調べるのも面倒で画像で作ることが多かったです🐑
画像だとレスポンシブの制御が難しくなることも多いため、CSSやSVGを使う方法もおすすめです！
この記事では、SVGとCSSマスクを使った波型デザインの作り方を、初心者でもわかりやすい形で解説します。
波型の作り方
今回は、SVG + CSSマスクで作る方法を紹介します。
ポイントは「HTMLに余計なタグを書かず、CSSだけで実装すること」です。
実装イメージ
- フッターやセクションの上に波を追加
- 背景色と自然になじむ
- レスポンシブ対応でスマホでもきれいに表示
コード例
CSS
.footer {
width: 100%;
background-color: #fff;
position: relative;
/* 波の設定 */
--wave-w: 540px; /* 波の間隔 */
--wave-h: 60px; /* 波の高さ */
&::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: -1px;
height: var(--wave-h);
/* ページ背景と同じ色を塗る */
background: #fbf5f6;
/* 波型SVGをマスクとして適用 */
-webkit-mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 28' preserveAspectRatio='none'>\
<path d='M0,14 C43,0 87,28 130,14 C173,0 217,28 260,14 L260,28 L0,28 Z' fill='black'/>\
</svg>")
top / var(--wave-w) var(--wave-h) repeat-x;
mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 28' preserveAspectRatio='none'>\
<path d='M0,14 C43,0 87,28 130,14 C173,0 217,28 260,14 L260,28 L0,28 Z' fill='black'/>\
</svg>")
top / var(--wave-w) var(--wave-h) repeat-x;
z-index: 1;
}
}コードの解説
1. 擬似要素で波型を追加
::beforeや::afterを使うことで、HTMLの構造を崩さずにデザインだけ追加できます。
2. SVGマスクで高解像度を実現
マスクを使うことで、拡大・縮小してもきれいな波型を維持できます。
3. カスタムプロパティで柔軟に調整
CSS
--wave-w: 540px; // 波の幅
--wave-h: 60px; // 波の高さこの2つを変えるだけで、デザインに合わせて簡単に調整可能です。
上記コードで作成したフッターがこちらです。
フッター上部が波型になっていることがお分かりいただけるかと思います。
その他の波型の作り方
clip-pathを使う方法
CSS
.wave {
clip-path: path("M0,20 Q30,40 60,20 T120,20 V100 H0 Z");
}軽量ですが、複雑な形は難しいです。
background-imageで実装
CSS
.wave-bg {
background: url("wave.svg") repeat-x;
background-size: 540px 60px;
}SVGを画像として背景に設定する方法。
手軽ですが、マスクより自由度は低めです。
おわりに
CSSとSVGを組み合わせれば、シンプルなコードで美しい波型デザインが実装できます。
- おしゃれなセクション区切りを作りたい
- レスポンシブ対応したい
- コードはシンプルに保ちたい
そんな方には、この方法がおすすめです!
スポンサーリンク
