フッター初級

カード重ね・ニュースレターフッター

フッター上辺に浮かせた登録カードでニュースレターへ誘導し、下にリンク列と「トップへ戻る」を配置。カード型で視線を集める Cards 系フッターで、メディアやブログに向きます。

#footer#newsletter#card#back-to-top

ライブデモ

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

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

HTML

<!-- MOON BREW：カフェの読み物メディア向けフッター -->
<footer class="fnc">
  <div class="fnc-card">
    <div class="fnc-card__txt">
      <p class="fnc-card__h">今月の一杯を、メールで。</p>
      <p class="fnc-card__p">月替わりの豆と、夜の焙煎日記をお届けします。</p>
    </div>
    <form class="fnc-card__form" onsubmit="return false">
      <input class="fnc-card__in" type="email" placeholder="メールアドレス" aria-label="メールアドレス">
      <button class="fnc-card__btn" type="submit">購読する</button>
    </form>
  </div>

  <div class="fnc-cols">
    <a class="fnc-logo" href="#" onclick="return false">MOON BREW</a>
    <nav class="fnc-col">
      <p class="fnc-col__h">読む</p>
      <a href="#" onclick="return false">焙煎日記</a>
      <a href="#" onclick="return false">豆の物語</a>
      <a href="#" onclick="return false">淹れ方</a>
    </nav>
    <nav class="fnc-col">
      <p class="fnc-col__h">店舗</p>
      <a href="#" onclick="return false">アクセス</a>
      <a href="#" onclick="return false">通販</a>
      <a href="#" onclick="return false">お問い合わせ</a>
    </nav>
  </div>

  <div class="fnc-bar">
    <span>© 2026 MOON BREW</span>
    <button class="fnc-top" type="button" aria-label="トップへ戻る">↑ Top</button>
  </div>
</footer>

CSS

/* MOON BREW（カフェ）：カード重ねニュースレターフッターの再スキン */
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", system-ui, -apple-system, sans-serif; }

.fnc { width: 100%; min-height: 380px; display: flex; flex-direction: column; background: #efe7da; color: #3c2f22; padding: 56px 30px 0; }

.fnc-card {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  margin-top: -28px; padding: 22px 26px; border-radius: 18px;
  background: linear-gradient(135deg, #7a4f2a, #b07a3f); color: #fff;
  box-shadow: 0 22px 44px rgba(122,79,42,.3);
}
.fnc-card__h { margin: 0; font-size: 19px; font-weight: 800; }
.fnc-card__p { margin: 5px 0 0; font-size: 12.5px; color: rgba(255,255,255,.85); }
.fnc-card__form { display: flex; gap: 8px; }
.fnc-card__in { font: inherit; font-size: 13px; width: min(220px, 50vw); padding: 11px 15px; border-radius: 999px; border: none; background: rgba(255,255,255,.96); color: #3c2f22; }
.fnc-card__in::placeholder { color: #a98f76; }
.fnc-card__btn { font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; padding: 11px 20px; border-radius: 999px; border: none; background: #2a1d10; color: #fff; transition: transform .15s ease; }
.fnc-card__btn:hover { transform: translateY(-2px); }

.fnc-cols { display: flex; gap: 44px; flex-wrap: wrap; padding: 30px 4px 24px; }
.fnc-logo { font-size: 18px; font-weight: 800; color: #4a3320; text-decoration: none; margin-right: auto; letter-spacing: .04em; }
.fnc-col__h { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #a98f76; }
.fnc-col a { display: block; color: #5b4630; text-decoration: none; font-size: 13px; padding: 4px 0; transition: color .18s ease; }
.fnc-col a:hover { color: #7a4f2a; }

.fnc-bar { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding: 14px 4px; font-size: 12px; color: #6f5840; border-top: 1px solid #ddd0bd; }
.fnc-top { font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; padding: 8px 14px; border-radius: 999px; border: 1px solid #cdbca3; background: #fffdf8; color: #5b4630; transition: transform .18s ease, box-shadow .18s ease; }
.fnc-top:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(122,79,42,.16); }

@media (prefers-reduced-motion: reduce) { .fnc-card__btn, .fnc-top { transition: none; } }

実装ガイド

使いどころ

メディア・ブログ・カフェなど、購読誘導を主役にしたいフッターに。上辺に浮かせた登録カードで視線を集め、その下にリンク列と「トップへ戻る」を配置します。

実装時の注意点

カードは負の margin でフッター上辺にせり出させ、強い影で浮遊感を出します。下にリンク列、最下部にバー（著作権＋トップへ戻る）を flex の margin-top:auto で底に固定。装飾は CSS 中心で、トップへ戻るはホバーで浮きます。

対応ブラウザ

flexbox・border-radius・box-shadow は全モダンブラウザで対応します。負マージンの重なりも安定して描画されます。

よくある失敗

カードを負マージンで出す分、フッター上部に padding を確保しないと前のセクションと重なります。狭い画面ではカード内の見出しとフォームを縦積み（flex-wrap）に。トップへ戻るは実サイトでスムーススクロールと結線してください。

応用例

登録カードに特典バッジを付ける、カードを資料ダウンロード導線に、トップへ戻るを進捗リング付きに、カード背景を画像にするなどの展開が可能です。

コード