最小フッター

ナビ ／ パターン集トップ

リンクを並べすぎない締め。著作と連絡先だけ残す

プレビュー#

コピーする#

上のプレビューでつまみを動かし、「生成する」で調整を反映したコードを作ってからコピーしてください。下の欄は生成の元になる型で、直接コピーするものではありません。

<footer class="site-footer">
  <div class="site-footer__inner page">
    <p class="site-footer__copy">© 2026 つばめ珈琲焙煎所</p>
    <nav class="site-footer__nav" aria-label="フッター">
      <a href="/privacy/">プライバシー</a>
      <a href="mailto:info@tsubame-coffee.example.com">info@tsubame-coffee.example.com</a>
    </nav>
  </div>
</footer>

.site-footer {
  margin-block-start: var(--space-9);
  padding-block: var(--space-6);
  border-block-start: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.site-footer__copy {
  margin: 0;
}
.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-4);
  row-gap: var(--space-6);   /* 折り返したとき、44px の当たり判定どうしを8px以上あける */
}
/* 文字の行は25pxしかない。要素を高くするとフッターの背丈まで変わるので、
   擬似要素だけを44pxに伸ばす。見た目は動かさず、当たり判定だけが広がる */
.site-footer__nav a {
  position: relative;
  color: var(--color-text-muted);
  text-decoration: none;
}
.site-footer__nav a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 50%;
  block-size: 2.75rem;
  translate: 0 -50%;
}
.site-footer__nav a:hover {
  color: var(--color-accent-text);
}

確認する#

• ヘッダーと同じリンクを繰り返していない
• 375pxで2行に折り返しても読め、当たり判定どうしが重ならない
• 補助色でも4.5:1を満たす

関連#

• 情報設計
• 余白
• 出発点のCSS