#7 レスポンシブコーディングでサイト制作①

サイトのトップページのコーディングにチャレンジ

仮にCBCのサイトを作ってみました。そのトップページをコーディングしてみましょう。
XDでレイアウトしたサイトデータから枠で囲ってセクションやクラス名を決めていきます。 慣れてくれば書かなくても頭の中で枠名が作れるようになります。

まずはPC用レイアウトのアウトラインを作ります。
紙に鉛筆書きで枠線を作り、答えを見ないでhtmlで文章構造を作り、cssでレイアウトしてみてください。
完成形のデザインです

枠のおおよそのエリアを適当に書き出す

参考画像のようにクラス名をつけてみましょう。枠とレイアウト用のcssをなんとなく頭のなかで描きます。

まずはhtmlの文章構造を作る(単純な枠だけ)

まずはhtml構文を作りたいので、CSSには枠線のborderプロパティのみ適応させておき、クラス名だけを羅列しておきましょう。
1. まずは枠線だけのコーディング

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Responsive Site Sample</title>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>

<header>
<div class="header__contents">
  <div class="header__contents--text">
    テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト
  </div>
  <div class="header__contents--logo">
    <p><img src=""></p>
    <p><img src=""></p>
  </div>
  <div class="header__contents--text">
    テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト
  </div>
</div>
<div class="header__image">
  <img src="">
</div>
</header>

<nav>
  <ul>
    <li><a href="">home</a></li>
    <li><a href="">beginner</a></li>
    <li><a href="">basic</a></li>
    <li><a href="">advanced</a></li>
    <li><a href="">design</a></li>
    <li><a href="">performance</a></li>
    <li><a href="">kids</a></li>
  </ul>
</nav>

<main>
<section class="menu">
  <div class="menu__content">
    <div class="menu__content--text">
      <img src="">
      <h1>タイトル</h1>
      <p>テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト</p>
      <div class="btn">MENU</div>
    </div>
    <div class="menu__content--image">背景画像が入る</div>
  </div>
  <div class="menu__content">
    <div class="menu__content--image">背景画像が入る</div>
    <div class="menu__content--text">
      <img src="">
      <h1>Title</h1>
      <p>テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト</p>
      <div class="btn">MENU</div>
    </div>
  </div>
</section>

<section class="vision">
  <div class="vision__image">
    <h1>タイトル</h1>
    <p><img src=""></p>
  </div>

  <div class="vision__columun">
    <div class="vision__columun--item">
      <p><img src=""></p>
      <p>
      ここはコンテンツの説明を入力していきます。魅力的な文章を追加して、ユーザーにコンテンツの内容を理科してもらいましょう。
      ここはコンテンツの説明を入力していきます。魅力的な文章を追加して、ユーザーにコンテンツの内容を理科してもらいましょう。
      </p>
    </div>
    <div class="vision__columun--item">
      <p><img src=""></p>
      <p>
      ここはコンテンツの説明を入力していきます。魅力的な文章を追加して、ユーザーにコンテンツの内容を理科してもらいましょう。
      ここはコンテンツの説明を入力していきます。魅力的な文章を追加して、ユーザーにコンテンツの内容を理科してもらいましょう。
      </p>
    </div>
    <div class="vision__columun--item">
      <p><img src=""></p>
      <p>
      ここはコンテンツの説明を入力していきます。魅力的な文章を追加して、ユーザーにコンテンツの内容を理科してもらいましょう。
      ここはコンテンツの説明を入力していきます。魅力的な文章を追加して、ユーザーにコンテンツの内容を理科してもらいましょう。
      </p>
    </div>
  </div>
</section>
</main>

<footer>
  <div class="footer">
    <div class="footer__image"></div>
    <h2>タイトル</h2>

    <div class="footer__column">
      <div class="footer__column--form">
        フォーム説明文
        <form action="send.php" method="POST">
          お名前<br>
          <input type="text" name="inputName">
          メールアドレス<br>
          <input type="text" name="inputMail">
          問い合わせ内容<br>
          <textarea name="toiawase"></textarea>
          <input type="submit" value="送信">
        </form>
      </div>
      <div class="footer__column--map">
        Googlemapが入ります。
        <div>
        住所情報が入ります
        </div>
      </div>
    </div>
  </div>
  <div class="footer__copy">© 2019 Created by CBC</div>
</footer>

</body>
</html>

@charset "utf-8";
body{
  font:normal 16px/1.8em Arial,Helvetica,sans-serif;;
  color: #7BC2BA;
}
a{
  text-decoration: none;
}

/* ===========================
 よく使われる枠(後で削除)
=========================== */
/*大枠*/
header,footer,nav,main{
  margin:2px;
  border: 2px solid #F00;
}
/*小枠*/
div,ul{
  margin:2px;
  border: 2px solid #00F;
}
li,form,img,h1,h2{
  margin:2px;
  border: 1px solid #0f0;
}


/* ===========================
 header
=========================== */
header{

}
.header__contents{

}
.header__contents--left{

}
.header__contents--logo{

}
.header__contents--right{

}
.header__image{

}

/* ===========================
 nav
=========================== */
nav{

}
nav ul{

}
nav ul li{

}
nav ul li a{

}

/* ===========================
 footer
=========================== */
footer{

}
.footer{

}
.footer h2{

}
.footer__image{

}
.footer__column{

}
.footer__column--form{

}
.footer__column--form form{

}
.footer__column--form form input[type="text"]{

}
.footer__column--form form textarea{

}
.footer__column--form form input[type="submit"]{

}
.footer__column--map{

}
.footer__copy{

}

/* ===========================
 コンテンツ
=========================== */
main{

}
.menu{

}
.menu__content{

}
.menu__content--text{

}
.menu__content--image{

}

.vision{

}
.vision__image{

}
.vision__columun{

}
.vision__columun--item{

}
枠線だけのページはこのようになります

枠だけのレイアウトを作る(枠線コーディング)

枠線だけのレイアウトに幅や高さやflexを使い、枠としてのレイアウトをやってみましょう。
2. テキストを入れて、枠用のCSSを適応

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Responsive Site Sample</title>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>

<header>
<div class="header__contents">
  <div class="header__contents--text text-right">
    Professional Skills in<br>the Engineering Curriculum.
  </div>
  <div class="header__contents--logo">
    <p><img src="" alt="CBC logo"></p>
    <p><img src="" alt="CRI BOOT CAMP"></p>
  </div>
  <div class="header__contents--text">
    プロフェッショナルになるための<br>“挫折しない”トレーニングメソッド
  </div>
</div>
<div class="header__image">
  <img src="">
</div>
</header>

<nav>
  <ul>
    <li><a href="">home</a></li>
    <li><a href="">beginner</a></li>
    <li><a href="">basic</a></li>
    <li><a href="">advanced</a></li>
    <li><a href="">design</a></li>
    <li><a href="">performance</a></li>
    <li><a href="">kids</a></li>
  </ul>
</nav>

<main>
<section class="menu">
  <div class="menu__content">
    <div class="menu__content--text">
      <img src="" alt="cording">
      <h1>Title</h1>
      <p>ここはコンテンツの説明を入力していきます。魅力的な文章を追加して、ユーザーにコンテンツの内容を理科してもらいましょう。</p>
      <div class="btn"><a href="">MENU</a></div>
    </div>
    <div class="menu__content--image"></div>
  </div>
  <div class="menu__content">
    <div class="menu__content--image"></div>
    <div class="menu__content--text">
      <img src="" alt="design">
      <h1>Title</h1>
      <p>ここはコンテンツの説明を入力していきます。魅力的な文章を追加して、ユーザーにコンテンツの内容を理科してもらいましょう。</p>
      <div class="btn"><a href="">MENU</a></div>
    </div>
  </div>
</section>

<section class="vision">
  <div class="vision__image">
    <h1>ブラウザやテキストエディタ等ツールのインストールや、<br>html・CSSとはなにかを学び、<br>簡単なサイトを作りながらコーダーを目指します。</h1>
    <p><img src="" alt="Be Professional"></p>
  </div>

  <div class="vision__columun">
    <div class="vision__columun--item">
      <p><img src="" alt="cording image"></p>
      <p>
      ここはコンテンツの説明を入力していきます。魅力的な文章を追加して、ユーザーにコンテンツの内容を理科してもらいましょう。
      ここはコンテンツの説明を入力していきます。魅力的な文章を追加して、ユーザーにコンテンツの内容を理科してもらいましょう。
      </p>
    </div>
    <div class="vision__columun--item">
      <p><img src="" alt="design image"></p>
      <p>
      ここはコンテンツの説明を入力していきます。魅力的な文章を追加して、ユーザーにコンテンツの内容を理科してもらいましょう。
      ここはコンテンツの説明を入力していきます。魅力的な文章を追加して、ユーザーにコンテンツの内容を理科してもらいましょう。
      </p>
    </div>
    <div class="vision__columun--item">
      <p><img src="" alt="analytics image"></p>
      <p>
      ここはコンテンツの説明を入力していきます。魅力的な文章を追加して、ユーザーにコンテンツの内容を理科してもらいましょう。
      ここはコンテンツの説明を入力していきます。魅力的な文章を追加して、ユーザーにコンテンツの内容を理科してもらいましょう。
      </p>
    </div>
  </div>
