模写修行メディア

【HTM/CSS】svgで境界線を波線にする方法

キービジュアルや各セクションの境界線を、波線にしているサイトを見たことがある方は多いと思います。

おしゃれなデザインで採用されているケースが多く、実装する難易度が高いように感じてしまうかもしれませんが、実は凄く簡単です。

この記事では、svgで境界線を波線にする方法を紹介します。

👇 メンターやってます 👇

模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。

0からweb制作やプログラミングの勉強を始める方はもちろん、12ヶ月以上独学している方や既にお仕事をしている方にもご利用いただいています!

模写武者くんのアイコン
  • 独学に限界を感じている...
  • 何をどこまで勉強すれば良いかわからない...
  • 自分の書き方が正しいかわからない...
  • 検索しても解決しない問題が多い...
  • 転職や副業のアドバイスが欲しい...

このような方は、ぜひ下記のリンクからサービス詳細をご覧ください。個別説明会もお気軽にお申し込みください。

※ 少人数運営のため人数制限あり ※

詳しいサービス内容を見る

転職・独立成功者も出ています!

👆 メンターやってます 👆

この記事の目次

svgで境界線を波線にする方法

svgで境界線を波線にする方法を、具体的にコードを用いて紹介します。

svgの波線はGet Wavesを使って、生成しました。

Get Wavesは波線の『形 / カラー / 波の大きさ』などを設定すれば、svgの波線を生成してくれるジェネレーターです。もちろんIllustratorなどで自分で作っても良いです。

実装方法は下の3つを紹介します。

  • インラインsvgで入れる方法
  • imgタグで入れる方法
  • 背景画像で入れる方法

後述する理由より、1番目の『インラインsvgで入れる方法』がおすすめです。

今回は下記のように、PCとSPで違う形のsvgを入れることにします。

今回作るサンプルのsvgの波線

インラインsvgで入れる方法

<div class="svg-sample">
    <p class="text">インラインSVGで入れた場合</p>
    <div class="u-sp">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 152"><path fill="#d8dee9" fill-opacity="1" d="M0,96L80,112C160,128,320,160,480,149.3C640,139,800,85,960,74.7C1120,64,1280,96,1360,112L1440,128L1440,0L1360,0C1280,0,1120,0,960,0C800,0,640,0,480,0C320,0,160,0,80,0L0,0Z"></path></svg>
    </div>
    <div class="u-pc">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 152"><path fill="#d8dee9" fill-opacity="1" d="M0,96L30,112C60,128,120,160,180,149.3C240,139,300,85,360,69.3C420,53,480,75,540,74.7C600,75,660,53,720,42.7C780,32,840,32,900,48C960,64,1020,96,1080,101.3C1140,107,1200,85,1260,80C1320,75,1380,85,1410,90.7L1440,96L1440,0L1410,0C1380,0,1320,0,1260,0C1200,0,1140,0,1080,0C1020,0,960,0,900,0C840,0,780,0,720,0C660,0,600,0,540,0C480,0,420,0,360,0C300,0,240,0,180,0C120,0,60,0,30,0L0,0Z"></path></svg>
    </div>
</div>
.text {
    ...
    transform: translateY(1px);/* ←ブラウザによって隙間ができるので入れている */
}

.u-pc {
    display: none;
}

@media screen and (min-width: 768px) {
    .u-pc {
        display: block;
    }

    .u-sp {
        display: none;
    }
}

PCとSPの切り替えは、displayプロパティを使っています。

displayプロパティで切り替えると、ブラウザはどちらも読み込んでいることになるので、あまり良くありませんが、今回の例くらいであればパフォーマンスに影響することはほぼないです。

imgタグで入れる方法

<div class="svg-sample">
    <p class="text">imgタグで入れた場合</p>
    <picture>
        <source media="(max-width: 767px)" srcset="img/wave-sp.svg" />
        <img width="1440" height="152" src="img/wave-pc.svg" alt="" />
    </picture>
</div>
.text {
    /* インラインsvgで入れる方法と同じ */
}

pictureタグを使えば、PCとSPで画像の出しわけが出来ます。この場合、必要ないファイルは読み込まないので良いです。

pictureタグに関しては、下記の記事で詳しく紹介しています。

srcset/sizes属性やpictureタグを使ったレスポンシブイメージを解説

背景画像で入れる方法

<div class="svg-sample svg-sample-background-image">
    <p class="text">背景画像で入れた場合</p>
