課題11 - Flower Coffee

Flower Coffee

画像

ブログ画像は、「幅：700px」「高さ：350px」

← logo.png（透過PNG）
← logo_white.png（透過PNG）

unsplash.com
unsplash.com
unsplash.com
unsplash.com
unsplash.com
unsplash.com
unsplash.com
unsplash.com

テキスト

Flower Coffee

menu
blog
access

Concept
心静かにコーヒーを
立ち止まって、 空の青さを眺めて、 一息つきましょう。

Blog

よりすぐりのコーヒ豆を厳選して提供致します。
2030.08.08

軽くて甘みがあるマカロンをどうぞ。
2030.08.05

コーヒーカップも販売しております。
2030.08.02

プレゼント用のコーヒーを販売中です。
2030.07.28

カフェラテもお勧めです。
2030.07.27

ブログをはじめました。
2030.07.26

ブログ一覧


© Flower Coffee

制作ポイント

マルチデバイス対応の可変レイアウトにする

  .blog > ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    column-gap: 2%;
    row-gap: 20px;
  }

スマートフォンとPCのトップ画像を切り替える

pictureタグを使ってレスポンシブに画像を切り替える
srcset属性は、後述するmedia属性で条件が一致したときに表示する画像のパスを記述します
media属性は下記のようにmax-widthを使って条件を記述することもできます

<div class="main_visual">
  <picture>
    <source media="(max-width: 600px)" srcset="img/sp_visual.webp">
    <img src="img/main-visual.webp" alt="">
  </picture>
</div><!-- /.main_visual -->

記述例

<!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="main_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>

@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;
}

/* --------------------------------
  body
-------------------------------- */
body {
  background-color: #fff;
  color: #333;
  font-size: 16px;
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.0;
}

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

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

/* --------------------------------
  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);
          }

/* --------------------------------
  main
-------------------------------- */
.concept {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-auto-flow: column;
  justify-content: left;
  margin-inline: auto;
  padding-block: 50px;
}
  .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-block: 20px 30px;
      color: #b4756e;
      font-size: 2.0rem;
      font-weight: 600;
    }
    .concept_copy > p {
      line-height: 2.0;
    }

/* ----------- blog ------------ */
.blog {
  padding-block: 0 20px;
}
  .blog > ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    column-gap: 2%;
    row-gap: 20px;
  }
  .blog h2 {
    position: relative;
    padding-block: 40px 70px;
    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;
  }

/* ------------ 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;
  }

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