</section>
</main>

<footer>
<div class="footer">
  <div class="footer__image"></div>
  <h2>Location & Contact</h2>

  <div class="footer__column">
    <div class="footer__column--form">
      <form action="send.php" method="POST">
        <p>ご予約やお問い合わせはこちらのフォームを<br>ご利用ください。個人情報保護方針について</p>
        お名前<br>
        <input type="text" name="inputName">
        メールアドレス<br>
        <input type="text" name="inputMail">
        問い合わせ内容<br>
        <textarea name="toiawase"></textarea>
        <input type="submit" value="送信">
      </form>
    </div>
    <div class="footer__column--map">
      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d810.4161765212042!2d139.66673032925627!3d35.660631688388975!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6018f4ab6ef28945%3A0xed98990ae6e1597b!2z5qCq5byP5Lya56S-44Kv44Oq44Ko44Kk44OG44Kj44OW44Oq44K944O844K544Kk44Oz44K544OG44Kj44OB44Ol44O844OI!5e0!3m2!1sja!2sjp!4v1571382479874!5m2!1sja!2sjp" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
      <div>
      〒000-0000 東京都世田谷区 0-0-0<br>
      TEL. 03-0000-0000<br>
      OPENING HOURS: 12:00 PM – 11:00 PM
      </div>
    </div>
  </div>
</div>
<div class="footer__copy">© 2019 Created by CBC</div>
</footer>

</body>
</html>

@charset "utf-8";
body{
  font:normal 16px/1.8em Arial,Helvetica,sans-serif;;
  color: #7BC2BA;
}
a{
  text-decoration: none;
}

/* ===========================
 よく使われる枠(後で削除)
=========================== */
/*大枠*/
header,footer,nav,main{
  margin:2px;
  border: 2px solid #F00;
}
/*小枠*/
div,ul{
  margin:2px;
  border: 2px solid #00F;
}
li,form,img,h1,h2{
  margin:2px;
  border: 1px solid #0f0;
}


/* ===========================
 header
=========================== */
header{
  border-top:20px solid #7BC2BA;
}
.header__contents{
  width:1200px;
  margin:0 auto;
  display:flex;
  justify-content:center;
height:250px;
}
.header__contents--text{
  align-self:flex-end;
  margin:0 30px;
}
.text-right{
  text-align:right;
}
.header__contents--logo{
  text-align:center;
}
.header__contents--logo-mark{
  margin-bottom:20px;
}
.header__image{
  height:600px;
}

/* ===========================
 nav
=========================== */
nav{
  background-color:#7BC2BA;
}
nav ul{
  width:1200px;
  margin:0 auto;
  display:flex;
  justify-content: space-around;
}
nav ul li{
  width:120px;
  height:50px;
}
nav ul li a{
  display:flex;
  justify-content: center;
  align-items: center;
  height:100%;
  color:#fff;
}

/* ===========================
 footer
=========================== */
footer{
  text-align:center;
}
.footer{
  color:#fff;
  background-color:#7BC2BA;
}
.footer h2{
  font-size:50px;
  margin:30px auto 80px;
}
.footer__image{
  width:100%;
  height:600px;
}
.footer__column{
  width:1200px;
  display:flex;
  margin:40px auto 100px;
}
.footer__column--form{
  flex:1;
  width:60%;
}
.footer__column--form form{
  width:60%;
  margin:10px auto 0;
  display:flex;
  flex-direction:column;
  text-align:left;
}
.footer__column--form form p{
  margin-bottom:15px;
}
.footer__column--form form input[type="text"]{
  margin: 0 0 20px 0;
  padding:5px 10px;
  font-size:1.2em;
  border-radius:5px;
  border:none;
}
.footer__column--form form textarea{
  height:8em;
  font-size:1.3em;
  border-radius:5px;
  margin: 0 0 20px 0;
  border:none;
}
.footer__column--map{
  flex:1;
  text-align:left;
}
.footer__copy{
  font-size:0.8em;
  padding:20px 0;
  color:#aaa;
}


/* ===========================
 コンテンツ
=========================== */
main{

}
.menu{
  width:1200px;
  margin:0 auto;
}
.menu__content{
  display:flex;
  text-align:center;
width:1200px;
height:600px;
}
.menu__content--text{
  flex:1;
}
.menu__content--text img{

}
.menu__content--text h1{
  margin:20px 0 50px;
  font-size:1.3em;
}
.menu__content--text p{
  width:65%;
  margin:0 auto 20px;
}
.menu__content--image{
  flex:1;
}

.vision{

}
.vision__image{
  display:flex;
  justify-content: center;
  align-items: center;
  flex-direction:column;
  border-top: 60px solid #7BC2BA;
  height:600px;
}
.vision__image h1{
  font:bold 32px/2.3em sans-serif;
  text-align:center;
}
.vision__image p{
  margin-top:75px;
}
.vision__columun{
  width:1200px;
  margin:80px auto 150px;
  display:flex;
  justify-content: space-between;
}
.vision__columun--item{
  width:30%;
  text-align:center;
}


/* ===========================
 共有
=========================== */
.btn a,
input[type="submit"]{
  display:inline-block;
  margin:0 auto;
  padding:10px 0;
  width:130px;
  cursor:pointer;
  font-size:1.3em;
  color:#58847F;
  text-align:center;
  border: 10px solid #58847F;
  background-color:transparent;
}
ページはこのようになります

枠に画像を入れ込む(PCコーディング完成)

枠の中に、画像やテキストデータを入れていき、PC版をコーディングしてみましょう。
htmlに追記するのは画像のパスや、調整用のクラス名などです。
次に画像をダウンロードします
3. 画像を入れてPC版をコーディング

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Responsive Site Sample</title>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>

<header>
<div class="header__contents">
  <div class="header__contents--text text-right">
    Professional Skills in<br>the Engineering Curriculum.
  </div>
  <div class="header__contents--logo">
    <p class="header__contents--logo-mark"><img src="./images/logo.png" alt="CBC logo"></p>
    <p><img src="./images/logo-bagde.png" alt="CRI BOOT CAMP"></p>
  </div>
  <div class="header__contents--text">
    プロフェッショナルになるための<br>“挫折しない”トレーニングメソッド
  </div>
</div>
<div class="header__image">
  <img src="./images/badge.png">
</div>
</header>

<nav>
  <ul>
    <li><a href="">home</a></li>
    <li><a href="">beginner</a></li>
    <li><a href="">basic</a></li>
    <li><a href="">advanced</a></li>
    <li><a href="">design</a></li>
    <li><a href="">performance</a></li>
    <li><a href="">kids</a></li>
  </ul>
</nav>

<main>
<section class="menu">
  <div class="menu__content">
    <div class="menu__content--text">
      <img src="./images/title_cording.png" alt="cording">
      <h1>Title</h1>
      <p>ここはコンテンツの説明を入力していきます。魅力的な文章を追加して、ユーザーにコンテンツの内容を理科してもらいましょう。</p>
      <div class="btn"><a href="">MENU</a></div>
    </div>
    <div class="menu__content--image img-cording"></div>
  </div>
  <div class="menu__content">
    <div class="menu__content--image img-design"></div>
    <div class="menu__content--text">
      <img src="./images/title_design.png" alt="design">
      <h1>Title</h1>
      <p>ここはコンテンツの説明を入力していきます。魅力的な文章を追加して、ユーザーにコンテンツの内容を理科してもらいましょう。</p>
      <div class="btn"><a href="">MENU</a></div>
    </div>
  </div>
</section>

<section class="vision">
  <div class="vision__image">
    <h1>ブラウザやテキストエディタ等ツールのインストールや、<br>html・CSSとはなにかを学び、<br>簡単なサイトを作りながらコーダーを目指します。</h1>
    <p><img src="./images/be-pro.png" alt="Be Professional"></p>
  </div>
  <div class="vision__columun">
    <div class="vision__columun--item">
      <p class="vision__columun--item-img"><img src="./images/contents_cording.png" alt="cording image"></p>
      <p>
      ここはコンテンツの説明を入力していきます。魅力的な文章を追加して、ユーザーにコンテンツの内容を理科してもらいましょう。
      ここはコンテンツの説明を入力していきます。魅力的な文章を追加して、ユーザーにコンテンツの内容を理科してもらいましょう。
      </p>
    </div>
    <div class="vision__columun--item">
      <p class="vision__columun--item-img"><img src="./images/contents_design.png" alt="design image"></p>
      <p>
      ここはコンテンツの説明を入力していきます。魅力的な文章を追加して、ユーザーにコンテンツの内容を理科してもらいましょう。
      ここはコンテンツの説明を入力していきます。魅力的な文章を追加して、ユーザーにコンテンツの内容を理科してもらいましょう。
      </p>
    </div>
    <div class="vision__columun--item">
      <p class="vision__columun--item-img"><img src="./images/contents_analytics.png" alt="analytics image"></p>
      <p>
      ここはコンテンツの説明を入力していきます。魅力的な文章を追加して、ユーザーにコンテンツの内容を理科してもらいましょう。
      ここはコンテンツの説明を入力していきます。魅力的な文章を追加して、ユーザーにコンテンツの内容を理科してもらいましょう。
      </p>
    </div>
  </div>
