フッターを作ろう

最後のパーツとして、ロゴ、補助ナビゲーション、著作権表示を持つフッターを作ります。

このLessonのゴール

• footer内にロゴ、補助ナビゲーション、著作権表示を配置できる
• Flexboxでフッター内の要素を整理できる
• ページ内リンクとHTML全体の開始・終了タグを確認できる

1. HTMLを追加する

mainを閉じたあとへ記述します。

</main>

<footer class="footer">
  <div class="container">
    <div class="footer-top">
      <a class="logo" href="#top">
        <span class="logo-mark">W</span>
        With Café
      </a>
      <nav aria-label="フッターナビゲーション">
        <ul class="footer-navigation">
          <li><a href="#about">私たちについて</a>
          メニュー
          お知らせ
          店舗情報
        
      
    
    © 2026 WITH CAFÉ.