見出し画像

コーディング練習 入門編：カフェサイト No.3

Toyo

今回はパソコンサイトのコーディングです。
コードはBEM記法にしました。
現在、Sassについて勉強中で、中級編が終えた頃にまとめてCSSはSassのネストにしようと思っています。
メニューの「blog」をクリックするとblogへ移動するようにしました。

記事の内容は主に練習結果で、作成方法の説明ではありません。

作成したコードはこちらです。
HTML

<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Sky Coffee</title>
    <link href="css/destyle.css" rel="stylesheet" />
    <link href="style.css" rel="stylesheet" />
  </head>

  <body class="body">
    <!-- header -->
    <header class="header">
      <h1 class="header-logo">
        <a href="#"
          ><img class="header-logo__img" src="images/logo.png" alt="SKY COFFEE"
        /></a>
      </h1>
    </header>
    <!-- /header -->

    <!-- main-visual -->
    <div class="mv">
      <div class="mv-imgArea">
        <img class="mv-imgArea__img" src="images/pc_main-visual.jpg" alt="複数の青いカップのコーヒー">
      </div>
    </div>
    <!-- /main-visual -->

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

    <!-- concept -->
    <section class="concept">
      <div class="concept-container">
        <div class="concept-imgArea">
          <img
            class="concept-imgArea__img"
            src="images/concept.jpg"
            alt="青いカップのコーヒー"
            width="750"
            height="759"
          />
        </div>
        <div class="concept-desc">
          <div class="concept-desc__subtitle">Concept</div>
          <h2 class="concept-desc__title">心静かにコーヒーを</h2>
          <div class="concept-desc__text">
            <p>
              立ち止まって、<br />
              空の青さを眺めて、<br />
              一息つきましょう。
            </p>
          </div>
        </div>
      </div>
    </section>
    <!-- /concept -->

    <!-- blog -->
    <section class="blog" id="blog">
      <div class="blog-container">
        <h2 class="blog-container__title">
          blog<span class="blog-container__subtitle">ブログ</span>
        </h2>

        <div class="blog-desc">
          <div class="blog-desc-box">
            <a class="blog-desc-box__link" href="#">
              <div class="blog-imgArea">
                <img
                  class="blog-imgArea__img"
                  src="images/thumbnail01.jpg"
                  alt="青いトラック"
                  width="700"
                  height="357"
                />
              </div>
              <div class="blog-imgArea__title">コーヒーカー始めました。</div>
              <div class="blog-imgArea__date">2030.08.08</div>
            </a>
          </div>

          <div class="blog-desc-box">
            <a class="blog-desc-box__link" href="#">
              <div class="blog-imgArea">
                <img
                  class="blog-imgArea__img"
                  src="images/thumbnail02.jpg"
                  alt="牛乳"
                  width="700"
                  height="357"
                />
              </div>
              <div class="blog-imgArea__title">
                濃厚クリーミーなミルクをどうぞ
              </div>
              <div class="blog-imgArea__date">2030.08.05</div>
            </a>
          </div>

          <div class="blog-desc-box">
            <a class="blog-desc-box__link" href="#">
              <div class="blog-imgArea">
                <img
                  class="blog-imgArea__img"
                  src="images/thumbnail03.jpg"
                  alt="音楽アプリ"
                  width="700"
                  height="357"
                />
              </div>
              <div class="blog-imgArea__title">
                Sky Coffeeのオリジナル曲が完成！無料ダウンロード可能です。
              </div>
              <div class="blog-imgArea__date">2030.08.02</div>
            </a>
          </div>

          <div class="blog-desc-box">
            <a class="blog-desc-box__link" href="#">
              <div class="blog-imgArea">
                <img
                  class="blog-imgArea__img"
                  src="images/thumbnail04.jpg"
                  alt="山々"
                  width="700"
                  height="357"
                />
              </div>
              <div class="blog-imgArea__title">
                ハイキング用のコーヒーを販売中です。
              </div>
              <div class="blog-imgArea__date">2030.07.28</div>
            </a>
          </div>

          <div class="blog-desc-box">
            <a class="blog-desc-box__link" href="#">
              <div class="blog-imgArea">
                <img
                  class="blog-imgArea__img"
                  src="images/thumbnail05.jpg"
                  alt="青とピンクのグラデーション"
                  width="700"
                  height="357"
                />
              </div>
              <div class="blog-imgArea__title">
                ショップの壁を塗ってみました。
              </div>
              <div class="blog-imgArea__date">2030.07.27</div>
            </a>
          </div>

          <div class="blog-desc-box">
            <a class="blog-desc-box__link" href="#">
              <div class="blog-imgArea">
                <img
                  class="blog-imgArea__img"
                  src="images/thumbnail06.jpg"
                  alt="コーヒーと手帳"
                  width="700"
                  height="357"
                />
              </div>
              <div class="blog-imgArea__title">ブログをはじめました。</div>
              <div class="blog-imgArea__date">2030.07.26</div>
            </a>
          </div>

        </div>

        <div class="blog-btn">
          <a href="#" class="blog-btn__link"> ブログ一覧 </a>
        </div>

      </div>
    </section>
    <!-- /blog -->

    <!-- footer -->
    <footer class="footer">
      <div class="footer-logo">
        <a class="footer-logo__link" href="#"
          ><img
            class="footer-logo__img"
            src="images/logo-white.png"
            alt="SKY COFFEE"
            width="200"
            height="40"
        /></a>
      </div>
      <div class="footer-copyright">&copy;Sky Coffee</div>
    </footer>
    <!-- /footer -->
    
  </body>
