ヘッダーを作ろう

最初のパーツとして、ロゴとナビゲーションを持つヘッダーを作ります。HTMLを書いたあと、Flexboxで横並びにします。

このLessonのゴール

• headerとnavを使ってページ上部の構造を作れる
• Flexboxでロゴとナビゲーションを左右に配置できる
• ページ内リンクとスマートフォン用メニューボタンを準備できる

今回作るもの

ページ上部に「With Café」のロゴと、4つのページ内リンクを表示します。

1. HTMLで内容を作る

index.htmlのbody内、一番上へ記述します。

<header class="header">
  <div class="container header-inner">
    <a class="logo" href="#top" aria-label="With Café トップへ">
      <span class="logo-mark">W</span>
      With Café
    </a>

    <button
      class="menu-button"
      type="button"
      aria-label="メニューを開く"
      aria-expanded="false"
    >
      <span></span>
      <span>
    

    
      
        私たちについて
        メニュー
        お知らせ
        店舗情報