にいがた食堂 作成2日目の１

にいがた食堂　作成2日目の１

1日目のコードが複雑すぎるのでkana本を参考に作成しなおした。

・横の幅と中央揃いをするためのwrapperをどう記述するか迷ったが、ほかの箇所でも流用するためly_wrapperというCSSを作成して、各コンテンツのクラスの2つ目として加えることにした。
・ナビのリストスタイルlist-style:noneはulに入れる（liではない…）
・ビッグフォト内の文字のスタイルをどう記述するか迷った→結果、ここでしか使わないのでhp_という接頭語のCSSにした。

<div class="ly_bigPhoto">
    <header class="ly_header ly_wrapper">
      <h1><a href="index.html"><img src="img/logo.png" alt="にいがた食堂"class="el_logo"></a></h1>
      <nav>
        <ul class="bl_nav">
          <li><a href="#">当サイトについて</a></li>
          <li><a href="#">お問い合わせ</a></li>
        </ul>
      </nav>
    </header>
    <!-- /.ly_header -->
    <div class="ly_photoCont">
      <h2 class="hp_photoCont_h2">町の定食屋を動画でのぞき見</h2>
      <p class="hp_photoCont_p">入ってみたいけど中々入る勇気の持てない町の定食屋を動画覗いてみよう</p>
    </div>
    <!-- /.ly_photoCont -->
  </div>
  <!-- /.ly_bigPhoto -->

@charset "UTF-8";

/*ベース
==============================================-*/

body{
  color:#222;
  font-family: sans-serif;
  line-height: 1.5;
}

a{
  color:#804040;
  text-decoration: none;
}

img{
  max-width: 100%;
  vertical-align: top;
}

/*レイアウト
==============================================-*/

.ly_wrapper{
  width: 1230px;
  margin: 0 auto;
  padding:0 4%;
}

.ly_bigPhoto{ /*トップの背景画像のためだけ*/
  background-image: url(../img/mainphoto.jpg);
  background-size: 100%;
  min-height: 100vh;
  }

.ly_header{
  display: flex;
  justify-content: space-between;
}

.ly_photoCont{
  text-align: center;
  margin-top: 10%;
}

/*ブロック
==============================================-*/
.bl_nav{
  display: flex;
  list-style: none;
  margin-top: 20px;
}

.bl_nav > li{
  margin-left: 30px;
}

.bl_nav a:hover{
  color:#222;
}


/*エレメント
==============================================-*/

.el_logo{
  width:210px;
  margin-top: 14px;
}

/*ヘルパー
==============================================-*/

.hp_photoCont_h2{
  font-size: 3rem;
}

.hp_photoCont_p{
  margin:10px 0 42px;
}