ヘッダーからヒーロー部分のコーディング

PCブラウザ表示用のヘッダーエリアを作成します。
スマホ幅での調整は解説後半に掲載します。

1.ブロックで区切る

ヘッダー部分はコンテナ―の中にdivが2つ。
下の段のdivは更に３つのブロックに分けてレイアウトします。

<header class="container">
  <div></div>
  <div class="row">
    <div></div>
    <nav></nav>
    <div></div>
  </div>
</header>

それぞれ、中に画像やテキストなどを配置していきましょう。
ナビゲーションメニューの部分はリスト<ul>タグを使ってコーディングします。

この状態で、ブラウザで確認すると下図のような表示になります。

2.配置する

それぞれのdivにクラスを命名して、cssファイルの方で完成見本の配置になるように設定していきます。

index.html

style.css

パソコン幅向けのヘッダーレイアウトが完成しました。

3.ヒーロー画像を配置する

作成したヘッダーエリアの下に、店舗の画像を配置しましょう。

最初に作った<main>タグのすぐ下に、画像を入れるためのdivを設置します。
分かりやすいクラス名を付けて、cssファイルの方で背景画像を設定してください。

index.html

style.css

ブラウザで確認してみましょう。

ヒーロー画像が入ったことで、ヘッダー内の各パーツの位置も分かりやすくなりましたね。 これでヒーローエリア（トップ画像）までの配置が出来ました。