【入門編】カフェサイトのコーディング練習

カフェサイトのコーディング練習

記述例 - 参考サイト例との違い

モバイルファーストで記述
リセットCSSは、独自CSS内に記述
コーディンは、アウトラインのツリー構造を意識しながらマークアップ

クラス名は、ほぼ参考ページと同様に設定
navのリストは、paddingで面を広げてボタンとして役割をもたせてある
navのリストは、Flexboxで横並びを指定
「Concept」と「blog」の横並びは、CSS Gridで指定
ブログ内の「日付」にtime要素を使用
ブログ内の「日付」と「タイトル」の順序を変更
ボタン内の「矢印」は、FontAwesome6 で設定
画像は、引用元のまま

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>【コーディング練習】Sky Coffee</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- .header -->
<header class="header">
  <h1 class="logo"> <a href="#"><img src="img/logo.png" alt="SKY COFFEE"></a></h1>
</header>
<!-- /.header -->

<!-- .main-visual -->
<div class="main-visual">
  <picture>
    <source media="(min-width: 768px)" srcset="img/pc_main-visual.jpg">
    <img src="img/sp_main-visual.jpg" alt="複数の青いカップのコーヒー">
  </picture>
</div>
<!-- /.main-visual -->

<!-- global-nav -->
<nav class="gnav">
  <ul>
    <li><a href="#">menu</a></li>
    <li><a href="#">blog</a></li>
    <li><a href="#">access</a></li>
  </ul>
</nav>
<!-- /global-nav -->

<!-- .main-content -->
<main class="main-content">

<!-- .concept -->
<section class="concept">
  <div class="container">
    <div class="img">
      <img src="img/concept.jpg" alt="青いカップのコーヒー">
    </div>
    <div class="text-block">
      <div class="subtitle">Concept</div>
      <h2 class="title">心静かにコーヒーを</h2>
        <p>
          立ち止まって、<br>
          空の青さを眺めて、<br>
          一息つきましょう。
        </p>
    </div><!-- /.text-block -->
  </div><!-- /.container -->
</section>
<!-- /.concept -->

<!-- .blog -->
<section class="blog">
  <div class="container">
    <h2 class="heading">blog<br>ブログ</h2>
    <div class="list">
      <div class="item">
        <a href="#">
          <div class="img"><img src="img/thumbnail01.jpg" alt="青いトラック"></div>
          <time datetime="2030.08.08" class="dtime">2030.08.08</time>
          <div class="title">コーヒーカー始めました。</div>
        </a>
      </div>
      <div class="item">
        <a href="#">
          <div class="img"><img src="img/thumbnail02.jpg" alt="牛乳"></div>
          <time datetime="2030.08.05" class="dtime">2030.08.05</time>
          <div class="title">濃厚クリーミーなミルクをどうぞ</div>
        </a>
      </div>
      <div class="item">
        <a href="#">
          <div class="img"><img src="img/thumbnail03.jpg" alt="音楽アプリ"></div>
          <time datetime="2030.08.02" class="dtime">2030.08.02</time>
          <div class="title">Sky Coffeeのオリジナル曲が完成！<br>無料ダウンロード可能です。</div>
        </a>
      </div>
      <div class="item">
        <a href="#">
          <div class="img"><img src="img/thumbnail04.jpg" alt="山々"></div>
          <time datetime="2030.07.28" class="dtime">2030.07.28</time>
          <div class="title">ハイキング用のコーヒーを販売中です。</div>
        </a>
      </div>
      <div class="item">
        <a href="#">
          <div class="img"><img src="img/thumbnail05.jpg" alt="青とピンクのグラデーション"></div>
          <time datetime="2030.07.27" class="dtime">2030.07.27</time>
          <div class="title">ショップの壁を塗ってみました。</div>
        </a>
      </div>
      <div class="item">
        <a href="#">
          <div class="img"><img src="img/thumbnail06.jpg" alt="コーヒーと手帳"></div>
          <time datetime="2030.07.26" class="dtime">2030.07.26</time>
          <div class="title">ブログをはじめました。</div>
        </a>
      </div>
    </div>
    <a href="#" class="btn">
      ブログ一覧<i class="fa-solid fa-angles-right"></i>
    </a>
  </div><!-- /.container -->
</section>
<!-- /.blog -->

</main>
<!-- /.main-content -->