</div>
.text {
    /* インラインsvgで入れる方法と同じ */
}

.svg-sample-background-image::after {
    ...
    background-repeat: no-repeat;
    background-image: url(../img/wave-sp.svg);
}

@media screen and (min-width: 768px) {
    .svg-sample-background-image::after {
        background-image: url(../img/wave-pc.svg);
    }
}

HTMLはスッキリしています。CSSは少し長くて書くのが面倒ですが、背景画像として入れることも出来ます。

【駆け出しの方へ】独学に限界を感じてませんか?

プログラミングやデザインは独学可能ですが、ほとんんどの方が苦戦します。

↓このように感じていませんか?

  • 何をどこまで勉強すれば良いかわからない...
  • 自分の書き方が正しいかわからない...
  • 検索しても解決しない問題が多い...
  • 転職や副業するまでの道が見えない...

そんな問題を解決するために、模写修行やこのメディアを作ったエンジニア/デザイナー中心に、メンタリングサービスHello Mentorを始めました。

スクールのような大金は必要ありません。高額な費用は払いたくないけど、プロのサポートが欲しい方は、ぜひ下記のリンクからサービス詳細をご覧ください。

※ 少人数運営のため人数制限あり ※

詳しいサービス内容を見る

転職・独立成功者も出ています!

👆 メンターは全員現役エンジニア 👆

3つのsvgで境界線を波線にする方法の比較

3つのsvgで境界線を波線にする方法の比較

前述した3つの方法を比較しました。上のGIFはページをリロードした時の挙動です。

  • imgタグで入れる方法
  • 背景画像で入れる方法

この2つは、サイトの状況や閲覧環境によって、svgの部分が表示されるまで時間がかかることがあります。

一応DEMOを作りましたが、おそらく目視でわかるほどの差は出ないと思います。

  • 画像や動画を多用してるサイト
  • サーバーのスペックが低いサイト
  • ユーザーの閲覧環境が悪い

例えば、これらの場合、上のGIFのように一瞬遅れて見える可能性もあります。

注意!
上のGIFは、変化を見てもらうために、ディベロッパーツールでネットワーク環境をSlow 3Gにして動画を撮り、さらにそれをスロー再生してからGIFにしてます。そこまでしないと今回の場合、差がわかりません。

svgで境界線を波線にしている参考サイト

この記事で紹介した、『svgで境界線を波線にする方法』を使っている、参考サイトを紹介します。

株式会社Izul イズル

株式会社Izul イズル

とてもおしゃれなデザインです。キービジュアルだけでなく、トップページ下部のContactでもsvgが使われています。

株式会社Roots

株式会社Roots

こちらのサイトは、PCとSPで形の違うsvgを使っています。

Nord

Nord

サイト内の複数箇所でsvgの波線を使っています。

因みにNordは、おすすめのカラーパレットです。デザインが苦手な方は、ぜひ使ってみてください。

Milkdown

Milkdown

MilkdownはMarkdownを使って書けるエディタのフレームワークです。

独学に限界を感じていませんか?

現役エンジニアによるメンタリングサービス作りました!

模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。

👇 こんな方のためのサービスです。

  • 独学に限界を感じている...
  • 何をどこまで勉強すれば良いかわからない...
  • 自分の書き方が正しいかわからない...
  • 検索しても解決しない問題が多い...
  • 転職や副業のアドバイスが欲しい...

メンターを務めるのは、今も現役でコードを書いているエンジニアのみです。駆け出しの方やメンターだけをやっている方はいません。

高額な料金はかかりません。サブスク&入会金・解約料なしなので、リスクなく始められます。

少しでも興味がある方は、ぜひ下記のリンクからサービスサイトをご覧ください。個別説明会もお気軽にお越しください。(無理な営業等一切ございません!)

※ 少人数運営のため人数制限あり ※

詳しいサービス内容を見る

転職・独立成功者も出ています!

この記事を書いた人

Gakuのアイコン

Gaku / @gaku92014091

フリーランス8年を経て法人化(3期目)、業界歴は12年目。コンテンツ制作、ライティング、マーケティング、デザイン、コーディング、プログラミング(フロント)、幅広くやってます!webサービスを作るのが好き!

当メディア運営メンバーでメンターやってます!👉

詳しく見る

\Share/

模写修行のトップページのスクリーンショット
模写修行

実務レベルを体験するためのコーディング練習教材