【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を入れることにします。PCとSP共通にすると、どちらかで波が小さすぎたり、違和感が出ることが多いです。

インライン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 {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    padding: 40px 0;
    background-color: #d8dee9;
    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 {
    content: "";
    display: block;
    background-repeat: no-repeat;
    background-image: url(../img/wave-sp.svg);
    height: 0;
    width: 100%;
    padding-bottom: 10.55555%; /* = 152 / 1440 */
}

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

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

【初学者・中級者の方】独学に限界を感じてませんか？

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

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