</section>
</main>

<footer>
  <div class="footer">
    <div class="footer__image"></div>
    <h2>Location & Contact</h2>

    <div class="footer__column">
      <div class="footer__column--form">
        <form action="send.php" method="POST">
          <p>ご予約やお問い合わせはこちらのフォームを<br>ご利用ください。個人情報保護方針について</p>
          お名前<br>
          <input type="text" name="inputName">
          メールアドレス<br>
          <input type="text" name="inputMail">
          問い合わせ内容<br>
          <textarea name="toiawase"></textarea>
          <input type="submit" value="送信">
        </form>
      </div>
      <div class="footer__column--map">
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d810.4161765212042!2d139.66673032925627!3d35.660631688388975!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6018f4ab6ef28945%3A0xed98990ae6e1597b!2z5qCq5byP5Lya56S-44Kv44Oq44Ko44Kk44OG44Kj44OW44Oq44K944O844K544Kk44Oz44K544OG44Kj44OB44Ol44O844OI!5e0!3m2!1sja!2sjp!4v1571382479874!5m2!1sja!2sjp" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
        <div>
        〒000-0000 東京都世田谷区 0-0-0<br>
        TEL. 03-0000-0000<br>
        OPENING HOURS: 12:00 PM – 11:00 PM
        </div>
      </div>
    </div>
  </div>
  <div class="footer__copy">© 2019 Created by CBC</div>
</footer>

</body>
</html>

@charset "utf-8";
body {
  font:normal 16px/1.8em Arial,Helvetica,sans-serif;;
  color: #7BC2BA;
}
a {
  text-decoration: none;
}

/* ===========================
 header
=========================== */
header {
  border-top:20px solid #7BC2BA;
}
.header__contents{
  width:1200px;
  margin:43px auto 88px;
  display:flex;
  justify-content:center;
}
.header__contents--text{
  align-self:flex-end;
  margin:0 30px;
  width:25%;
  border-top:1px solid #7BC2BA;
  border-bottom:1px solid #7BC2BA;
}
.text-right{
  text-align:right;
}
.header__contents--logo{
  text-align:center;
}
.header__contents--logo-mark{
  margin-bottom:20px;
}
.header__image{
  position:relative;
  height:600px;
  background:#7BC2BA url('../images/bg_header.png')no-repeat right center / cover;
}
.header__image img{
  position:absolute;
  top:-60px;
  right:5vw;
}

/* ===========================
 nav
=========================== */
nav {
  background-color:#7BC2BA;
}
nav ul{
  width:1200px;
  margin:0 auto;
  display:flex;
  justify-content: space-around;
}
nav ul li{
  width:120px;
  height:60px;
}
nav ul li a{
  display:flex;
  justify-content: center;
  align-items: center;
  height:100%;
  color:#fff;
}

/* ===========================
 footer
=========================== */
footer {
  text-align:center;
}
.footer {
  color:#fff;
  padding:60px 0 70px;
  background-color:#7BC2BA;
}
.footer h2{
  font-size:50px;
  margin:30px auto 80px;
}
.footer__image{
  width:100%;
  height:600px;
  background:#7BC2BA url('../images/bg_footer.png')no-repeat center center / cover;
}
.footer__column{
  width:1200px;
  display:flex;
  margin:40px auto 100px;
}
.footer__column--form{
  flex:1;
  width:60%;
}
.footer__column--form form{
  width:60%;
  margin:10px auto 0;
  display:flex;
  flex-direction:column;
  text-align:left;
}
.footer__column--form form p{
  margin-bottom:15px;
}
.footer__column--form form input[type="text"]{
  margin: 0 0 20px 0;
  padding:5px 10px;
  font-size:1.2em;
  border-radius:5px;
  border:none;
}
.footer__column--form form textarea{
  margin: 0 0 20px 0;
  padding:10px;
  height:8em;
  font-size:1.3em;
  border-radius:5px;
  border:none;
}
.footer__column--map{
  flex:1;
  text-align:left;
}
.footer__column--map iframe{
  width:500px;
  height:450px;
}
.footer__copy{
  font-size:0.8em;
  padding:20px 0;
  color:#aaa;
}



/* ===========================
 コンテンツ
=========================== */
main {

}
.menu {
  width:1200px;
  margin:0 auto;
}
.menu__content{
  display:flex;
  text-align:center;
}
.menu__content--text{
  flex:1;
}
.menu__content--text img{
  margin-top:80px;
  text-align:center;
}
.menu__content--text h1{
  margin:20px 0 50px;
  font-size:1.3em;
}
.menu__content--text p{
  width:65%;
  margin:0 auto 20px;
}
.menu__content--image{
  flex:1;
  height:600px;
}
.img-cording{
  background:url('../images/menu_cording.png')no-repeat center center / cover;
}
.img-design{
  background:url('../images/menu_design.png')no-repeat center center / cover;
}

.vision {
  position: relative;
}
.vision__image{
  border-top: 60px solid #7BC2BA;
  height:600px;
  background:#7BC2BA url('../images/bg_contents.png')no-repeat center center / cover;
  display:flex;
  justify-content: center;
  align-items: center;
  flex-direction:column;
}
/*背景画像に黒いカバーをかける方法*/
.vision__image::before{
  height:600px;
  background-color: rgba(0,0,0,0.6);
  position: absolute;
  top: 60px;
  right: 0;
  bottom: 0;
  left: 0;
  content: ' ';
}
.vision__image h1{
  font:bold 31px/2.3em sans-serif;
  text-align:center;
  color:#fff;
  z-index:99;
}
.vision__image p{
  margin-top:75px;
  z-index:99;
}

.vision__columun{
  width:1200px;
  margin:80px auto 150px;
  display:flex;
  justify-content: space-between;
}
.vision__columun--item{
  width:30%;
  text-align:left;
}
.vision__columun--item-img{
  margin:0 0 50px;
  text-align:center;
}
.vision__columun--item-img img{
  height:200px;
}


/* ===========================
 共有
=========================== */
.btn a,
input[type="submit"]{
  display:inline-block;
  margin:0 auto;
  padding:10px 0;
  width:130px;
  cursor:pointer;
  font-size:1.3em;
  color:#58847F;
  text-align:center;
  border: 10px solid #58847F;
  background-color:transparent;
}
PC版はこのようになります

レスポンシブ化してみる(レスポンシブコーディング完成)

PC版ができたらレスポンシブ化していきましょう。htmlに変更はありませんが、

<head>
・・・
  <meta name="viewport" content="width=device-width, initial-scale=1">
・・・
</head>
と、headタグ内にviewportのみ追加しておきましょう。

CSSのポイントとしては、
1. widthをpx指定している箇所をメディアクエリ内で **px → **% と変更する。
2. ブラウザのレスポンシブモード機能でスマホ表示にして position 各種flex font プロパティを追加・変更しながらレイアウトを微調整していきます。
続いて、 margin, padding, height などをメディアクエリで上書きしていきます。 このとき幅や高さの範囲を“vw”ビュー ウィドス(vw = 見た目の幅の%割合)などにすると良いでしょう。

ブレイクポイントの設定はデザインによって変わりますが今回は、 幅1,215pxと、幅768pxと2パターンのブレイクポイントを設定し、このポイントを下回ると要素の挙動(性格)が変わるように設定しました。
4. レスポンシブコーディング

@charset "utf-8";
body {
  font:normal 16px/1.8em Arial,Helvetica,sans-serif;;
  color: #7BC2BA;
}
a {
  text-decoration: none;
}

