課題11 Flower Coffee

課題11 Flower Coffee 完成例

記述ポイント

• 横並びを縦並びに変更するために、メディアクエリ内で「display: block;」を指定する
• 文字を読みやすくサイズ変更

style.css

@charset "UTF-8";

/* --------------------------------
  reset
-------------------------------- */
*, *::before, *::after {
  margin: 0;
  padding: 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: "Noto Sans JP", sans-serif;
  line-height: 1.0;
}


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

@media screen and (max-width: 767px) {
  .container {
    padding: 0 1.0rem;
  }
}


/* --------------------------------
  header
-------------------------------- */
.header {
  text-align: center;
}
  h1 > img {
    width: 360px;
    padding: 30px 0;
  }

@media screen and (max-width: 767px) {
  h1 > img {
    width: 200px;
    padding: 20px 0;
  }
}


/* --------------------------------
  nav
-------------------------------- */
.gnav {
  padding-block: 40px;
}
  .gnav > ul {
    display: grid;
    grid-auto-flow: column;
    justify-content: center;
    gap: 80px;
  }
  .gnav li {
    font-size: 1.25rem;
    font-family: "Arial", sans-serif;
    letter-spacing: 0.1em;
  }
    .gnav li a{
      position: relative;
      }
      .gnav li.current a,
      .gnav li a:hover{
        color:#0497a2;
      }
        .gnav li a::after {
          content: '';
          position: absolute;
          bottom: -4px;
          left: -10%;
          width: 120%;
          height: 2px;
          background:#0497a2;
          transition: all .3s;
          transform: scale(0, 1);
          transform-origin: center top;
        }
          .gnav li.current a::after,
          .gnav li a:hover::after {
              transform: scale(1, 1);
          }

@media screen and (max-width: 767px) {
  .gnav > ul {
    gap: 40px;
  }
}

          
/* --------------------------------
  main
-------------------------------- */
.concept {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-auto-flow: column;
  justify-content: left;
  margin-inline: auto;
  padding: 50px 0;
}
  .concept > img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
  .concept_copy {
    display: grid;
    place-content: center;
    padding-left: 20px;
    letter-spacing: 0.1em;
  }
    .concept_copy > h2 {
      font-size: 1.0rem;
      font-family: "Arial", sans-serif;
      font-weight: normal;
    }
    .concept_copy > h3 {
      margin: 20px 0;
      color: #b4756e;
      font-size: 2.0rem;
      font-weight: 600;
    }
    .concept_copy > p {
      line-height: 2.0;
    }

@media screen and (max-width: 767px) {
  .concept {
    display: block;
    padding: 20px 0;
  }
  .concept > img {
    margin-bottom: 20px;
  }
  .concept_copy > h3 {
    margin: 10px 0;
    color: #b4756e;
    font-size: 2.0rem;
    font-weight: 600;
  }
  .concept_copy > p {
    line-height: 1.6;
  }
}


/* ----------- blog ------------ */
.blog {
  padding: 0;
}
  .blog > ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    column-gap: 2%;
    row-gap: 20px;
  }
  .blog h2 {
    position: relative;
    margin-bottom: 10px;
    padding: 40px 0;
    font-size: 1.0rem;
    font-family: "Arial", sans-serif;
    font-weight: normal;
    text-align: center;
    letter-spacing: 0.1em;
  }
    .blog h2::after {
      position: absolute;
      content: "ブログ";
      top: 60px;
      right: 0;
      bottom: 0;
      left: 0;
      color: #b4756e;
      font-size: 2.0rem;
      font-weight: 600;
    }
  .blog h3 {
    margin-block: 12px;
    font-size: 0.9375rem;
    line-height: 1.4;
  } 
  .blog p {
    font-size: 0.9375rem;
  }

@media screen and (max-width: 767px) {
  .blog h3 {
    margin-bottom: 8px;
    line-height: 1.2;
  } 
}


/* ------------ btn ------------- */
  .btn {
    margin-top: 40px;
    text-align: center;
  }
  .btn > a {
    position: relative;
    display: inline-block;
    margin-block: 40px;
    padding: 20px 80px;
    border: 1px solid #b4756e;
    color: #b4756e;
    text-align: center;
  }
  .btn > a::after {
    position: absolute;
    content: "▶";
    top: 22px;
    right: 16px;
    font-size: 0.5625rem;
  }

@media screen and (max-width: 767px) {
  .btn {
    margin-top: 0;
  }
}


/* --------------------------------
  footer
-------------------------------- */
.footer {
  padding: 30px 0;
  background-color: #000;
  color: #fff;
  text-align: center;
}
  .footer img {
    width: 180px;
    margin: 40px 0;
  }
  .footer small {
    font-size: 0.75rem;
  }

@media screen and (max-width: 767px) {
  .footer {
    padding: 20px 0;
  }
  .footer img {
    width: 120px;
    margin: 10px 0;
  }
}

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>【コーディング練習】Flower Coffee</title>
<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=Noto+Sans+JP:wght@100..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- header -->
<header class="header">
  <h1><img src="img/logo.png" alt="Sky Coffee"></h1>
  <div class="key_visual">
    <picture>
      <source media="(max-width: 600px)" srcset="img/sp_visual.webp">
      <img src="img/main-visual.webp" alt="">
    </picture>
  </div><!-- /.main_visual -->
  <nav class="gnav">
    <ul>
      <li><a href="#">menu</a></li>
      <li><a href="#">blog</a></li>
      <li><a href="#">access</a></li>
    </ul>
  </nav>
</header>
<!-- ▲ header -->

<!-- main -->
<main class="main">
  <div class="container">
    <!-- concept -->
    <section class="concept">
      <img src="img/concept.webp" alt="">
      <div class="concept_copy">
        <h2>Concept</h2>
        <h3>心静かにコーヒーを</h3>
        <p>立ち止まって、
          空の青さを眺めて、
          一息つきましょう。</p>
      </div><!-- /.concept_copy -->
    </section>
    <!-- blog -->
    <section class="blog">
      <h2>Blog</h2>
      <ul>
        <li>
          <a href="#">
            <img src="img/thumbnail01.webp" alt="青いトラック">
            <h3>よりすぐりのコーヒ豆を厳選して提供致します。</h3>
            <p><time datetime="2030-08-08">2030.08.08</time></p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="img/thumbnail02.webp" alt="牛乳">
            <h3>軽くて甘みがあるマカロンをどうぞ。</h3>
            <p><time datetime="2030-08-05">2030.08.05</time></p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="img/thumbnail03.webp" alt="音楽アプリ">
            <h3>コーヒーカップも販売しております。</h3>
            <p><time datetime="2030-08-02">2030.08.02</time></p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="img/thumbnail04.webp" alt="山々">
            <h3>プレゼント用のコーヒーを販売中です。</h3>
            <p><time datetime="2030-07-28">2030.07.28</time></p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="img/thumbnail05.webp" alt="青とピンクのグラデーション">
            <h3>カフェラテもお勧めです。</h3>
            <p><time datetime="2030-07-27">2030.07.27</time></p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="img/thumbnail06.webp" alt="コーヒーと手帳">
            <h3>ブログをはじめました。</h3>
            <p><time datetime="2030-07-26">2030.07.26</time></p>
          </a>
        </li>
      </ul>
      <p class="btn"><a href="#">ブログ一覧</a></p>
    </section>
  </div><!-- /.container -->
</main>
<!-- /main -->

<!-- footer -->
<footer class="footer">
  <img src="img/logo_white.png" alt="">
  <p><small>&copy; Flower Coffee</small></p>
</footer>
<!-- /footer -->
</body>
</html>