フッター中級

モバイル折りたたみフッター

リンク群を見出しごとにアコーディオン化し、タップで開閉するフッター。リンクの多いサイトでも縦長になりすぎず、スマホで快適に畳めます。狭い画面のサイトマップに最適です。

#footer#accordion#mobile#collapse

ライブデモ

使用例（お題: アイドルグループ Sakura）

この技法を「アイドルグループ Sakura」というテーマのダミーサイトで実際に使った例です。

HTML

<!-- Sakura：公式サイトのモバイル折りたたみフッター -->
<footer class="fac">
  <a class="fac-logo" href="#" onclick="return false">✿ SAKURA</a>
  <div class="fac-acc" id="facAcc">
    <section class="fac-sec is-open">
      <button class="fac-head" type="button" aria-expanded="true">ライブ <span class="fac-ico" aria-hidden="true"></span></button>
      <div class="fac-panel"><div class="fac-links">
        <a href="#" onclick="return false">ツアー日程</a><a href="#" onclick="return false">チケット</a><a href="#" onclick="return false">配信</a><a href="#" onclick="return false">セットリスト</a>
      </div></div>
    </section>
    <section class="fac-sec">
      <button class="fac-head" type="button" aria-expanded="false">メンバー <span class="fac-ico" aria-hidden="true"></span></button>
      <div class="fac-panel"><div class="fac-links">
        <a href="#" onclick="return false">プロフィール</a><a href="#" onclick="return false">ブログ</a><a href="#" onclick="return false">誕生日</a>
      </div></div>
    </section>
    <section class="fac-sec">
      <button class="fac-head" type="button" aria-expanded="false">グッズ <span class="fac-ico" aria-hidden="true"></span></button>
      <div class="fac-panel"><div class="fac-links">
        <a href="#" onclick="return false">ペンライト</a><a href="#" onclick="return false">写真集</a><a href="#" onclick="return false">アパレル</a>
      </div></div>
    </section>
  </div>
  <div class="fac-bar"><span>© 2026 Sakura Project</span><span class="fac-sns"><a href="#" onclick="return false">𝕏</a><a href="#" onclick="return false">IG</a></span></div>
</footer>

CSS

/* Sakura（アイドル）：モバイル折りたたみフッターの再スキン */
* { box-sizing: border-box; }
body { margin: 0; font-family: "Hiragino Kaku Gothic ProN", "Segoe UI", system-ui, sans-serif; }

.fac { width: 100%; min-height: 380px; display: flex; flex-direction: column; background: #20111c; color: #e7c9d8; padding: 26px 24px 0; }
.fac-logo { font-size: 18px; font-weight: 800; color: #fff; text-decoration: none; margin-bottom: 12px; letter-spacing: .04em; }
.fac-acc { display: flex; flex-direction: column; }
.fac-sec { border-bottom: 1px solid #3a1f2d; }
.fac-head { width: 100%; display: flex; align-items: center; justify-content: space-between; font: inherit; font-size: 14px; font-weight: 700; color: #fff; background: none; border: none; cursor: pointer; padding: 15px 2px; }
.fac-ico { position: relative; width: 14px; height: 14px; flex: 0 0 auto; }
.fac-ico::before, .fac-ico::after { content: ""; position: absolute; background: #c98aa8; border-radius: 2px; transition: transform .3s ease, opacity .3s ease; }
.fac-ico::before { left: 0; right: 0; top: 6px; height: 2px; }
.fac-ico::after { top: 0; bottom: 0; left: 6px; width: 2px; }
.fac-sec.is-open .fac-ico::after { transform: scaleY(0); opacity: 0; }
.fac-panel { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.fac-sec.is-open .fac-panel { max-height: 180px; }
.fac-links { display: flex; flex-direction: column; gap: 2px; padding: 0 2px 14px; }
.fac-links a { color: #d59bb6; text-decoration: none; font-size: 13px; padding: 6px 0; transition: color .16s ease; }
.fac-links a:hover { color: #fff; }
.fac-bar { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding: 14px 2px; font-size: 12px; color: #a8718c; }
.fac-sns { display: flex; gap: 14px; }
.fac-sns a { color: #d59bb6; text-decoration: none; font-weight: 700; }
.fac-sns a:hover { color: #fff; }

@media (prefers-reduced-motion: reduce) { .fac-panel, .fac-ico::before, .fac-ico::after { transition: none; } }

JavaScript

// （デモと同じフックを流用）見出しタップで開閉＋自動で開く節を巡回
(() => {
  const acc = document.getElementById('facAcc');
  if (!acc) return;
  const secs = [...acc.querySelectorAll('.fac-sec')];
  const toggle = (sec, open) => { sec.classList.toggle('is-open', open); const h = sec.querySelector('.fac-head'); if (h) h.setAttribute('aria-expanded', open ? 'true' : 'false'); };
  let auto = !matchMedia('(prefers-reduced-motion: reduce)').matches;
  secs.forEach(sec => sec.querySelector('.fac-head').addEventListener('click', () => { auto = false; toggle(sec, !sec.classList.contains('is-open')); }));
  if (auto) {
    let i = 0;
    const tick = () => { if (!auto) return; secs.forEach((s, idx) => toggle(s, idx === i)); i = (i + 1) % secs.length; setTimeout(tick, 2200); };
    setTimeout(tick, 2000);
  }
})();

実装ガイド

使いどころ

リンク群の多いサイトのモバイルフッターに。見出しごとにアコーディオン化し、タップで開閉して縦長になりすぎないサイトマップにします。

実装時の注意点

各節は max-height のトランジションで開閉し、＋/− アイコンは擬似要素の縦線を scaleY で消して切り替え。JS は開閉とプレビュー用の自動巡回のみ。デスクトップでは常時展開に切り替える設計が一般的です。

対応ブラウザ

max-height トランジション・擬似要素は全モダンブラウザ対応。

よくある失敗

max-height は中身の高さを上回る値が必要で、内容が増えると一瞬カクつくことがあります（grid-template-rows:0fr→1fr も選択肢）。デスクトップでは折りたたまず全表示にするブレークポイントを用意。aria-expanded の同期を忘れずに。

応用例

デスクトップ=多段表示／モバイル=アコーディオンの自動切替、最初の1節だけ開く、検索ボックス併設などに展開できます。

コード