にいがた食堂 作成1日目

にいがた食堂　作成1日目　（1Hくらい）

htmlの骨格の作成と最上部（背景画像の上に「ヘッダー（ロゴとナビ）」と「コンテンツ」）のCSSの記述を行った。

〇作業内容
・最上部には、大きい背景画像の上にヘッダー及びコンテンツを配置する。
（kana本のwebcafeと同じ構造）
・classをどのようにマークアップするか悩む
・背景画像だけのための<div class="ly_bigPhoto">を作成。
・その配下に以下を配置
ヘッダー→<header class="bl_header"></header>
コンテンツ→<div class="bl_photoCont"></div>
・上記コンテンツの横幅と中央揃いをどこに記述するか悩む
・kana本では、wrapperを別に使っていたので、上記2つをwrapperで包むことに。
・cssの記述としてCSS設計ガイドに、以下のような親子逆転の記述がありとの記載（p182）があったので<header class="bl_header">の親に<div class="bl_header_wrapper">という記述にした。
・<header class="bl_header">では以下のように、ロゴとナビのレイアウトを書き

.bl_header{
  display:flex;
  justify-content: space-between;
  padding-top:20px;
}

<div class="bl_header_wrapper">では、ヘッダー自体のレイアウトを書くという役割分担ができたのでわかりやすいかなと。

.bl_header_wrapper{
  max-width: 1100px;
  margin:0 auto;
  padding:0 4%;
}

本日のまとめ↓

 <div class="ly_bigPhoto">

    <div class="bl_header_wrapper">
      <header class="bl_header">
        <h1><a href="#"><img src="img/logo.png" class="el_logo"></a></h1>
        <nav class="bl_nav">
          <ul class="bl_nav_inner">
            <li><a href="#">運営会社</a></li>
            <li><a href="#">お問い合わせ</a></li>
          </ul>
        </nav>
      </header>
      <!-- /.bl_header -->
    </div>
    <!-- /.bl_header_wrapper -->

    <div class="bl_photoCont_wrapper">
      <div class="bl_photoCont">
      </div>
      <!-- /.bl_photoCont -->
    </div>
    <!-- /.bl_photoConto_wrapper -->
  </div>
  <!-- /.ly_bigPhoto -->