MENU
  1. ホーム
  2. Gallery
  3. フッター01

フッター01

Gallery
目次

カンプ画像（Figma）

実装画面（ブラウザ）

デモページを見る

実装のポイント解説

動的な区切り線の実装：flex-wrapと疑似要素（::after）によるメニューレイアウト

ポイント: メニュー項目（.footer-item）の間にある区切り線（/）をHTMLに直接書くのではなく、CSSの疑似要素（::after）で自動生成。さらに flex-wrap: wrap; と組み合わせることで、画面幅に合わせて項目が折り返した際にもレイアウトが崩れない柔軟な構造を構築しています。

.footer-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;     /* 画面幅が狭くなったら自動で折り返す */
  max-width: 580px;
  margin-inline: auto;
  gap: 12px 0;         /* 折り返した際の上下の隙間だけを制御 */
}

.footer-item:not(:last-child)::after {
  content: "/";        /* ✨ 最後の項目以外に自動でスラッシュを付与 */
  margin: 0 12px;
}

解説: 区切り線の「/」をHTMLにテキストとして直接記述してしまうと、項目の追加・削除のたびにHTML側も修正せざるを得ず、コーディングミス（最後の項目の後ろにスラッシュが残るなど）の原因になります。
このコードでは、CSSの :not(:last-child)::after を用いることで、「最後の項目以外」の右側に自動でスラッシュが挿入されるように設計しています。さらに、親要素に flex-wrap: wrap; を指定し、折り返した際の縦の隙間を gap: 12px 0; で制御しているため、スマホ画面などでメニューが複数行に分かれた場合でも、等間隔のレイアウトが自動的に維持されます。

確実な中央配置とバグ排除：Flexコンテナ化によるロゴとSNSアイコンの最適化

ポイント: 中央寄せにするロゴ（.footer-logo）や各メニュー項目に display: flex; を適用。インライン要素特有の「直下の謎の隙間」を未然に排除し、Figmaのデザイン通りに中央配置を再現しています。

.footer-logo {
  width: 64px;
  margin-inline: auto;
  display: flex; /* ✨ imgタグが持つインラインの余白バグをリセット */
}

.footer-item {
  display: flex; /* ✨ 疑似要素のスラッシュとテキストの縦軸を揃える */
}

解説: HTMLの <img> タグやテキスト要素は、デフォルトでインライン要素（またはインラインブロック要素）として扱われるため、文字のベースライン（アルファベットの「g」や「y」の下部分を収めるための見えない領域）に引っ張られ、下部に数ピクセルの意図しない隙間が生まれてしまいます。これが、デザインカンプと実装で高さや余白が微妙にズレる大きな原因になります。
このコードでは、ロゴの親要素や .footer-item を display: flex; でコンテナ化（ブロック化）することで、このインライン特有の挙動を無効化しています。これにより、ロゴ画像（height: 19px）の高さが周囲に悪影響を及ぼさず、さらにメニュー内のテキストと疑似要素のスラッシュ（/）の縦軸のセンターが一致します。

精緻な余白と情報の階層化：border-topとopacityを活用したコピーライトの仕上げ

ポイント: サイトの最下部に位置するコピーライト（<small>）に対し、明示的に display: block; を当てて領域を確保。境界線（border-top）と透明度（opacity）を組み合わせることで、フッター全体の視覚的な情報階層（コントラスト）を整えています。

.footer-sns-copyright {
  font-size: 12px;
  font-weight: bold;
  opacity: 0.5;                /* ✨ 主役であるメニューより目立たないよう薄くする */
  text-align: center;
  display: block;              /* 横幅いっぱいのブロックにしてborderとpaddingを有効化 */
  padding: 24px 0;
  border-top: 1px solid var(--color-nord4); /* フッター上部と区切る境界線 */
  margin-top: 40px;
}

解説: コピーライトを表示する <small> タグも本来はインライン要素であるため、そのままでは上下のマージンや境界線が意図通りに効かないことがあります。そこに display: block; を適用して横幅いっぱいのブロック要素に変換することで、上部に境界線（border-top）を引き、その内側に padding: 24px 0; の均等な余白を持たせることに成功しています。
また、文字サイズを 12px に抑えた上で opacity: 0.5;（不透明度50%）を設定しているのもデザイン上の大きなポイントです。法的表記として必須でありながら、ユーザーが頻繁にクリックするわけではないコピーライトの視覚的優先度を意図的に下げる（情報の強弱をつける）ことで、上のSNSアイコンやメニューリンクを自然と引き立てるスタイリングとなっています。

Gallery
目次