CSSでやさしい雰囲気に！波形マスク×ストライプ背景のヘッダーアレンジ

2025年9月3日

ホームページの第一印象を大きく左右するのが「ヘッダー部分」です。
少し工夫を加えるだけで、サイト全体の雰囲気をガラッと変えることができます。

今回ご紹介するのは、ヘッダー画像を「波型に切り抜いて」表示し、ページ全体に「淡いストライプ背景」を敷くCSSアレンジです。
やさしく親しみやすい雰囲気を演出できるので、明るさや柔らかさを伝えたいときにおすすめのテクニックです。

オリジナルCSSの編集手順

ステップ1：ヘッダー装飾用のCSSを用意する

#header{

background:none;

}

#header .container{

width: 100%;

height: 400px;

background: url('https://s3-ap-northeast-1.amazonaws.com/img.l-kit.com/test-d21/1749104022091565800.jpg') no-repeat center center;

background-size: cover;

-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'><path d='M720,20 C1080,-30 1440,70 1280,130 C1120,190 960,170 720,180 C480,190 360,160 160,180 C-40,200 0,80 240,40 C480,0 360,70 720,20 Z' fill='white'/></svg>");

-webkit-mask-repeat: no-repeat;

-webkit-mask-size: 100% 100%;

-webkit-mask-position: bottom;

mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'><path d='M720,20 C1080,-30 1440,70 1280,130 C1120,190 960,170 720,180 C480,190 360,160 160,180 C-40,200 0,80 240,40 C480,0 360,70 720,20 Z' fill='white'/></svg>");

mask-repeat: no-repeat;

mask-size: 100% 100%;

mask-position: bottom;

}

body {

background: repeating-linear-gradient(45deg, #F6FFC1, #F6FFC1 10px, #FFFFFF 10px, #FFFFFF 20px);

}

ステップ2：デザイン編集からオリジナルCSSを開く

ページ上部メニュー「背景・カラー」→「オリジナルCSS」→「編集」ボタンをクリックします。

ステップ3：CSSを貼り付けて保存・反映

CSSを貼り付けたら、「設定」ボタンで保存します。
続いて「オリジナルCSSを利用する」にチェックを入れ、「変更を反映する」ボタンをクリックしてください。

デザインを変更するには？

今回のCSSコードの中で一番ユニークなのが下記コード、「-webkit-mask-image」と「mask-image」に指定されている SVGコード です。

ここでは

＜path d="...〜..." /＞

の数値によって、ヘッダー下部の「波型の切り抜き」を決めています。
ただし、この数値を手作業で変更するのはとても難しく、思い通りの形にするのは大変です。

そこで便利なのが、外部の無料ツールを使ってSVGコードを自動生成する方法です。
例えば、Blobmaker では、ブラウザ上で形を調整しながら「自由なカーブや丸みのある図形」を作成できます。
作成した形はそのままSVGコードとしてコピーできるので、CSSの-webkit-mask-image
に貼り付ければオリジナルのデザインを簡単に実現できます。

このように「SVGマスク部分は外部ツールで作成 → コードをコピーしてCSSに貼り付ける」という流れを覚えておくと、デザインの幅が一気に広がります。

また、上記CSSのうち

body {
background: repeating-linear-gradient(45deg, #F6FFC1, #F6FFC1 10px, #FFFFFF 10px, #FFFFFF 20px);
}

の部分は背景模様を作っています。

#F6FFC1（淡い黄色）と #FFFFFF（白色）の2色でストライプを表現しています。
ここを他の色コードに変えると、自由に配色を変えることができます。

まとめ

CSSのちょっとした工夫で、ホームページの雰囲気を大きく変えることができます。
波型のヘッダーは柔らかさや親しみやすさを、ストライプ背景は明るさや楽しさを演出してくれます。

オリジナルCSSを使えば、特別な知識がなくても簡単にアレンジが可能です。
まずは今回のコードを試して、あなたのサイトに“ひと工夫”を加えてみてください。

ホームページかんたん作成のPAGEKit（ページキット）

ホームページを作るのは、むずかしそう。そう思っていた方も、PAGEKitなら「意外とカンタンだった」と感じていただけるはずです。専門知識がなくても、必要なページがすぐに揃うテンプレートと、やさしい操作画面。まずは一度、実際の使いやすさを体験してみませんか？

サンプルを作ってみる！