/* ===========================
 header
=========================== */
header {
  border-top:20px solid #7BC2BA;
}
/* widthをpx指定している部分がレスポンシブ化のポイントになります */
.header__contents{
  width:1200px;
  margin:43px auto 88px;
  display:flex;
  justify-content:center;
}
.header__contents--text{
  align-self:flex-end;
  margin:0 30px;
  width:25%;
  border-top:1px solid #7BC2BA;
  border-bottom:1px solid #7BC2BA;
}
.text-right{
  text-align:right;
}
.header__contents--logo{
  text-align:center;
}
.header__contents--logo-mark{
  margin-bottom:20px;
}
.header__image{
  position:relative;
  height:60vh;
  background:#7BC2BA url('../images/bg_header.png')no-repeat right center / cover;
}
.header__image img{
  position:absolute;
  top:-60px;
  right:5vw;
}
@media screen and (max-width:1215px){
  .header__contents{
    width:100%;
  }
}
@media screen and (max-width:768px){
  .header__contents{
    display:block;
    margin-top:240px;
    position:relative;
  }
  .header__contents--text{
    margin:0 auto;
    width:90%;
  }
  .text-right{
    text-align:left;
    border-bottom:none;
  }
  .header__contents--logo{
    /* position: absolute;で要素をセンターにする方法 */
    position: absolute;
    top:-228px;
    left: 0;
    right: 0;
    margin: auto;
  }
  .header__image{
    position:relative;
    height:40vh;
    background:#7BC2BA url('../images/bg_header.png')no-repeat right center / cover;
  }
}

/* ===========================
 nav
=========================== */
nav {
  background-color:#7BC2BA;
}
nav ul{
  width:1200px;
  margin:0 auto;
  display:flex;
  justify-content: space-around;
}
nav ul li{
  width:120px;
  height:60px;
}
nav ul li a{
  display:flex;
  justify-content: center;
  align-items: center;
  height:100%;
  color:#fff;
}
@media screen and (max-width:1215px){
  nav ul{
    width:100%;
  }
}
@media screen and (max-width:768px){
  nav ul{
    flex-wrap:wrap;
  }
  nav ul li{
    margin:6px 0;
  }
  nav ul li a{
    border:1px solid #fff;
  }
}

/* ===========================
 footer
=========================== */
footer {
  text-align:center;
}
.footer {
  color:#fff;
  padding:60px 0 70px;
  background-color:#7BC2BA;
}
.footer h2{
  font-size:50px;
  margin:30px auto 80px;
}
.footer__image{
  width:100%;
  height:600px;
  background:#7BC2BA url('../images/bg_footer.png')no-repeat center center / cover;
}
.footer__column{
  width:1200px;
  display:flex;
  margin:40px auto 100px;
}
.footer__column--form{
  flex:1;
  width:60%;
}
.footer__column--form form{
  width:60%;
  margin:10px auto 0;
  display:flex;
  flex-direction:column;
  text-align:left;
}
.footer__column--form form p{
  font-size:0.9em;
  margin-bottom:15px;
}
.footer__column--form form input[type="text"]{
  margin: 0 0 20px 0;
  padding:5px 10px;
  font-size:1.2em;
  border-radius:5px;
  border:none;
}
.footer__column--form form textarea{
  margin: 0 0 20px 0;
  padding:10px;
  height:8em;
  font-size:1.3em;
  border-radius:5px;
  border:none;
}
.footer__column--map{
  flex:1;
  text-align:left;
  width:500px;
  height:450px;
}
.footer__column--map iframe{
  width:500px;
  height:450px;
}
.footer__copy{
  font-size:0.8em;
  padding:20px 0;
  color:#aaa;
}
@media screen and (max-width:1215px){
  .footer__column{
    width:100%;
  }
  .footer__column--map{
    margin:0 auto;
    width:97%;
  }
  .footer__column--map iframe{
    width:40vw;
    height:450px;
  }
}
@media screen and (max-width:768px){
  .footer h2{
    font-size:2em;
  }
  .footer__image{
    height:40vh;
  }
  .footer__column{
    display:block;
  }
  .footer__column--form{
    flex:1;
    width:100%;
  }
  .footer__column--form form{
    width:80%;
  }
  .footer__column--map iframe{
    width:90%;
    margin:50px auto 0;
    text-align:center;
  }
}



/* ===========================
 コンテンツ
=========================== */
main {

}
.menu {
  width:1200px;
  margin:0 auto;
}
.menu__content{
  display:flex;
  text-align:center;
}
.menu__content--text{
  flex:1;
}
.menu__content--text img{
  margin-top:80px;
  text-align:center;
}
.menu__content--text h1{
  margin:20px 0 50px;
  font-size:1.3em;
}
.menu__content--text p{
  width:65%;
  margin:0 auto 20px;
}
.menu__content--image{
  flex:1;
  height:600px;
}
.img-cording{
  background:url('../images/menu_cording.png')no-repeat center center / cover;
}
.img-design{
  background:url('../images/menu_design.png')no-repeat center center / cover;
}
@media screen and (max-width:1215px){
  .menu{
    width:100%;
  }
}
@media screen and (max-width:768px){
  .menu {
    margin:30px auto 0;
  }
  .menu__content{
    display:block;
    position:relative;
  }
  .menu__content--text{
    position: absolute;
    top:30px;
    left: 0;
    right: 0;
    margin: auto;
    z-index:99;
  }
  .menu__content--image{
    position: relative;
    margin-bottom:2px;
  }
  /*背景画像に黒いカバーをかける方法*/
  .menu__content--image::before{
    height:600px;
    background-color: rgba(0,0,0,0.6);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: ' ';
  }
}


.vision {
  position: relative;
}
.vision__image{
  border-top: 60px solid #7BC2BA;
  height:600px;
  background:#7BC2BA url('../images/bg_contents.png')no-repeat center center / cover;
  display:flex;
  justify-content: center;
  align-items: center;
  flex-direction:column;
}
/*背景画像に黒いカバーをかける方法*/
.vision__image::before{
  height:600px;
  background-color: rgba(0,0,0,0.6);
  position: absolute;
  top: 60px;
  right: 0;
  bottom: 0;
  left: 0;
  content: ' ';
}
.vision__image h1{
  font:bold 31px/2.3em sans-serif;
  text-align:center;
  color:#fff;
  z-index:99;
}
.vision__image p{
  margin-top:75px;
  z-index:99;
}

.vision__columun{
  width:1200px;
  margin:80px auto 150px;
  display:flex;
  justify-content: space-between;
}
.vision__columun--item{
  width:30%;
  text-align:left;
}
.vision__columun--item-img{
  margin:0 0 50px;
  text-align:center;
}
.vision__columun--item-img img{
  height:200px;
}
@media screen and (max-width:1215px){
  .vision__columun{
    width:97%;
  }
}
@media screen and (max-width:768px){
  .vision {
    margin-top:50px;
  }
  .vision__image h1{
    font:bold 1.6em/1.9em sans-serif;
  }
  .vision__columun{
    width:90%;
    margin:10px auto;
    display:block;
  }
  .vision__columun--item{
    width:90%;
    margin-top:40px;
    text-align:left;
  }
  .vision__columun--item-img{
    margin:0 0 10px;
    text-align:center;
  }
}


/* ===========================
 共有
=========================== */
.btn a,
input[type="submit"]{
  display:inline-block;
  margin:0 auto;
  padding:10px 0;
  width:130px;
  cursor:pointer;
  font-size:1.3em;
  color:#58847F;
  text-align:center;
  border: 10px solid #58847F;
  background-color:transparent;
}
完成版はこのようになります

#8 レスポンシブコーディングでサイト制作②

レストランのトップページのコーディング

仮のレストランのトップページをコーディングしてみましょう。
まずはPC用レイアウトのアウトラインを作ってみましょう。 紙に鉛筆書きで枠線を作り、答えを見ないでhtmlで文章構造を作り、cssでレイアウトしてみてください。
PC完成形
SP完成形

枠線コーディングで構造を作る

