パーツ番号 01-03-02 ・ CSSのみ

波形トップ付きフッター

上端にSVGの波を配置し、下部に濃色フッターを敷きます。波がゆっくり左右に流れ続けます。WordPressで柔らかい印象のサイト締めに。

autocsssvg

プレビュー

ソースコード

HTML

<div class="d01-03-02-wrap">
          <svg class="d01-03-02-wave" viewBox="0 0 1200 60" preserveAspectRatio="none" aria-hidden="true">
            <path d="M0,30 C150,60 350,0 600,30 C850,60 1050,0 1200,30 L1200,60 L0,60 Z" fill="#243044"></path>
          </svg>
          <footer class="d01-03-02-ft">
            <div class="d01-03-02-logo">Wave Design Studio</div>
            <nav class="d01-03-02-nav">
              <a href="#">ホーム</a>
              <a href="#">制作実績</a>
              <a href="#">料金</a>
              <a href="#">お問い合わせ</a>
            </nav>
            <div class="d01-03-02-copy">&copy; 2026 Wave Design Studio</div>
          </footer>
        </div>

CSS

.d01-03-02-wrap{height:100%;display:flex;flex-direction:column;justify-content:flex-end;background:#eef4fb}
        .d01-03-02-wave{display:block;width:200%;height:38px;animation:d152move 9s linear infinite}
        @keyframes d152move{from{transform:translateX(0)}to{transform:translateX(-50%)}}
        .d01-03-02-ft{background:#243044;color:#cbd5e1;text-align:center;padding:18px 16px 16px;font-size:11px}
        .d01-03-02-logo{color:#fff;font-weight:700;font-size:13px;margin-bottom:10px}
        .d01-03-02-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin-bottom:12px}
        .d01-03-02-nav a{color:#cbd5e1;text-decoration:none;transition:color .25s}
        .d01-03-02-nav a:hover{color:#7dd3fc}
        .d01-03-02-copy{color:#64748b;font-size:10px}

クラス名 .d01-03-02 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。