課題08 宅配朝食サービス

課題08 宅配朝食サービス完成例

記述ポイント

スマートフォンでは、「ロゴ」を「ホームボタン」の替わりに設定し、メニューからは削除
ナビゲーションは、押しやすい間隔で配置
ボタン（CTA）を、角丸ではなくスマートフォンの横幅いっぱいにして押しやすくする
画像は、スマートフォンで見やすい大きさに変更

style.css

@charset "UTF-8";

/* -------------------------------------------
  reset
------------------------------------------- */
*, *::before, *::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
ul {
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
  vertical-align: bottom;
}
html {
  font-size: 100%;
}


/* -------------------------------------------
  body
------------------------------------------- */
body {
  background-color: #fff;
  color: #333;
  font-size: 1.0rem;
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  line-height: 1.7;
  overflow-x: hidden;
}


/* -------------------------------------------
  layout
------------------------------------------- */
.container {
  width: min(90%, 1240px);
  margin: 0 auto;
}


/* -------------------------------------------
  header
------------------------------------------- */
.header {
  width: 100%;
  height: auto;
  padding: 30px 0 50px;
  text-align: center;
}
  header > .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
    .header h1 {
      color: #0f9969;
      font-size: 44px;
      font-weight: 700;
    }

@media screen and (max-width: 767px) {
  header > .container {
    display: block;
  }
}


/* -------------------------------------------
  nav
------------------------------------------- */
.gnav > ul {
  display: flex;
  justify-content: center;
}
  .gnav li {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.1em;
  }
  .gnav li > a {
    display: block;
    padding: 6px 16px;
  }
  .gnav li > a:hover, .current {
    background-color: #0f9969;
    color: #fff;
  }

@media screen and (max-width: 767px) {
  header > .container {
    display: block;
  }
  .gnav > ul li:first-child {
    display: none;
  }
  .gnav li > a {
    padding: 6px 10px;
  }
}


/* -------------------------------------------
  main
------------------------------------------- */
.main {
  margin-bottom: 70px;
}
  .hero > .container {
    display: flex;
    gap: 40px;
  }

/* ---------- description ---------- */
.description {
  width: 42%;
}
  .description h2 {
    font-size: 44px;
    font-family: serif;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 25px;
  }
  .description p {
    font-size: 18px;
    margin-bottom: 35px;
  }
  /* CTA */
  .cta {
    display: flex;
  }
  .cta li a {
    display: inline-block;
    padding: 8px 26px;
    border: 2px solid #076343;
    border-radius: 50px;
    font-weight: 600;
    text-align: center;
    transition-duration: .3s;
  }
    .cta li:first-child a {
      background-color: #076343;
      color: #fff;
      margin: 0 15px 10px 0;
    }
    .cta li:first-child a:hover {
      background-color: #0f9969;
      border: 2px solid #0f9969;
      color: #fff;
    }
    .cta a:last-child:hover {
      background-color: #fff;
      border: 2px solid #fff;
      color: #222222;
      box-shadow: 0 0 10px #21212160;
    }

/* ---------- main_visual ---------- */
.main_visual {
  width: 78%;
  margin-right: -20%;
}
  .main_visual > img {
    width: 100%;
    height: 70vh;
    object-fit: cover;
    object-position: left bottom;
  }

@media screen and (max-width: 767px) {
  .main {
    margin-bottom: 30px;
  }
  .hero > .container {
    display: block;
  }
  .description {
    width: 100%;
  }
  .main_visual {
    width: 100%;
    margin-right: 0;
  }
  .main_visual > img {
    width: 100%;
    height: 40vh;
  }
  .cta {
    display: block;
  }
  .cta li a {
    display: block;
    width: 100%;
    margin-bottom: 20px;
    border-radius: 0;
    font-weight: 600;
    transition-duration: .3s;
  }
}


/* -------------------------------------------
  footer
------------------------------------------- */
.footer ul {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}
  .footer li > a {
    display: block;
    padding: 2px 16px 0;
    border-bottom: 2px solid transparent;
    color: #0f9969;
  }
  .footer li > a:hover {
    border-bottom: 2px solid #0f9969;
  }
  .copy {
    margin-bottom: 20px;
    text-align: center;
  }

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>宅配朝食サービス</title>
<link rel="icon" href="favicon.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Noto+Sans+JP:wght@100..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>

<!-- header -->
<header class="header">
  <div class="container">
    <h1 class="logo"><a href="index.html">foodie.</a></h1>
    <nav class="gnav">
      <ul>
        <li><a href="#" class="current">ホーム</a></li>
        <li><a href="#">メニュー</a></li>
        <li><a href="#">プラン</a></li>
        <li><a href="#">料金</a></li>
        <li><a href="#">店舗</a></li>
      </ul>
    </nav>
  </div><!-- /.container -->
</header>
<!-- /header -->

<!-- main -->
<main class="main">
    <section class="hero">
      <div class="container">
        <div class="description">
          <h2>朝は、<br>手軽で美味しい<br>朝食を</h2>
          <p>プランを 1 つ選択し、配達時間を入力すると
            、<br>家から出ることなくおいしい料理をお楽しみいただけます。</p>
          <ul class="cta">
            <li><a href="#">今すぐ注文</a></li>
            <li><a href="#">詳細を見る</a></li>
          </ul><!-- /.cta -->
        </div><!-- /.description -->
        <div class="main_visual">
          <img src="img/main.webp" alt="">
        </div><!-- /.main_visual -->
      </div><!-- /.container -->
    </section>
</main>
<!-- /main -->

<!-- footer -->
<footer class="footer">
  <div class="container">
    <ul>
      <li><a href="#">twitter</a></li>
      <li><a href="#">Instagram</a></li>
      <li><a href="#">YouTube</a></li>
    </ul>
    <p class="copy"><small>&copy; foodie.</small></p>
  </div><!-- /.container -->
</footer>
<!-- /footer -->

</body>
</html>