フッター中級

巨大タイポ・フッター

下端いっぱいに置いた特大ブランドロゴが主役のフッター。ホバーでグラデーションが流れ、文字が塗り変わります。ポートフォリオやブランドサイトで強い余韻を残す Large Type 表現です。

#footer#typography#large-type#hover

ライブデモ

使用例（お題: カフェ MOON BREW）

この技法を「カフェ MOON BREW」というテーマのダミーサイトで実際に使った例です。

HTML

<!-- MOON BREW：巨大ロゴが主役のカフェのフッター -->
<footer class="fgt">
  <div class="fgt-top">
    <nav class="fgt-cols">
      <div class="fgt-col">
        <p class="fgt-col__h">Shop</p>
        <a href="#" onclick="return false">Beans</a>
        <a href="#" onclick="return false">Goods</a>
        <a href="#" onclick="return false">Gift</a>
      </div>
      <div class="fgt-col">
        <p class="fgt-col__h">About</p>
        <a href="#" onclick="return false">Story</a>
        <a href="#" onclick="return false">Stores</a>
        <a href="#" onclick="return false">Contact</a>
      </div>
    </nav>
    <p class="fgt-cta">深夜焙煎の一杯を、ご自宅へ →</p>
  </div>

  <div class="fgt-giant" data-text="MOON BREW">MOON BREW</div>

  <div class="fgt-bar">
    <span>© 2026 MOON BREW</span>
    <span>Open 18:00–26:00</span>
  </div>
</footer>

CSS

/* MOON BREW（カフェ）：巨大タイポ・フッターの再スキン */
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", system-ui, -apple-system, sans-serif; }

.fgt { width: 100%; min-height: 380px; display: flex; flex-direction: column; background: #18120c; color: #e4d8c8; overflow: hidden; }

.fgt-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 32px 30px 0; }
.fgt-cols { display: flex; gap: 48px; }
.fgt-col__h { margin: 0 0 12px; font-size: 12px; font-weight: 700; color: #9c8a72; letter-spacing: .06em; }
.fgt-col a { display: block; color: #e4d8c8; text-decoration: none; font-size: 13px; padding: 4px 0; transition: color .18s ease; }
.fgt-col a:hover { color: #fff; }
.fgt-cta { margin: 0; font-size: 14px; font-weight: 600; color: #c7b69c; max-width: 220px; text-align: right; }

.fgt-giant {
  position: relative; margin-top: auto;
  font-size: 19vw; line-height: .9; font-weight: 900; letter-spacing: -.02em;
  text-align: center; white-space: nowrap; color: transparent;
  -webkit-text-stroke: 1px #3a2e20; user-select: none;
}
.fgt-giant::after {
  content: attr(data-text); position: absolute; inset: 0;
  background: linear-gradient(90deg, #e0a458, #d97742, #c2410c, #e0a458);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  opacity: 0; transition: opacity .4s ease; animation: fgt-slide 6s linear infinite;
}
.fgt:hover .fgt-giant::after, .fgt-giant.is-lit::after { opacity: 1; }
@keyframes fgt-slide { to { background-position: 300% 0; } }

.fgt-bar { display: flex; justify-content: space-between; padding: 16px 30px; font-size: 12px; color: #9c8a72; border-top: 1px solid #261d13; }

@media (prefers-reduced-motion: reduce) { .fgt-giant::after { animation: none; } .fgt-col a { transition: none; } }

JavaScript

// （デモと同じフックを流用）巨大ロゴの点灯を自動で実演
(() => {
  const giant = document.querySelector('.fgt-giant');
  if (!giant) return;
  let auto = !matchMedia('(prefers-reduced-motion: reduce)').matches;
  giant.addEventListener('pointerenter', () => { auto = false; });
  if (auto) {
    let lit = false;
    const tick = () => { if (!auto) return; lit = !lit; giant.classList.toggle('is-lit', lit); setTimeout(tick, lit ? 2600 : 1400); };
    setTimeout(tick, 900);
  }
})();

実装ガイド

使いどころ

ポートフォリオ・スタジオ・ブランドサイトなど、強い余韻を残したいページ末尾に。下端いっぱいの特大ブランドロゴが主役で、ホバー（または自動）でグラデーションが流れ、文字が塗り変わります。

実装時の注意点

巨大ロゴは text-stroke でアウトライン表示し、重ねた ::after に background-clip:text のグラデを当ててスライドさせます。is-lit クラスで点灯を切り替え、JS はプレビュー用の自動点灯のみ。font-size を vw 指定にして画面幅に追従させています。

対応ブラウザ

-webkit-text-stroke と background-clip:text は実装上ほぼ -webkit- 併記が必須で、サンプルも両方記述。全モダンブラウザで表示できますが、text-stroke は一部環境で太さの見え方が異なります。

よくある失敗

vw のフォントは極端な画面幅でロゴがはみ出す/小さくなりすぎるため、clamp() で上下限を設けると安全。アウトライン文字は背景が明るいと視認性が落ちるので暗背景が前提。文字数が多いと一行に収まらないので語数は絞ること。

応用例

ホバーで一文字ずつ塗る、スクロール連動で塗り進める、ロゴの代わりにキャッチコピーを巨大表示、配色を季節で変えるなどのアレンジが可能です。

コード