レスポンシブ①の課題と同じく、まずはHTML構造を書いて、枠線だけをつけてみましょう。
1. まずは枠線だけつけたコーディング
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CBC | レスポンシブ1 | 枠線</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
  <header>
    <ul class="sns">
      <li><a href="#">画像</a></li>
      <li><a href="#">画像</a></li>
    </ul>
    <ul class="navi">
      <li><a href="#">PHILOSOPHY</a></li>
      <li><a href="#">NEWS</a></li>
      <li><a href="#">MENU</a></li>
      <li><a href="#">ACCESS</a></li>
      <li><a href="#">CONTACT</a></li>
    </ul>
  </header>

  <section class="page_top">
    <h1>画像</h1>
  </section>

  <section class="philosophy">
    <div class="philosophy_left-box">
      <div>
        <h2 class="philosophy_title">PHILOSOPHY</h2>
        <p class="philosophy_txt-top">
          たまには、贅沢を<br>
          たまには、わがままを<br>
          たまには、ごちそうを
        </p>
        <p class="philosophy_txt-bottom">
          その日仕入れた新鮮な食材を、お好きな調理法で、<br>
          ジャンルを超えた様々な料理をおとどけいたします。<br>
          美容や健康のもととなるお食事を、<br>
          楽しく、おいしくお召し上がりください。
        </p>
        <div class="more_button">
          <a href="#">MORE</a>
        </div>
      </div>
    </div>
    <div class="philosophy_right-box">CSSで背景画像を指定</div>
  </section>

  <section class="news">
    <h2 class="news_title">NEWS<span>今日のおすすめ食材などニュースを発信</span></h2>
    <ul class="news_list">
      <li>
        <a href="#">
          <div class="news_img">
            画像
          </div>
          <div class="news_txt">
            <dl>
              <dt>夏季休業のお知らせ</dt>
              <dd>Jul 18,2019</dd>
            </dl>
          </div>
        </a>
      </li>
      <li>
        <a href="#">
          <div class="news_img">
            画像
          </div>
          <div class="news_txt">
            <dl>
              <dt>夏季休業のお知らせ</dt>
              <dd>Jul 18,2019</dd>
            </dl>
          </div>
        </a>
      </li>
      <li>
        <a href="#">
          <div class="news_img">
            画像
          </div>
          <div class="news_txt">
            <dl>
              <dt>夏季休業のお知らせ</dt>
              <dd>Jul 18,2019</dd>
            </dl>
          </div>
        </a>
      </li>
    </ul>
    <div class="more_button">
      <a href="#">MORE</a>
    </div>
  </section>

  <section class="instagram">
    <h2 class="instagram_title">INSTAGRAM</h2>
    <ul class="instagram_list">
      <li>
        <a href="#">
          <div class="instagram_img">
            画像が入ります
          </div>
        </a>
      </li>
      <li>
        <a href="#">
          <div class="instagram_img">
            画像が入ります
          </div>
        </a>
      </li>
      <li>
        <a href="#">
          <div class="instagram_img">
            画像が入ります
          </div>
        </a>
      </li>
      <li>
        <a href="#">
          <div class="instagram_img">
            画像が入ります
          </div>
        </a>
      </li>
    </ul>
    <div class="more_button">
      <a href="#">FOLLOW US</a>
    </div>
  </section>

  <section class="access">
    <h2 class="access_title">ACCESS</h2>
    <div class="access_map">
      GoogleMapが入ります。
    </div>
    <div class="access_detail">
      <dl>
        <dt>住所</dt>
        <dd>〒155-0031 東京都世田谷区北沢2丁目19−5</dd>
      </dl>
      <dl>
        <dt>アクセス</dt>
        <dd>
          <div>井の頭線「下北沢駅」東口より徒歩1分</div>
          <div>小田急小田原線「下北沢駅」東口より徒歩1分</div>
        </dd>
      </dl>
      <dl>
        <dt>営業時間</dt>
        <dd>平日:10:30〜19:30</dd>
      </dl>
      <dl>
        <dt>定休日</dt>
        <dd>土曜・日曜・祝日</dd>
      </dl>
    </div>
  </section>

  <footer class="footer">
    <div class="footer_inner">
      <ul class="footer_navi">
        <li><a href="#">PHILOSOPHY</a></li>
        <li><a href="#">NEWS</a></li>
        <li><a href="#">MENU</a></li>
        <li><a href="#">CONTACT</a></li>
      </ul>
      <div class="footer_sns">
        <ul>
          <li><a href="#">画像</a></li>
          <li><a href="#">画像</a></li>
        </ul>
        <div class="copyright">© 2019 CRI Inc</div>
      </div>
    </div>
  </footer>
</body>
</html>

@charset "utf-8";
/************************
* 初期設定
************************/
body{
  font-family: "Yu Gothic", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "MS Pゴシック", sans-serif;
  font-weight: 500;
  letter-spacing : 0.04em;
  -webkit-font-smoothing: antialiased;
  word-break: break-word;
  box-sizing: border-box;
}
*{
  padding: 4px 6px !important;  /** あとで削除 **/
}
a{
  display: block;
  text-decoration: none;
}
img{
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

/************************
* 枠線と余白 あとで削除します
************************/
section,footer {
	border: 1px solid #00f;
	margin: 10px 0;
}
div,ul,li,dl,dt,dd,p,h1,h2{
	border: 1px solid #f00;
	margin: 10px 0;
}
li {
	margin: 20px 0;
}

/*******************
* header
*******************/
header{

}
.navi {

}
.navi li:not(:last-child) {

}
.navi li a {

}
.sns {

}
.sns li {

}

/*******************
* page_top
*******************/
.page_top{

}
.page_top h1 {

}

/*******************
* philosophy
*******************/
.philosophy {
}
/* 共通のCSS */
.philosophy_left-box,
.philosophy_right-box {

}
/* 個別のCSS */
.philosophy_left-box {

}
.philosophy_txt-top,
.philosophy_txt-bottom {

}
.philosophy_title {

}
.philosophy_txt-top {

}
.philosophy_txt-bottom {

}
.philosophy .more_button {

}
.philosophy .more_button a {

}
.philosophy .more_button a:hover {

}
/* 個別のCSS */
.philosophy_right-box {

}

/*******************
* NEWS
*******************/
.news {

}
.news_title {

}
.news_title span {

}
.news_list {

}
.news_list li {

}
.news_list li:not(:last-child) {

}
.news_img {

}
.news_txt {

}
.news_txt dd {

}
.news .more_button {

}
.news .more_button a {

}
.news .more_button a:hover {

}

/*******************
* INSTAGRAM
*******************/
.instagram {

}
.instagram_title {

}
.instagram_title span {

}
.instagram_list {

}
.instagram_list li {
}
.instagram_list li:not(:last-child) {

}
.instagram .more_button {

}
.instagram .more_button a {

}
.instagram .more_button a:hover {

}
/*******************
* ACCESS
*******************/
.access {

}
.access_title {

}
.access_map {

}
.access_map iframe {

}
.access_detail {

}
.access_detail dl {

}
.access_detail dl:not(:first-child) {

}
.access_detail dl dt {

}
.access_detail dl dd {

}
.access_detail dl dd div:not(:first-child) {

}
.footer {

}
.footer_inner {

}
.footer_navi {

}
.footer_navi li {

}
.footer_navi li a {

}
.footer_sns{

}
.footer_sns ul {

}
.footer_sns ul li {

}
.copyright {

}
枠線のページはこのようになります

幅や高さ、flexを使ってレイアウトする

枠線が完成したら、レイアウトをします。
2. 枠のレイアウトをする


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CBC | レスポンシブ1 | 枠線</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
  <header>
    <ul class="sns">
      <li><a href="#">画像</a></li>
      <li><a href="#">画像</a></li>
    </ul>
    <ul class="navi">
      <li><a href="#">PHILOSOPHY</a></li>
      <li><a href="#">NEWS</a></li>
      <li><a href="#">MENU</a></li>
      <li><a href="#">ACCESS</a></li>
      <li><a href="#">CONTACT</a></li>
    </ul>
  </header>

  <section class="page_top">
    <h1>画像</h1>
  </section>

  <section class="philosophy">
    <div class="philosophy_left-box">
      <div>
        <h2 class="philosophy_title">PHILOSOPHY</h2>
        <p class="philosophy_txt-top">
          たまには、贅沢を<br>
          たまには、わがままを<br>
          たまには、ごちそうを
        </p>
        <p class="philosophy_txt-bottom">
          その日仕入れた新鮮な食材を、お好きな調理法で、<br>
          ジャンルを超えた様々な料理をおとどけいたします。<br>
          美容や健康のもととなるお食事を、<br>
          楽しく、おいしくお召し上がりください。
        </p>
        <div class="more_button">
          <a href="#">MORE</a>
        </div>
      </div>
    </div>
    <div class="philosophy_right-box">CSSで背景画像を指定</div>
  </section>

  <section class="news">
    <h2 class="news_title">NEWS<span>今日のおすすめ食材などニュースを発信</span></h2>
    <ul class="news_list">
      <li>
        <a href="#">
          <div class="news_img">
            画像
          </div>
          <div class="news_txt">
            <dl>
              <dt>夏季休業のお知らせ</dt>
              <dd>Jul 18,2019</dd>
              </dl>
          </div>
        </a>
      </li>
      <li>
        <a href="#">
          <div class="news_img">
            画像
          </div>
          <div class="news_txt">
            <dl>
              <dt>夏季休業のお知らせ</dt>
              <dd>Jul 18,2019</dd>
              </dl>
          </div>
        </a>
      </li>
      <li>
        <a href="#">
          <div class="news_img">
            画像
          </div>
          <div class="news_txt">
            <dl>
              <dt>夏季休業のお知らせ</dt>
              <dd>Jul 18,2019</dd>
              </dl>
          </div>
        </a>
      </li>
    </ul>
    <div class="more_button">
      <a href="#">MORE</a>
    </div>
  </section>

  <section class="instagram">
    <h2 class="instagram_title">INSTAGRAM</h2>
    <ul class="instagram_list">
      <li>
        <a href="#">
          <div class="instagram_img">
            画像が入ります
          </div>
        </a>
      </li>
      <li>
        <a href="#">
          <div class="instagram_img">
            画像が入ります
          </div>
        </a>
      </li>
      <li>
        <a href="#">
          <div class="instagram_img">
            画像が入ります
          </div>
        </a>
      </li>
      <li>
        <a href="#">
          <div class="instagram_img">
            画像が入ります
          </div>
        </a>
      </li>
    </ul>
    <div class="more_button">
      <a href="#">FOLLOW US</a>
    </div>
  </section>

   <section class="access">
    <h2 class="access_title">ACCESS</h2>
    <div class="access_map">
      GoogleMapが入ります。
    </div>
    <div class="access_detail">
      <dl>
        <dt>住所</dt>
        <dd>〒155-0031 東京都世田谷区北沢2丁目19−5</dd>
      </dl>
      <dl>
        <dt>アクセス</dt>
        <dd>
          <div>井の頭線「下北沢駅」東口より徒歩1分</div>
          <div>小田急小田原線「下北沢駅」東口より徒歩1分</div>
        </dd>
      </dl>
      <dl>
        <dt>営業時間</dt>
        <dd>平日:10:30〜19:30</dd>
      </dl>
      <dl>
        <dt>定休日</dt>
        <dd>土曜・日曜・祝日</dd>
      </dl>
    </div>
   </section>

   <footer class="footer">
    <div class="footer_inner">
      <ul class="footer_navi">
        <li><a href="#">PHILOSOPHY</a></li>
        <li><a href="#">NEWS</a></li>
        <li><a href="#">MENU</a></li>
        <li><a href="#">CONTACT</a></li>
      </ul>
      <div class="footer_sns">
        <ul>
          <li><a href="#">画像</a></li>
          <li><a href="#">画像</a></li>
        </ul>
        <div class="copyright">© 2019 CRI Inc</div>
      </div>
    </div>
   </footer>
</body>
</html>

@charset "utf-8";
/************************
* 初期設定
************************/
body{
  font-family: "Yu Gothic", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "MS Pゴシック", sans-serif;
  font-weight: 500;
  letter-spacing : 0.04em;
  -webkit-font-smoothing: antialiased;
  word-break: break-word;
  box-sizing: border-box;
}
*{
  padding: 6px !important;  /** あとで削除 **/
}
a{
  display: block;
  text-decoration: none;
}
img{
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}
section,footer {
  border: 1px solid #00f;
  margin: 10px 0;
}
div,ul,li,dl,dt,dd,p,h1,h2{
  border: 1px solid #f00;
  margin: 10px 0;
}
li {
  margin: 20px 0;
}

header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  z-index: 1;
  padding: 10px 20px;
}
.navi {
  display: flex;
}
.navi li:not(:last-child) {
  margin-right: 14px;
}
.navi li a {
  font-size: 12px;
}
.sns {
  display: flex;
}
.sns li {
  width: 45px;
  height: 45px;
}