</html>

CSS

@charset "UTF-8";

/*--------------------------------
全体
---------------------------------*/
.body {
  font-family: Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo,
    sans-serif;
  font-size: 16px;
  color: #333;
}

/*--------------------------------
ヘッダー
---------------------------------*/
.header {
  padding: 50px 0;
}

.header-logo {
  width: 280px;
  margin: 0 auto;
}

.header-logo__img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

/*--------------------------------
メインビジュアル
---------------------------------*/
.mv-imgArea__img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

/*--------------------------------
グローバルナビ
---------------------------------*/
.gnav {
  padding: 40px 0;
}

.gnav-inner {
  display: flex;
  justify-content: center;
}

.gnav-inner__title {
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0.1em;
  margin-right: 80px;
}

.gnav-inner__title:last-child {
  margin-right: 0;
}

.gnav-inner__link {
  text-decoration: none;
  transition: 0.3s;
}

.gnav-inner__link:hover {
  opacity: 0.8;
}

/*--------------------------------
コンセプト
---------------------------------*/
.concept {
  padding: 50px 0;
}

.concept-container {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 30px;
  display: flex;
  align-items: center;
}

.concept-imgArea {
  width: 50%;
}

.concept-imgArea__img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

.concept-desc {
  width: 50%;
  padding-right: 20px;
  padding-left: 40px;
}

.concept-desc__subtitle {
  font-size: 16px;
  letter-spacing: 0.1em;
  margin-bottom: 20px;
}

.concept-desc__title {
  font-size: 32px;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.1em;
  color: #24a8bf;
  margin-bottom: 30px;
}

.concept-desc__text {
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.1em;
}

/*--------------------------------
ブログ記事一覧
---------------------------------*/
.blog {
  padding: 50px 0;
}

.blog-container {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 30px;
}

.blog-container__title {
  font-size: 32px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.08em;
  color: #24a8bf;
  text-align: center;
  margin-bottom: 30px;
}

.blog-container__subtitle {
  display: block;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.03em;
  color: #333;
  margin-top: 8px;
}

.blog-desc {
  display: flex;
  flex-flow: wrap;
}

.blog-desc-box {
  width: calc((100% - 60px) / 3);
  margin-right: 30px;
  margin-bottom: 30px;
  /* flex: 0 1 calc((100% - 60px) / 3); */
}

.blog-desc-box:nth-child(3n) {
  margin-right: 0;
}

.blog-desc-box__link {
  text-decoration: none;
  transition: 0.3s;
}

.blog-desc-box__link:hover {
  opacity: 0.8;
}

.blog-imgArea {
  margin-bottom: 12px;
}

.blog-imgArea__img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

.blog-imgArea__title {
  font-size: 15px;
  font-weight: bold;
  line-height: 1.6;
}

.blog-imgArea__date {
  font-size: 12px;
  margin-top: 6px;
}

.blog-btn {
  display: block;
  position: relative;
  width: 220px;
  font-size: 15px;
  font-weight: bold;
  line-height: 1;
  color: #24a8bf;
  text-align: center;
  margin: 0 auto;
  padding: 18px 0;
  transition: opacity 0.3s;
  border: 1px solid #24a8bf;
  border-radius: 3px;
}

.blog-btn::after {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  right: 1em;
  width: 5px;
  height: 9px;
  transform: translateY(-50%);
  background-image: url("./images/icon_arrow-right.png");
  background-repeat: no-repeat;
  background-size: 5px 9px;
}

.blog-btn__link {
  text-decoration: none;
  transition: 0.3s;
}

.blog-btn__link:hover {
  opacity: 0.8;
}

/*--------------------------------
フッター
---------------------------------*/
.footer {
  padding: 70px 0 30px;
  background-color: #000;
}

.footer-logo {
  width: 180px;
  margin: 0 auto;
  margin-bottom: 50px;
}

.footer-logo__link {
  text-decoration: none;
  transition: 0.3s;
}

.footer-logo__link:hover {
  opacity: 0.8;
}

.footer-logo__img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

.footer-copyright {
  font-size: 12px;
  letter-spacing: 0.05em;
  color: #8b8b8b;
  text-align: center;
}


テキストエディタは「Cursor（カーソル）」を使っています。

Cursor（カーソル）の画面

最近使い始めましたが、以前使っていた「VSCode」を基にして作られたものなので、難なく使うことができました。大きく異なる点はコーディングをサポートしてくれるAI機能（ChatGPT）が付いていることです。
無料版を利用しているのでAI機能の使用回数に制限があるが、無料で利用できる生成AI（ChatGPT、Copilot、Gemini）を使えば無料版でも十分だと思います。

完成したものは画像では上手く伝えることができないので動画にしました。
動画には音声はありません、無音です。
ご覧いただけましたら幸いです。


教材として使っている「無料コーディング練習所」は下記サイトにあります。

（https://webdesigner-go.com/coding-practice/）


以前に投稿した記事


よろしければサポートお願いします！いただいたサポートはクリエーターとしての活動費に使わせていただきます！