ジグザグ波線下線見出し
見出しの下にギザギザの波線が入る、遊び心のある装飾見出しです。画像は使わず、 linear-gradient を 2 枚（135度と45度）重ねて三角形のパターンを作り、 background-size:8px 5px と background-repeat:repeat-x で横方向に繰り返してジグザグ模様を再現…
解説
見出しの下にギザギザの波線が入る、遊び心のある装飾見出しです。画像は使わず、linear-gradient を 2 枚（135度と45度）重ねて三角形のパターンを作り、background-size:8px 5px と background-repeat:repeat-x で横方向に繰り返してジグザグ模様を再現しています。padding-bottom で波線の表示領域を確保し、display:inline-block で文字幅に下線が収まるようにしています。SVG も JS も不要です。
合うシーン
- 子供向けサービスや知育コンテンツの見出し
- 期間限定キャンペーンやセールの POP な訴求
- イベント告知・お祭り感のあるページタイトル
波線の色はグラデーション内の #fbd64e を差し替えるだけで変更でき、background-size の値で山の細かさが変わります（数値を大きくすると粗いギザギザに）。装飾が強いぶん、コーポレートサイトの本文見出しなど落ち着いた文脈には不向きです。背景パターンは alt を持たない純粋な装飾なので、読み上げや SEO に影響しないのも利点です。
使用例・適したシーン
- ヒーローセクションのキャッチコピー
- セクション見出し
- 記事タイトル・ブログのリード
- コーポレートサイトのキービジュアル
よくある質問
波線の色や山の細かさは調整できますか
できます。色は linear-gradient の #fbd64e を、山の細かさは background-size の 8px 5px を変更してください。横幅を縮めると山が細かく、広げると粗くなります。
画像やSVGを使っていますか
使っていません。CSS のグラデーションを繰り返してギザギザを描いているため、ファイルの追加読み込みなしで表示できます。