/*******************
* page_top
*******************/
.page_top{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
}
.page_top h1 {

}

/*******************
* philosophy
*******************/
.philosophy {
  display: flex;
  height: 680px;
}
/* 共通のCSS */
.philosophy_left-box,
.philosophy_right-box {
  width: 50%;
}
/* 個別のCSS */
.philosophy_left-box {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px 10px;
}
.philosophy_txt-top,
.philosophy_txt-bottom {
  line-height: 1.6;
}
.philosophy_title {

}

.philosophy_txt-top {
  margin-top: 40px;
}
.philosophy_txt-bottom {
  margin-top: 20px;
}
.philosophy .more_button {
  margin-top: 50px;
  border: 1px solid #fff;
  width: 180px;
}
.philosophy .more_button a {
  text-align: center;
  padding: 16px 0;
  font-size: 14px;
}
.philosophy .more_button a:hover {
  background: #fff;
}
/* 個別のCSS */
.philosophy_right-box {

}

/*******************
* NEWS
*******************/
.news {
  padding: 100px 0;
}
.news_title {
  font-size: 24px;
}
.news_title span {
  font-size: 16px;
  margin-left: 16px;
}
.news_list {
  width: 90%;
  margin: 0 auto;
  display: flex;
  margin-top: 40px;
}
.news_list li {
  width: calc(100% / 4 - 15px);
}
.news_list li:not(:last-child) {
  margin-right: 30px;
}
.news_img {
}
.news_txt {
  margin-top: 10px;
  font-size: 14px;
}
.news_txt dd {
  margin-top: 10px;
}
.news .more_button {
  border: 1px solid #242424;
  width: 180px;
  margin: 60px auto 0;
}
.news .more_button a {
  text-align: center;
  padding: 16px 0;
  font-size: 14px;
}
.news .more_button a:hover {

}

/*******************
* INSTAGRAM
*******************/
.instagram {
  background: #fff;
  padding: 100px 0;
}
.instagram_title {
  font-size: 24px;
}
.instagram_title span {
  font-size: 16px;
  margin-left: 16px;
}
.instagram_list {
  width: 90%;
  margin: 0 auto;
  display: flex;
  margin-top: 40px;
}
.instagram_list li {
  width: calc(100% / 4 - 15px);
}
.instagram_list li:not(:last-child) {
  margin-right: 30px;
}
.instagram .more_button {
  border: 1px solid #242424;
  width: 180px;
  margin: 60px auto 0;
}
.instagram .more_button a {
  text-align: center;
  padding: 16px 0;
  font-size: 14px;
}
.instagram .more_button a:hover {

}

/*******************
* ACCESS
*******************/
.access {
  padding: 100px 0;
}
.access_title {
  text-align: center;
}
.access_map {
  margin-top: 50px;
}
.access_map iframe {
  width: 100%;
}
.access_detail {
  width: 50%;
  margin: 40px auto 0;
}
.access_detail dl {
  display: flex;
}
.access_detail dl:not(:first-child) {
  margin-top: 30px;
}
.access_detail dl dt {
  flex: 1;
  font-size: 14px;
}
.access_detail dl dd {
  flex: 2;
  font-size: 14px;
}
.access_detail dl dd div:not(:first-child) {
  margin-top: 10px;
}
.footer {

}
.footer_inner {
  width: 80%;
  margin: auto;
  padding: 50px 0;
}
.footer_navi {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}
.footer_navi li {
  margin: 0 10px;
}
.footer_navi li a {
  font-size: 12px;
}
.footer_sns{
  border-top: 1px solid #7c7c7c;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 30px;
}
.footer_sns ul {
  display: flex;
}
.footer_sns ul li {
  width: 40px;
  height: 40px;
}
.copyright {
  font-size: 12px;
}
レイアウトはこのようになります

画像を入れこむ

