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

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

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

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

💡 コーディングの練習なら模写修行！

無料教材もあります！

【こんな方におすすめ】

実務のレベル感を知りたい
プロの制作フローを学びたい
基礎学習中、もしくは終えたばかり
CSS設計やSCSSを使った書き方を学びたい

公式サイトを見る

コーディング教材の【模写修行】は他の教材と何が違うのか？

この記事の目次

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タグに関しては、下記の記事で詳しく紹介しています。

HTMLのsrcset属性や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は少し長くて書くのが面倒ですが、背景画像として入れることも出来ます。