キービジュアルや各セクションの境界線を、波線にしているサイトを見たことがある方は多いと思います。
おしゃれなデザインで採用されているケースが多く、実装する難易度が高いように感じてしまうかもしれませんが、実は凄く簡単です。
この記事では、svgで境界線を波線にする方法を紹介します。
💡 コーディングの練習なら模写修行!
この記事の目次
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は少し長くて書くのが面倒ですが、背景画像として入れることも出来ます。
3つのsvgで境界線を波線にする方法の比較
前述した3つの方法を比較しました。上のGIFはページをリロードした時の挙動です。
- imgタグで入れる方法
- 背景画像で入れる方法
この2つは、サイトの状況や閲覧環境によって、svgの部分が表示されるまで時間がかかることがあります。
一応DEMOを作りましたが、おそらく目視でわかるほどの差は出ないと思います。
- 画像や動画を多用してるサイト
- サーバーのスペックが低いサイト
- ユーザーの閲覧環境が悪い
例えば、これらの場合、上のGIFのように一瞬遅れて見える可能性もあります。
svgで境界線を波線にしている参考サイト
この記事で紹介した、『svgで境界線を波線にする方法』を使っている、参考サイトを紹介します。
株式会社Izul イズル
とてもおしゃれなデザインです。キービジュアルだけでなく、トップページ下部のContactでもsvgが使われています。
株式会社Roots
こちらのサイトは、PCとSPで形の違うsvgを使っています。
Nord
サイト内の複数箇所でsvgの波線を使っています。
因みにNordは、おすすめのカラーパレットです。デザインが苦手な方は、ぜひ使ってみてください。
Milkdown
MilkdownはMarkdownを使って書けるエディタのフレームワークです。
超実務向け!コーディングの練習が出来るサービス作りました 🎉
模写修行は実戦に沿った形で、コーディングの"練習"ができるサービスです。
こんな方におすすめ!
- 実務のレベル感を知りたい
- プロの制作フローを学びたい
- 何を考えながらコードを書くのか知りたい
- 基礎学習中、もしくは終えたばかり
- CSS設計やSCSSを使った書き方を学びたい
模写修行ではデザインデータ(FigmaとXD) / web上で見れる解説 / サンプルコードを提供しています。ご自身でデザインを見ながらコーディングに挑戦し、解説とサンプルコードで答え合わせ&さらに深く学ぶことができるサービスです。
他の書籍や教材との違いは、超初心者向け・学習用の書き方ではなく、実際の現場で通用する書き方や考え方にフォーカスしている点です。詳しくは下記の記事をご覧ください。
コーディング教材の【模写修行】は他の教材と何が違うのか?嬉しい声もいただいています!
自分のweb制作におけるコードの書き方、ファイル管理は模写修行さんから学ばせていただきました。独学の強い味方だと思いました。教材、メディアありがとうございました!
TwitterでDMいただきました!🙇
classの命名迷子・横並びレイアウト恐怖症だったけど、無料〜中級までいくつかやっていく中で、どんどん迷いが減っていって楽しかったです!解説記事もわかりやすい...!
Tweet
デザインきれいだし、解説とサンプルソースが付いて答え合わせしやすいところが良い。
Tweet
答え合わせ終わった。top-kvの実装方法に脱帽。そういうやり方があることを知れたことが大きい。。sass学びはじめたばかりなのでscssコードがとても参考になった。次からはscssでかく。
Tweet