模写修行メディア

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

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

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

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

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

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

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

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


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

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

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


今回作るサンプルの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で画像の出しわけが出来ます。この場合、必要ないファイルは読み込まないので良いです。

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

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

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を使って書けるエディタのプラグインです。デザインは上で紹介した、Nordを使っているようです。

コーディングの練習が出来るサービスを作りました 🎉

模写修行はこんな方におすすめ!

  • プロの制作フローを学びたい
  • どんなことを考えながら書くのか知りたい
  • 実践的な練習がしたい

【初級編】はこんな方におすすめ!

  • 基礎学習中、もしくは終えたばかり
  • サイト制作経験が5サイト未満 (実際の案件でなくてもOK)

【中級編】はこんな方におすすめ!

  • CSS設計を意識したコーディングを学びたい
  • SCSSを使った書き方を学びたい (解説はSCSSを使わない前提でします)

模写修行ではデザインデータ(XD) / web上で見れる解説 / サンプルコードを配布しています。ご自身でデザインを見ながらコーディングに挑戦し、解説とサンプルコードで深く学ぶことができるサービスです。

模写修行を見る

この記事を書いた人

Gakuのアイコン

Gaku / @gaku92014091

大学・大学院時代から個人で仕事をする。卒業後5年間のフリーランス期を経て、法人化。マーケティング、デザイン、コーディング、プログラミング(フロント)、幅広くやります。webサービス作るのが好き!

\Share/

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

駆け出しエンジニアのためのコーディング練習教材