Zenn
🌊

画像編集なし！波のアクセントを簡単に実装する方法

2021/01/23に公開
CSS
Scss
tech

おしゃれなサイトによくある、こんな感じの波をいい感じに付ける方法です。

案: 画像背景画像自体でつけておく

一見、一番かんたんな方法に見えますが、レスポンス対応する際に、波がいい感じに表示されず、困ります。

おすすめ: SVGで重なるように表示させる

今回の実装方法はこんな感じです

続く要素の背景色を入れることによって、成り立つ表示方法ですね。下に続く要素が複雑なデザインでない場合に有効です。

1. 波を手に入れる

いい感じに波を生成してくれる、便利なサイトがあります！

https://getwaves.io/

波の色は次に続く要素の色にします。

2. 波を表示したい要素に重ねる（position: absolute）

.PageHeader {
  position: relative;
}
.PageHeader_wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
}

3. SVGのPropertyをいじる

このままでは、SVGで追加した波はレスポンシブに縦横比を変更できないため、下のプロパティをSVGに追加します。

preserveAspectRatio="none"

4. レスポンシブ調整して終わり

お好みでサイズ調整すればいい感じになります。

.PageHeader_wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  @media (max-width: 750px) {
    height: 50px;
  }
}

波の高さが高い場合は、いらないところを削ろう

波の要素が高すぎて、波を表示したい要素が結構削られることがあります。そんな場合は各種デザインツールを使って、波のSVGのいらないところを削ってあげるのが有効です！

かんたんに波をつける方法を紹介しました！
ぜひ使ってみてください。

波を表示させたサンプルとして、最近リリースしたクイズアプリがあります！

リアルタイムなクイズ大会をひらけるアプリです！ぜひ使ってみてください😆

https://mondai.page/

Twitterもフォローもお願いします！

https://twitter.com/Yahimotto

Discussion