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

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

ミニマル中央寄せフッター

ロゴ・横並びメニュー・SNS円アイコンを中央に配置。アイコンにホバーすると色が反転しふわっと浮き上がります。シンプルなWordPressサイト向け。

hovercss

プレビュー

ソースコード

HTML

<footer class="d01-03-04-ft">
          <div class="d01-03-04-logo">MINIMAL</div>
          <nav class="d01-03-04-nav">
            <a href="#">About</a>
            <a href="#">Works</a>
            <a href="#">Contact</a>
          </nav>
          <div class="d01-03-04-sns">
            <a href="#" aria-label="X">
              <svg viewBox="0 0 24 24" width="14" height="14"><path fill="currentColor" d="M18 3h3l-7 8 8 10h-6l-5-6-5 6H1l8-9L1 3h6l4 5z"/></svg>
            </a>
            <a href="#" aria-label="Instagram">
              <svg viewBox="0 0 24 24" width="14" height="14"><path fill="currentColor" d="M12 8.5A3.5 3.5 0 1 0 15.5 12 3.5 3.5 0 0 0 12 8.5m0 5.8A2.3 2.3 0 1 1 14.3 12 2.3 2.3 0 0 1 12 14.3M16 7a.9.9 0 1 0 .9.9A.9.9 0 0 0 16 7M12 4.8c2.3 0 2.6 0 3.5.05a4.8 4.8 0 0 1 1.6.3 2.8 2.8 0 0 1 1.6 1.6 4.8 4.8 0 0 1 .3 1.6c.05.9.05 1.2.05 3.5s0 2.6-.05 3.5a4.8 4.8 0 0 1-.3 1.6 2.8 2.8 0 0 1-1.6 1.6 4.8 4.8 0 0 1-1.6.3c-.9.05-1.2.05-3.5.05s-2.6 0-3.5-.05a4.8 4.8 0 0 1-1.6-.3 2.8 2.8 0 0 1-1.6-1.6 4.8 4.8 0 0 1-.3-1.6C4.8 14.6 4.8 14.3 4.8 12s0-2.6.05-3.5a4.8 4.8 0 0 1 .3-1.6 2.8 2.8 0 0 1 1.6-1.6 4.8 4.8 0 0 1 1.6-.3C9.4 4.8 9.7 4.8 12 4.8"/></svg>
            </a>
            <a href="#" aria-label="Facebook">
              <svg viewBox="0 0 24 24" width="14" height="14"><path fill="currentColor" d="M13.5 21v-7h2.3l.4-2.7h-2.7V9.5c0-.8.2-1.3 1.4-1.3h1.4V5.8a19 19 0 0 0-2-.1c-2 0-3.4 1.2-3.4 3.5v2H8.6V14h2.3v7z"/></svg>
            </a>
          </div>
          <div class="d01-03-04-copy">&copy; 2026 Minimal Studio</div>
        </footer>

CSS

.d01-03-04-ft{background:#fafafa;color:#333;text-align:center;padding:26px 16px;font-size:11px;box-sizing:border-box;height:100%;display:flex;flex-direction:column;justify-content:center;gap:14px}
        .d01-03-04-logo{font-weight:700;letter-spacing:3px;font-size:15px;color:#111}
        .d01-03-04-nav{display:flex;justify-content:center;gap:18px}
        .d01-03-04-nav a{color:#555;text-decoration:none;transition:color .25s}
        .d01-03-04-nav a:hover{color:#111}
        .d01-03-04-sns{display:flex;justify-content:center;gap:10px}
        .d01-03-04-sns a{width:30px;height:30px;border:1px solid #cbd5e1;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#555;transition:transform .25s,background .25s,color .25s,border-color .25s}
        .d01-03-04-sns a:hover{background:#111;color:#fff;border-color:#111;transform:translateY(-4px)}
        .d01-03-04-copy{color:#94a3b8;font-size:10px}

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