パーツ番号 01-03-10 ・ CSSのみ
グラデーションボーダー上端フッター
上端に流れるグラデーションのラインを敷いたシンプルなフッター。色が左右にゆっくり流れ続けます。WordPressの上品なサイト締めに。
プレビュー
ソースコード
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">© 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 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。