<!-- .footer -->
<footer class="footer">
  <p class="logo"><a href="#"><img src="img/logo-white.png" alt="SKY COFFEE"></a></p>
  <p class="copyright"><small>&copy;Sky Coffee</small></p>
</footer>
<!-- /.footer -->
<script src="https://kit.fontawesome.com/1965ed1cf3.js" crossorigin="anonymous"></script>
</body>
</html>

@charset "URF-8";

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


/* --------------------------------------
  body
-------------------------------------- */
body {
  color: #333;
  font-size: 16px;
  font-family: Arial, sans-serif;
  line-height: 1.0;
}


/* --------------------------------------
  layout
-------------------------------------- */
.container {
  padding: 0 20px;
}

@media screen and (min-width: 768px) {
  .container {
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 30px;
  }
}

/* --------------------------------------
  header
-------------------------------------- */
.header {
  padding: 30px 0;
}
  .header .logo {
    width: 160px;
    margin: 0 auto;
  }
@media screen and (min-width: 768px) {
  .header {
    padding: 50px 0;
  }
    .header .logo {
      width: 280px;
    }
}


/* --------------------------------------
  nav
-------------------------------------- */
.gnav {
  padding: 20px 0;
}
  .gnav ul {
    display: flex;
    justify-content: center;
  }
    .gnav li {
      letter-spacing: 0.1em;
    }
    .gnav a {
      display: block;
      padding: 10px 25px;
    }

@media screen and (min-width: 768px) {
  .gnav li {
    font-size: 18px;
  }
  .gnav a {
    display: block;
    padding: 20px 40px;
  }
}


/* --------------------------------------
  main
-------------------------------------- */

/* ----------- concept ----------- */
.concept {
  padding: 40px 0;
}
  .text-block {
    padding: 36px 20px 0;
  }
  .text-block .subtitle {
    margin-bottom: 20px;
    font-size: 15px;
    letter-spacing: 0.1em;
  }
  .text-block .title {
    margin-bottom: 20px;
    color: #24a8bf;
    font-size: 26px;
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: 0.1em;
  }
  .text-block p {
    font-size: 15px;
    line-height: 1.8;
    letter-spacing: 0.1em;
  }

@media screen and (min-width: 768px) {
  .concept {
    padding: 50px 0;
  }
  .concept > .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    align-items: center;
  }
    .text-block .subtitle {
      font-size: 16px;
    }
    .text-block .title {
      margin-bottom: 30px;
      font-size: 32px;
    }
    .text-block p {
      font-size: 16px;
    }
}

/* ----------- blog ----------- */
.blog {
  padding: 40px 0;
}
  .blog .heading {
    margin-bottom: 30px;
    color: #333;
    font-size: 13px;
    font-weight: normal;
    letter-spacing: 0.03em;
    text-align: center;
  }
  .blog .heading::first-line {
    color: #24a8bf;
    font-size: 30px;
    font-weight: bold;
    line-height: 1.8;
    letter-spacing: 0.08em;
  }
    .blog .item a {
      display: block;
    }
      .blog .item a:hover {
        opacity: .7;
      }
        .blog .img {
          margin-bottom: 12px;
        }
        .dtime {
          display: block;
          margin-bottom: 8px;
        }
        .blog .title {
          margin-bottom: 20px;
          font-weight: bold;
          line-height: 1.5;
        }

@media screen and (min-width: 768px) {
  .blog .list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 30px;
  }
  .blog .heading::first-line {
    color: #24a8bf;
    font-size: 32px;
    font-weight: bold;
    line-height: 1.4;
    letter-spacing: 0.08em;
  }
  .blog .title {
    margin-bottom: 0;
  }
}

/* ----------- button ----------- */
  a.btn {
    display: block;
    width: 220px;
    margin: 0 auto;
    padding: 18px 0;
    border: 1px solid #24a8bf;
    border-radius: 3px;
    color: #24a8bf;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    transition: 0.3s;
    position: relative;
  }
    a.btn:hover {
      opacity: 0.7;
    }
    a.btn i {
      margin-left: 20px;
    }

/* --------------------------------------
  footer
-------------------------------------- */
.footer {
  padding: 70px 0 30px;
  background-color: #000;
}
  .footer .logo {
    width: 180px;
    margin: 0 auto;
    margin-bottom: 50px;
  }
  .footer .copyright {
    font-size: 14px;
    letter-spacing: 1px;
    color: #8b8b8b;
    text-align: center;
  }