← 動的パーツギャラリーへ戻る

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

グラデーションボーダー上端フッター

上端に流れるグラデーションのラインを敷いたシンプルなフッター。色が左右にゆっくり流れ続けます。WordPressの上品なサイト締めに。

autocss

プレビュー

ソースコード

HTML

<div class="d01-03-10-wrap">
          <div class="d01-03-10-line" aria-hidden="true"></div>
          <footer class="d01-03-10-ft">
            <div class="d01-03-10-logo">Gradient Line</div>
            <nav class="d01-03-10-nav">
              <a href="#">ホーム</a>
              <a href="#">サービス</a>
              <a href="#">ブログ</a>
              <a href="#">お問い合わせ</a>
            </nav>
            <div class="d01-03-10-copy">&copy; 2026 Gradient Line Inc.</div>
          </footer>
        </div>

CSS

.d01-03-10-wrap{height:100%;display:flex;flex-direction:column;justify-content:flex-end;background:#f8fafc}
        .d01-03-10-line{height:4px;background:linear-gradient(90deg,#f43f5e,#f59e0b,#10b981,#3b82f6,#a855f7,#f43f5e);background-size:300% 100%;animation:d160slide 5s linear infinite}
        @keyframes d160slide{from{background-position:0% 0}to{background-position:300% 0}}
        .d01-03-10-ft{background:#1e293b;color:#cbd5e1;text-align:center;padding:22px 16px;font-size:11px}
        .d01-03-10-logo{color:#fff;font-weight:700;font-size:14px;margin-bottom:12px}
        .d01-03-10-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin-bottom:12px}
        .d01-03-10-nav a{color:#cbd5e1;text-decoration:none;transition:color .25s}
        .d01-03-10-nav a:hover{color:#93c5fd}
        .d01-03-10-copy{color:#64748b;font-size:10px}

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