枠のレイアウトが完成したら、画像を入れ込んで行きましょう。
画像をダウンロードします
3. 画像を入れてPCコーディング


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CBC | レスポンシブ1 | PC</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
  <header>
    <ul class="sns">
      <li><a href="#"><img src="img/sns01.png" alt=""></a></li>
      <li><a href="#"><img src="img/sns02.png" alt=""></a></li>
    </ul>
    <ul class="navi">
      <li><a href="#">PHILOSOPHY</a></li>
      <li><a href="#">NEWS</a></li>
      <li><a href="#">MENU</a></li>
      <li><a href="#">ACCESS</a></li>
      <li><a href="#">CONTACT</a></li>
    </ul>
  </header>

  <section class="page_top">
    <h1><img src="img/cbc_logo_white.svg" alt=""></h1>
  </section>

  <section class="philosophy">
    <div class="philosophy_left-box">
      <div>
        <h2 class="philosophy_title">PHILOSOPHY</h2>
        <p class="philosophy_txt-top">
          たまには、贅沢を<br>
          たまには、わがままを<br>
          たまには、ごちそうを
        </p>
        <p class="philosophy_txt-bottom">
          その日仕入れた新鮮な食材を、お好きな調理法で、<br>
          ジャンルを超えた様々な料理をおとどけいたします。<br>
          美容や健康のもととなるお食事を、<br>
          楽しく、おいしくお召し上がりください。
        </p>
        <div class="more_button">
          <a href="#">MORE</a>
        </div>
      </div>
    </div>
    <div class="philosophy_right-box"></div>
  </section>

  <section class="news">
    <h2 class="news_title">NEWS<span>今日のおすすめ食材などニュースを発信</span></h2>
    <ul class="news_list">
      <li>
        <a href="#">
          <div class="news_img">
            <img src="img/news01.jpg" alt="">
          </div>
          <div class="news_txt">
            <dl>
              <dt>夏季休業のお知らせ</dt>
                <dd>Jul 18,2019</dd>
              </dl>
            </div>
          </a>
      </li>
      <li>
        <a href="#">
          <div class="news_img">
            <img src="img/news02.jpg" alt="">
          </div>
          <div class="news_txt">
            <dl>
              <dt>夏季休業のお知らせ</dt>
                <dd>Jul 18,2019</dd>
              </dl>
            </div>
          </a>
      </li>
      <li>
        <a href="#">
          <div class="news_img">
            <img src="img/news03.jpg" alt="">
          </div>
          <div class="news_txt">
            <dl>
               <dt>夏季休業のお知らせ</dt>
               <dd>Jul 18,2019</dd>
            </dl>
          </div>
        </a>
      </li>
    </ul>
    <div class="more_button">
      <a href="#">MORE</a>
    </div>
  </section>

  <section class="instagram">
    <h2 class="instagram_title">INSTAGRAM</h2>
    <ul class="instagram_list">
      <li>
        <a href="#">
          <div class="instagram_img">
            <img src="img/news01.jpg" alt="">
          </div>
        </a>
      </li>
      <li>
        <a href="#">
          <div class="instagram_img">
            <img src="img/news02.jpg" alt="">
          </div>
        </a>
      </li>
      <li>
        <a href="#">
          <div class="instagram_img">
            <img src="img/news03.jpg" alt="">
          </div>
        </a>
      </li>
      <li>
        <a href="#">
          <div class="instagram_img">
            <img src="img/news03.jpg" alt="">
          </div>
        </a>
      </li>
    </ul>
    <div class="more_button">
      <a href="#">FOLLOW US</a>
    </div>
  </section>

  <section class="access">
    <h2 class="access_title">ACCESS</h2>
    <div class="access_map">
      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.66553052196!2d139.66499671495762!3d35.66061138019912!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6018f36bdb70683b%3A0x243faef2e21a3270!2z44CSMTU1LTAwMzEg5p2x5Lqs6YO95LiW55Sw6LC35Yy65YyX5rKi77yS5LiB55uu77yR77yZ4oiS77yV!5e0!3m2!1sja!2sjp!4v1569944678065!5m2!1sja!2sjp" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
    </div>
    <div class="access_detail">
      <dl>
        <dt>住所</dt>
        <dd>〒155-0031 東京都世田谷区北沢2丁目19−5</dd>
      </dl>
      <dl>
        <dt>アクセス</dt>
          <dd>
            <div>井の頭線「下北沢駅」東口より徒歩1分</div>
            <div>小田急小田原線「下北沢駅」東口より徒歩1分</div>
        </dd>
      </dl>
      <dl>
        <dt>営業時間</dt>
        <dd>平日:10:30〜19:30</dd>
      </dl>
      <dl>
        <dt>定休日</dt>
        <dd>土曜・日曜・祝日</dd>
      </dl>
    </div>
  </section>

  <footer class="footer">
    <div class="footer_inner">
      <ul class="footer_navi">
        <li><a href="#">PHILOSOPHY</a></li>
        <li><a href="#">NEWS</a></li>
        <li><a href="#">MENU</a></li>
        <li><a href="#">CONTACT</a></li>
      </ul>
      <div class="footer_sns">
        <ul>
          <li><a href="#"><img src="img/sns01.png" alt=""></a></li>
          <li><a href="#"><img src="img/sns02.png" alt=""></a></li>
        </ul>
        <div class="copyright">© 2019 CRI Inc</div>
      </div>
    </div>
  </footer>
</body>
</html>

@charset "utf-8";
/************************
* 初期設定
************************/
body{
  font-family: "Yu Gothic", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "MS Pゴシック", sans-serif;
  font-weight: 500;
  letter-spacing : 0.04em;
  -webkit-font-smoothing: antialiased;
  word-break: break-word;
  box-sizing: border-box;
}
*{
  padding: 8px;
}
a{
  display: block;
  text-decoration: none;
}
img{
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

/*******************
* header
*******************/
header{
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  z-index: 1;
  padding: 10px 20px;
  background: rgba(0, 0, 0, .6);

}
.navi {
  display: flex;
}
.navi li:not(:last-child) {
  margin-right: 14px;
}
.navi li a {
  color: #fff;
  font-size: 12px;
}
.sns {
  display: flex;
}
.sns li {
  width: 45px;
  height: 45px;
}

/*******************
* page_top
*******************/
.page_top{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  position: relative;
  background: url(../img/mv.jpg) center/cover no-repeat;
}
.page_top h1 {
  width: 150px;
}

/*******************
* philosophy
*******************/
.philosophy {
  display: flex;
  height: 680px;
  background-color: #242424;
}
/* 共通のCSS */
.philosophy_left-box,
.philosophy_right-box {
  width: 50%;
}
/* 個別のCSS */
.philosophy_left-box {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px 10px;
}
.philosophy_txt-top,
.philosophy_txt-bottom {
  line-height: 1.6;
}
.philosophy_title {
  color: #fff;
}
.philosophy_txt-top {
  margin-top: 40px;
  color: #fff;
}
.philosophy_txt-bottom {
  margin-top: 20px;
  color: #fff;
}
.philosophy .more_button {
  margin-top: 50px;
  border: 1px solid #fff;
  width: 180px;
}
.philosophy .more_button a {
  text-align: center;
  padding: 16px 0;
  font-size: 14px;
  color: #fff;
}
.philosophy .more_button a:hover {
  color: #242424;
  background: #fff;
}
/* 個別のCSS */
.philosophy_right-box {
  background: url(../img/philosophy_bg.jpg) center/cover no-repeat;
  /*  分けて書くと、下のようになります
  background-image: url(../img/philosophy_bg.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  */
}

/*******************
* NEWS
*******************/
.news {
  background: #F0F0F0;
  padding: 100px 0;
}
.news_inner {
  width: 85%;
  margin: 0 auto;
}
.news_title {
  width: 90%;
  margin: 0 auto;
  font-size: 24px;
}
.news_title span {
  font-size: 16px;
  margin-left: 16px;
}
.news_list {
  width: 90%;
  margin: 0 auto;
  display: flex;
  margin-top: 40px;
}
.news_list li {
  width: calc(100% / 4 - 15px);
}
.news_list li:not(:last-child) {
  margin-right: 30px;
}
.news_txt {
  margin-top: 10px;
  font-size: 14px;
}
.news_txt dd {
 margin-top: 10px;
}
.news .more_button {
  border: 1px solid #242424;
  width: 180px;
  margin: 60px auto 0;
}
.news .more_button a {
  text-align: center;
  padding: 16px 0;
  font-size: 14px;
  color: #242424;
}
.news .more_button a:hover {
  color: #fff;
  background: #242424;
}

/*******************
* INSTAGRAM
*******************/
.instagram {
  background: #fff;
  padding: 100px 0;
}
.instagram_inner {
  width: 85%;
  margin: 0 auto;
}
.instagram_title {
  width: 90%;
  margin: 0 auto;
  font-size: 24px;
}
.instagram_title span {
  font-size: 16px;
  margin-left: 16px;
}
.instagram_list {
  width: 90%;
  margin: 0 auto;
  display: flex;
  margin-top: 40px;
}
.instagram_list li {
  width: calc(100% / 4 - 15px);
}
.instagram_list li:not(:last-child) {
  margin-right: 30px;
}
.instagram .more_button {
  border: 1px solid #242424;
  width: 180px;
  margin: 60px auto 0;
}
.instagram .more_button a {
  text-align: center;
  padding: 16px 0;
  font-size: 14px;
  color: #242424;
}
.instagram .more_button a:hover {
  color: #fff;
  background: #242424;
}

/*******************
* ACCESS
*******************/
.access {
  background: #f0f0f0;
  padding: 100px 0;
}
.access_title {
  text-align: center;
}
.access_map {
  margin-top: 50px;
}
.access_map iframe {
  width: 100%;
}
.access_detail {
  width: 50%;
  margin: 0 auto;
  margin: 40px auto 0;
}
.access_detail dl {
  display: flex;
}
.access_detail dl:not(:first-child) {
  margin-top: 30px;
}
.access_detail dl dt {
  flex: 1;
  font-size: 14px;
}
.access_detail dl dd {
  flex: 2;
  font-size: 14px;
}
.access_detail dl dd div:not(:first-child) {
  margin-top: 10px;
}

.footer {
  background-color: #242424;
}
.footer_inner {
  width: 80%;
  margin: auto;
  padding: 50px 0;
}
.footer_navi {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}
.footer_navi li {
  margin: 0 10px;
}
.footer_navi li a {
  color: #ffffff;
  font-size: 12px;
}
.footer_sns{
  border-top: 1px solid #7c7c7c;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 30px;
}
.footer_sns ul {
  display: flex;
}
.footer_sns ul li {
  width: 40px;
  height: 40px;
}
.copyright {
  color: #ffffff;
  font-size: 12px;
}
PCはこのようになります

レスポンシブ化する

最後にレスポンシブ化してみましょう。htmlに変更はありませんが、レスポンシブサイト制作①と同じようにheadタグ内にviewportを入れましょう
4. レスポンシブコーディング

<head>
・・・
  <meta name="viewport" content="width=device-width, initial-scale=1">
・・・
</head>

@charset "utf-8";
/************************
* 初期設定
************************/
body{
  font-family: "Yu Gothic", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "MS Pゴシック", sans-serif;
  font-weight: 500;
  letter-spacing : 0.04em;
  -webkit-font-smoothing: antialiased;
  word-break: break-word;
  box-sizing: border-box;
}
a{
  display: block;
  text-decoration: none;
}
img{
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

/*******************
* header
*******************/
header{
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  z-index: 1;
  padding: 10px 20px;
  background: rgba(0, 0, 0, .6);

}
@media screen and (max-width:480px){
  header {
    padding: 20px 0 20px;
    justify-content: center;
  }
}

.navi {
  display: flex;
}
.navi li:not(:last-child) {
  margin-right: 14px;
}
.navi li a {
  color: #fff;
  font-size: 12px;
}
.sns {
  display: flex;
}
@media screen and (max-width:480px){
  .sns {
    display: none;
  }
}
.sns li {
  width: 45px;
  height: 45px;
}

/*******************
* heapage_topder
*******************/
.page_top{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  position: relative;
  background: url(../img/mv.jpg) center/cover no-repeat;
}
@media screen and (max-width:480px){
  .page_top{
    height: 467px;
  }
}
.page_top h1 {
  width: 150px;
}

/*******************
* philosophy
*******************/
.philosophy {
  display: flex;
  height: 680px;
  background-color: #242424;
}
@media screen and (max-width:480px){
  .philosophy {
    flex-direction: column;
  }
}
/* 共通のCSS */
.philosophy_left-box,
.philosophy_right-box {
  width: 50%;
}
@media screen and (max-width:480px){
  .philosophy_left-box,
  .philosophy_right-box {
    width: 100%;
  }
}
/* 個別のCSS */
.philosophy_left-box {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px 10px;
}
@media screen and (max-width:480px){
  .philosophy_left-box {
    padding: 0 20px;
    width: 100%;
    height: 450px;
  }
}

@media screen and (max-width:480px){
  .philosophy_right-box {
    height: 230px;
  }
}

.philosophy_txt-top,
.philosophy_txt-bottom {
  line-height: 1.6;
}
.philosophy_title {
  color: #fff;
}
@media screen and (max-width:480px){
  .philosophy_title {
    text-align: center;
    font-size: 16px;
  }
}
.philosophy_txt-top {
  margin-top: 40px;
  color: #fff;
}
@media screen and (max-width:480px){
  .philosophy_txt-top {
    font-size: 12px;
    line-height: 1.8;
  }
}
.philosophy_txt-bottom {
  margin-top: 20px;
  color: #fff;
}
@media screen and (max-width:480px){
  .philosophy_txt-bottom {
    font-size: 12px;
    line-height: 1.8;
  }
}
.philosophy .more_button {
  margin-top: 50px;
  border: 1px solid #fff;
  width: 180px;
}
@media screen and (max-width:480px){
  .philosophy .more_button {
    width: 100%;
  }
}
.philosophy .more_button a {
  text-align: center;
  padding: 16px 0;
  font-size: 14px;
  color: #fff;
}
.philosophy .more_button a:hover {
  color: #242424;
  background: #fff;
}
/* 個別のCSS */
.philosophy_right-box {
  background: url(../img/philosophy_bg.jpg) center/cover no-repeat;
}

/*******************
* NEWS
*******************/
.news {
  background: #F0F0F0;
  padding: 100px 0;
}
@media screen and (max-width:480px){
  .news {
    padding: 50px 0;
  }
}
.news_title {
  width: 90%;
  margin: 0 auto;
  font-size: 24px;
}
@media screen and (max-width:480px){
  .news_title {
    font-size: 16px;
    display: flex;
    flex-direction: column;
    text-align: center;
  }
}
.news_title span {
  font-size: 16px;
  margin-left: 16px;
}
@media screen and (max-width:480px){
  .news_title span {
    font-size: 12px;
    margin-top: 10px;
  }
}
.news_list {
  width: 90%;
  margin: 0 auto;
  display: flex;
  margin-top: 40px;
}
@media screen and (max-width:480px){
  .news_list {
    flex-wrap: wrap;
  }
}
.news_list li {
  width: calc(100% / 4 - 15px);
}
@media screen and (max-width:480px){
  .news_list li {
    width: calc(100% / 2 - 2%);
  }
}
.news_list li:not(:last-child) {
  margin-right: 30px;
}
@media screen and (max-width:480px){
  .news_list li:not(:last-child) {
    margin-right: 0;
  }
  .news_list li:nth-child(odd) {
    margin-right: 4%;
  }
  .news_list li:nth-child(n+3) {
    margin-top: 24px;
  }
}

.news_txt {
  margin-top: 10px;
  font-size: 14px;
}
.news_txt dd {
 margin-top: 10px;
}
.news .more_button {
  border: 1px solid #242424;
  width: 180px;
  margin: 60px auto 0;
}
@media screen and (max-width:480px){
  .news .more_button {
    width: 90%;
  }
}
.news .more_button a {
  text-align: center;
  padding: 16px 0;
  font-size: 14px;
  color: #242424;
}
.news .more_button a:hover {
  color: #fff;
  background: #242424;
}

/*******************
* INSTAGRAM
*******************/
.instagram {
  background: #fff;
  padding: 100px 0;
}
@media screen and (max-width:480px){
  .instagram {
    width: 100%;
    padding: 50px 0;
  }
}

.instagram_title {
  width: 90%;
  margin: 0 auto;
  font-size: 24px;
}
@media screen and (max-width:480px){
  .instagram_title {
    display: flex;
    flex-direction: column;
    text-align: center;
    font-size: 16px;
  }
}
.instagram_title span {
  font-size: 16px;
  margin-left: 16px;
}
@media screen and (max-width:480px){
  .instagram_title span {
    margin-top: 10px;
    font-size: 12px;
  }
}
.instagram_list {
  width: 90%;
  margin: 0 auto;
  display: flex;
  margin-top: 40px;
}
@media screen and (max-width:480px){
  .instagram_list {
    flex-wrap: wrap;
  }
}
.instagram_list li {
  width: calc(100% / 4 - 15px);
}
@media screen and (max-width:480px){
  .instagram_list li {
    width: calc(100% / 2 - 2%);
  }
}
.instagram_list li:not(:last-child) {
  margin-right: 30px;
}
@media screen and (max-width:480px){
  .instagram_list li:not(:last-child) {
    margin-right: 0;
  }
  .instagram_list li:nth-child(odd) {
    margin-right: 4%;
  }
  .instagram_list li:nth-child(n+3) {
    margin-top: 24px;
  }
}
.instagram .more_button {
  border: 1px solid #242424;
  width: 180px;
  margin: 60px auto 0;
}
@media screen and (max-width:480px){
  .instagram .more_button {
    width: 90%;
  }
}
.instagram .more_button a {
  text-align: center;
  padding: 16px 0;
  font-size: 14px;
  color: #242424;
}
.instagram .more_button a:hover {
  color: #fff;
  background: #242424;
}

/*******************
* ACCESS
*******************/
.access {
  background: #f0f0f0;
  padding: 100px 0;
}
@media screen and (max-width:480px){
  .access {
    padding: 50px 0;
  }
}
.access_title {
  text-align: center;
}
.access_map {
  margin-top: 50px;
}
.access_map iframe {
  width: 100%;
}
.access_detail {
  width: 50%;
  margin: 0 auto;
  margin: 40px auto 0;
}
@media screen and (max-width:480px){
  .access_detail {
    width: 80%;
  }
}
.access_detail dl {
  display: flex;
}
@media screen and (max-width:480px){
  .access_detail dl {
    flex-direction: column;
  }
}
.access_detail dl:not(:first-child) {
  margin-top: 30px;
}
@media screen and (max-width:480px){
  .access_detail dl:not(:first-child) {
    margin-top: 40px;
  }
}
.access_detail dl dt {
  flex: 1;
  font-size: 14px;
}
@media screen and (max-width:480px){
  .access_detail dl dt {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 8px;
  }
}
.access_detail dl dd {
  flex: 2;
  font-size: 14px;
}
.access_detail dl dd div:not(:first-child) {
  margin-top: 10px;
}

.footer {
  background-color: #242424;
}
.footer_inner {
  width: 80%;
  margin: auto;
  padding: 50px 0;
}
.footer_navi {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}
@media screen and (max-width:480px){
  .footer_navi {
    flex-direction: column;
    align-items: center;
  }
}
.footer_navi li {
  margin: 0 10px;
}
@media screen and (max-width:480px){
  .footer_navi li:not(:last-child) {
    margin-bottom: 10px;
  }
}
.footer_navi li a {
  color: #ffffff;
  font-size: 12px;
}
@media screen and (max-width:480px){
  .footer_navi li a {
    padding: 10px 0;
  }
}
.footer_sns{
  border-top: 1px solid #7c7c7c;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 30px;
}
.footer_sns ul {
  display: flex;
}
.footer_sns ul li {
  width: 40px;
  height: 40px;
}
.copyright {
  color: #ffffff;
  font-size: 12px;
}
完成版はこのようになります
powerd by