見出し画像

コーディング練習 初級編：企業サイト No.2

Toyo

今回はパソコンサイトのコーディングです。
コードはBEM記法にしました。
現在、Sassについて勉強中で、中級編が終えた頃にまとめてCSSはSassのネストにしようと思っています。
教材は「無料コーディング練習所」にある「初級編：企業サイト」を使いました。
教材の完成版（コーディングしたもの）は下記のサイトにあります。


なお、コーディング練習を始める前に、コーディング学習オンラインサービスの「ドットインストール」と「Progate」でホームページのコーディングに必要なことを学びました。

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

作成したコードはこちらです。
HTML（ホーム）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="description"
    content="株式会社STARTは、幸せにつながるお仕事を紹介する人材紹介会社です。人材紹介サービス『スタート』や人材紹介SNS『ゴール』を運営し、またWebデザインを学べるスクール『Webの学校』を開講しています。" />
  <title>START</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@500;700&family=Roboto:wght@400;700&display=swap"
    rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
  <link href="css/destyle.css" rel="stylesheet" />
  <link href="style.css" rel="stylesheet" />
  <link rel="icon" type="image/png" href="icon-192x192.png">
  <link rel="apple-touch-icon" type="image/png" href="apple-touch-icon-180x180.png">
  <link rel="icon" href="favicon.ico">
</head>

<body class="body">

    <!-- header -->
    <header class="header">
      <div class="header-logo">
        <a href="index.html"><img class="header-logo__img" src="img/logo.svg" alt="START"></a>
      </div>
      <div class="header-nav">
        <nav id="js-gnav" class="header-nav-inner">
          <ul class="header-navArea">
            <li class="header-navArea-box"><a class="header-navArea-box__link header-navArea-box__link--active" href="index.html">ホーム</a></li>
            <li class="header-navArea-box"><a class="header-navArea-box__link" href="message.html">メッセージ</a></li>
            <li class="header-navArea-box"><a class="header-navArea-box__link" href="company.html">会社概要</a></li>
          </ul>
        </nav>
        <button type="button" id="js-btn-menu" class="header-navArea-btn">
          <span class="header-navArea-btn__line"></span>
        </button>
      </div>
    </header>
    <!-- /header -->

    <!-- mv -->
    <div class="mv">
      <div class="mv-titleArea">
        <h2 class="mv-titleArea__title">START</h2>
        <div class="mv-titleArea__subtitle">仕事に最高のスタートを</div>
      </div>
    </div>
    <!-- /mv -->

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

      <!-- news -->
      <section class="news">
        <div class="news-container">
          <div class="news-inner">
            <div class="news-heading">
              <h2 class="news-heading__title">ニュース</h2>
            </div>
            <div class="news-body">

              <div class="news-menu">
                <ul class="news-menu__list">
                  <li class="news-menu__item">
                    <a href="#" class="news-menu__link">
                      <div class="news-menu__date">
                        <time datetime="2020-02-10">2030.02.10</time>
                      </div>
                      <div class="news-menu__title">
                        コーポレートサイトをリニューアルしました。
                      </div>
                    </a>
                  </li>
                  <li class="news-menu__item">
                    <a href="#" class="news-menu__link">
                      <div class="news-menu__date">
                        <time datetime="2020-02-08">2030.02.08</time>
                      </div>
                      <div class="news-menu__title">
                        採用を強化中です！一緒に働きませんか？
                      </div>
                    </a>
                  </li>
                  <li class="news-menu__item">
                    <a href="#" class="news-menu__link">
                      <div class="news-menu__date">
                        <time datetime="2020-02-02">2030.02.02</time>
                      </div>
                      <div class="news-menu__title">
                        人材紹介SNS『スタート』をリリースしました。3/31まで新規登録キャンペーンを開催中です！サービス内で使える500ポイントをプレゼント！
                      </div>
                    </a>
                  </li>
                </ul>
              </div>

            </div>
          </div>
        </div>
      </section>
      <!-- /news -->

      <!-- service -->
      <section class="service">
        <div class="service-container">
          <div class="service-heading">
            <h2 class="service-heading__title">サービス</h2>
          </div>
            <div class="service-menu">
              <div class="service-menu-inner">
                <figure class="service-imgArea">
                  <span class="service-imgArea__img material-icons-round">
                    work
                  </span>
                </figure>
                  <div class="service-desc__title">人材紹介業</div>
                  <div class="service-desc__text">
                    <p>新規サイトの制作はもちろんサイトリニューアルやランディングページの制作も可能です。</p>
                  </div>
              </div>
              <div class="service-menu-inner">
                <figure class="service-imgArea">
                  <span class="service-imgArea__img material-icons-round">
                    location_city
                  </span>
                </figure>
                  <div class="service-desc__title">スクール事業</div>
                  <div class="service-desc__text">
                    <p>オンラインでWeb制作を学べるスクールを運営しています。</p>
                  </div>
              </div>
              <div class="service-menu-inner">
                <figure class="service-imgArea">
                  <span class="service-imgArea__img material-icons-round">
                    desktop_windows
                  </span>
                </figure>
                  <div class="service-desc__title">Webメディア運営</div>
                  <div class="service-desc__text">
                    <p>人事系メディアやWebデザイン関連のメディアなどを複数運営しています。</p>
                  </div>
              </div>
            </div>
        </div>
      </section>
      <!-- /service -->

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

    <!-- footer -->
    <footer class="footer">
      <div class="footer-container">
        <nav class="footer-nav">
          <ul class="footer-navArea">
            <li class="footer-navArea-box"><a class="footer-navArea-box__link" href="index.html">ホーム</a></li>
            <li class="footer-navArea-box"><a class="footer-navArea-box__link" href="message.html">メッセージ</a></li>
            <li class="footer-navArea-box"><a class="footer-navArea-box__link" href="company.html">会社概要</a></li>
          </ul>
        </nav>
        <div class="footer-copyright">&copy;START</div>
      </div>
    </footer>
    <!-- /footer -->

</body>
</html>

HTML（メッセージ）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="description"
    content="株式会社STARTは、幸せにつながるお仕事を紹介する人材紹介会社です。人材紹介サービス『スタート』や人材紹介SNS『ゴール』を運営し、またWebデザインを学べるスクール『Webの学校』を開講しています。" />
  <title>メッセージ - START</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@500;700&family=Roboto:wght@400;700&display=swap"
    rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
  <link href="css/destyle.css" rel="stylesheet" />
  <link href="style.css" rel="stylesheet" />
  <link rel="icon" type="image/png" href="icon-192x192.png">
  <link rel="apple-touch-icon" type="image/png" href="apple-touch-icon-180x180.png">
  <link rel="icon" href="favicon.ico">
</head>

<body class="body">

    <!-- header -->
    <header class="header">
      <div class="header-logo">
        <a href="index.html"><img class="header-logo__img" src="img/logo.svg" alt="START"></a>
      </div>
      <div class="header-nav">
        <nav id="js-gnav" class="header-nav-inner">
          <ul class="header-navArea">
            <li class="header-navArea-box"><a class="header-navArea-box__link" href="index.html">ホーム</a></li>
            <li class="header-navArea-box"><a class="header-navArea-box__link header-navArea-box__link--active" href="message.html">メッセージ</a></li>
            <li class="header-navArea-box"><a class="header-navArea-box__link" href="company.html">会社概要</a></li>
          </ul>
        </nav>
        <button type="button" id="js-btn-menu" class="header-navArea-btn">
          <span class="header-navArea-btn__line"></span>
        </button>
      </div>
    </header>
    <!-- /header -->

    <!--page-header-->
    <div class="pageHeader">
      <div class="pageHeader-titleArea">
        <h2 class="pageHeader-titleArea__title">メッセージ</h2>
      </div>
    </div>
    <!--/page-header-->

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

      <!--message-->
      <section class="message">
        <div class="message-ceo-container">
          <h3 class="message-ceo__title">「仕事」をきっかけに<br>人生の新しいスタートを！</h3>
          <div class="message-ceo__subtitle">大事なお仕事探しを応援させてください</div>
          <div class="message-ceo-box">
            <div class="message-ceo-imgArea">
              <img class="message-ceo-imgArea__img" src="img/ceo.jpg" width="100" height="100" alt="ショーン・デイビット・ジュニア">
            </div>
            <div class="message-ceo-desc__text">
              <p>
                はじめまして。代表取締役社長のショーン・デイビット・ジュニアです。<br>私はそこそこ幸せです。それは仕事が楽しいからです。もちろん仕事イコール人生ではありません。でも仕事は人生の大事な基盤のように思っています。<br>株式会社STARTは、みなさんが仕事をきっかけに理想の人生を実現する手助けをしています。幸せにつながるお仕事紹介サービス<a class="message-ceo-desc__link"
                  href="#">『スタート』</a>や、共通の目標を目指す仲間が見つかる人材紹介SNS<a class="message-ceo-desc__link"
                  href="#">『ゴール』</a>を運営しています。また、Webデザインの基礎スキルを身につけられるスクール<a class="message-ceo-desc__link" href="#">『Webの学校』</a>も随時開講しています。
              </p>
            </div>
          </div>
        </div>
      </section>
      <!--/message-->

      <!--office-->
      <div class="office">
        <div class="office-container">
          <img class="office-imgArea__img" src="img/office.jpg" width="1100" height="400" alt="会議室">
        </div>
      </div>
      <!--/office-->

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

    <!-- footer -->
    <footer class="footer">
      <div class="footer-container">
        <nav class="footer-nav">
          <ul class="footer-navArea">
            <li class="footer-navArea-box"><a class="footer-navArea-box__link" href="index.html">ホーム</a></li>
            <li class="footer-navArea-box"><a class="footer-navArea-box__link" href="message.html">メッセージ</a></li>
            <li class="footer-navArea-box"><a class="footer-navArea-box__link" href="company.html">会社概要</a></li>
          </ul>
        </nav>
        <div class="footer-copyright">&copy;START</div>
      </div>
    </footer>
    <!-- /footer -->

</body>
</html>

HTML（会社概要）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="description"
    content="株式会社STARTは、幸せにつながるお仕事を紹介する人材紹介会社です。人材紹介サービス『スタート』や人材紹介SNS『ゴール』を運営し、またWebデザインを学べるスクール『Webの学校』を開講しています。" />
  <title>会社概要 - START</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@500;700&family=Roboto:wght@400;700&display=swap"
    rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
  <link href="css/destyle.css" rel="stylesheet" />
  <link href="style.css" rel="stylesheet" />
  <link rel="icon" type="image/png" href="icon-192x192.png">
  <link rel="apple-touch-icon" type="image/png" href="apple-touch-icon-180x180.png">
  <link rel="icon" href="favicon.ico">
</head>

<body class="body">

    <!-- header -->
    <header class="header">
      <div class="header-logo">
        <a href="index.html"><img class="header-logo__img" src="img/logo.svg" alt="START"></a>
      </div>
      <div class="header-nav">
        <nav id="js-gnav" class="header-nav-inner">
          <ul class="header-navArea">
            <li class="header-navArea-box"><a class="header-navArea-box__link" href="index.html">ホーム</a></li>
            <li class="header-navArea-box"><a class="header-navArea-box__link" href="message.html">メッセージ</a></li>
            <li class="header-navArea-box"><a class="header-navArea-box__link header-navArea-box__link--active" href="company.html">会社概要</a></li>
          </ul>
        </nav>
        <button type="button" id="js-btn-menu" class="header-navArea-btn">
          <span class="header-navArea-btn__line"></span>
        </button>
      </div>
    </header>
    <!-- /header -->

    <!--page-header-->
    <div class="pageHeader">
      <div class="pageHeader-titleArea">
        <h2 class="pageHeader-titleArea__title">会社概要</h2>
      </div>
    </div>
    <!--/page-header-->

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

      <!--company-info-->
      <div class="company-info">
        <div class="company-info-container">
          <div class="company-info-box">
            <table class="company-info-table">
              <tbody>
                <tr class="company-info-table__row">
                  <th class="company-info-table__head">社名</th>
                  <td class="company-info-table__data">株式会社START</td>
                </tr>
                <tr class="company-info-table__row">
                  <th class="company-info-table__head">設立</th>
                  <td class="company-info-table__data">2025.02.10</td>
                </tr>
                <tr class="company-info-table__row">
                  <th class="company-info-table__head">代表取締役</th>
                  <td class="company-info-table__data">ショーン・デイビット・ジュニア</td>
                </tr>
                <tr class="company-info-table__row">
                  <th class="company-info-table__head">資本金</th>
                  <td class="company-info-table__data">10,000,000円</td>
                </tr>
                <tr class="company-info-table__row">
                  <th class="company-info-table__head">所在地</th>
                  <td class="company-info-table__data">〒555-5555 東京都千代田区 スタートビルディング 606</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="company-info-access">
              <iframe class="company-info-map"
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.828030380878!2d139.76493611544558!3d35.68123618019435!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bfbd89f700b%3A0x277c49ba34ed38!2z5p2x5Lqs6aeF!5e0!3m2!1sja!2sjp!4v1603888975255!5m2!1sja!2sjp"
                width="100%" height="auto" frameborder=" 0" style="border:0;" allowfullscreen="" aria-hidden="false"
                tabindex="0"></iframe>
            <div class="company-info-map__link">
              <a href="https://goo.gl/maps/b5AqA853AfsPSw1Y7" target="_blank">Google mapで見る</a>
            </div>
          </div>
        </div>
      </div>
      <!--/company-info-->

      <!--company-news-->
      <div class="company-announce">
        <div class="company-announce-container">

          <!-- <div class="company-announce-inner"> -->
            <ul class="company-announce-inner">
              <li class="company-announce-box">
                <a href="#" class="company-announce-box__link">
                  <div class="company-announce-box__date">
                    <time datetime="2020-02-10">2030.02.10</time>
                  </div>
                  <div class="company-announce-box__title">
                    コーポレートサイトをリニューアルしました。
                  </div>
                </a>
              </li>
              <li class="company-announce-box">
                <a href="#" class="company-announce-box__link">
                  <div class="company-announce-box__date">
                    <time datetime="2020-02-08">2030.02.08</time>
                  </div>
                  <div class="company-announce-box__title">
                    採用を強化中です！一緒に働きませんか？
                  </div>
                </a>
              </li>
              <li class="company-announce-box">
                <a href="#" class="company-announce-box__link">
                  <div class="company-announce-box__date">
                    <time datetime="2020-02-02">2030.02.02</time>
                  </div>
                  <div class="company-announce-box__title">
                    人材紹介SNS『スタート』をリリースしました。3/31まで新規登録キャンペーンを開催中です！サービス内で使える500ポイントをプレゼント！
                  </div>
                </a>
              </li>
            </ul>
          <!-- </div> -->

        </div>
      </div>
      <!--/company-news-->

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

    <!-- footer -->
    <footer class="footer">
      <div class="footer-container">
        <nav class="footer-nav">
          <ul class="footer-navArea">
            <li class="footer-navArea-box"><a class="footer-navArea-box__link" href="index.html">ホーム</a></li>
            <li class="footer-navArea-box"><a class="footer-navArea-box__link" href="message.html">メッセージ</a></li>
            <li class="footer-navArea-box"><a class="footer-navArea-box__link" href="company.html">会社概要</a></li>
          </ul>
        </nav>
        <div class="footer-copyright">&copy;START</div>
      </div>
    </footer>
    <!-- /footer -->

</body>
</html>

CSS

@charset "UTF-8";

:root {
  --link-color: #349bf4;
  --main-color: #dd1b57;
  --text-color: #333;
}

/*--------------------------------
レイアウト
---------------------------------*/
.body {
  font-family: "Roboto", "Noto Sans JP", Arial, "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", Meiryo, sans-serif;
  font-size: 16px;
  color: var(--text-color);
  overflow-x: hidden;
}

.content {
  display: grid;
  padding: 60px 0 100px;
  row-gap: 80px;
}

/*--------------------------------
ヘッダー
---------------------------------*/
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 90px;
  padding: 30px 70px;
}

.header-logo {
  line-height: 1;
}

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

/*--------------------------------
グローバルナビ
---------------------------------*/
.header-navArea {
  display: flex;
  padding-top: 18px;
  column-gap: 30px;
}

.header-navArea-box {
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.05em;
}

.header-navArea-box__link {
  color: var(--text-color);
  text-decoration: none;
}

.header-navArea-box__link:hover {
  color: var(--main-color);
}

.header-navArea-box__link--active {
  color: var(--main-color);
}

.header-nav-btn {
  display: none;
}

/*--------------------------------
メインビジュアル
---------------------------------*/
.mv {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 600px;
  background-image: url(img/pc_mv.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.mv-titleArea {
  color: #fff;
  text-align: center;
}

.mv-titleArea__title {
  font-size: 160px;
  font-weight: bold;
  line-height: 1;
  text-shadow: 0 4px 6px rgb(0 0 0 / 25%);
  margin-bottom: 10px;
}

.mv-titleArea__subtitle {
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0.1em;
}

/*--------------------------------
ニュース
---------------------------------*/
.news-container {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 30px;
}

.news-inner {
  display: flex;
  column-gap: 90px;
}

.news-heading__title {
  font-size: 40px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--main-color);
}

.news-body {
  flex: 1;
}

.news-menu__link {
  display: flex;
  color: var(--text-color);
  text-decoration: none;
}

.news-menu__link:hover {
  color: var(--main-color);
}

.news-menu__item {
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e8e8e8;
}

.news-menu__item:last-child {
  margin-bottom: 0;
}

.news-menu__title {
  font-size: 15px;
  line-height: 1.8;
}

.news-menu__date {
  margin-right: 20px;
}

/*--------------------------------
サービス
---------------------------------*/
.service-container {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 30px;
}

.service-heading {
  position: relative;
  margin-bottom: 50px;
}

.service-heading::before {
  display: block;
  content: "SERVICE";
  position: absolute;
  top: -40px;
  right: -20px;
  z-index: -1;
  font-size: 168px;
  font-weight: bold;
  line-height: 1;
  color: #f2f2f2;
}

.service-heading__title {
  font-size: 40px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--main-color);
}

.service-menu {
  display: grid;
  column-gap: 30px;
  grid-template-columns: repeat(3, 1fr);
}

.service-menu-inner {
  padding: 50px;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 3px 21px rgba(0, 0, 0, 0.16);
}

.service-imgArea {
  text-align: center;
  margin-bottom: 10px;
}

.service-imgArea__img {
  font-size: 48px;
  color: var(--main-color);
  vertical-align: bottom;
}

.service-desc__title {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}

.service-desc__text {
  font-size: 14px;
  line-height: 1.7;
  margin-top: 15px;
}

/*--------------------------------
下層ページ：ヘッダー
---------------------------------*/
.pageHeader {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 190px;
  background-image: url(img/pc_header.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.pageHeader-titleArea {
  color: #fff;
  text-align: center;
}

.pageHeader-titleArea__title {
  font-size: 40px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.1em;
}

/*--------------------------------
下層ページ：メッセージ
---------------------------------*/
.message {
  max-width: 850px;
  margin: 0 auto;
}

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

.message-ceo__title {
  font-size: 40px;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--main-color);
  text-align: center;
  margin-bottom: 20px;
}

.message-ceo__subtitle {
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.05em;
  text-align: center;
  margin-bottom: 40px;
}

.message-ceo-imgArea {
  width: 100px;
  margin: 0 25px 15px 0;
  float: left;
}

.message-ceo-imgArea__img {
  border-radius: 50%;
}

.message-ceo-desc__text {
  line-height: 1.6;
  letter-spacing: 0.05em;
}

.message-ceo-desc__link {
  color: var(--link-color);
  text-decoration: underline;
}

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

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

/*--------------------------------
下層ページ：会社概要
---------------------------------*/
.company-info-container {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 30px;
}

.company-info-box {
  margin-bottom: 50px;
}

.company-info-table {
  width: 100%;
  font-size: 15px;
  border-collapse: collapse;
  border-spacing: 0;
}

.company-info-table__row {
  border-bottom: solid 1px #ddd;
}

.company-info-table__head,
.company-info-table__data {
  text-align: left;
  padding: 30px;
}

.company-info-table__head {
  width: 20%;
}

.company-info-map {
  height: 400px;
}

.company-info-map__link {
  font-size: 14px;
  text-align: right;
  margin-top: 20px;
  color: var(--link-color);
  text-decoration: underline;
}

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

.company-announce-box {
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e8e8e8;
}

.company-announce-box:last-child {
  margin-bottom: 0;
}

.company-announce-box__link {
  display: flex;
  color: var(--text-color);
  text-decoration: none;
}

.company-announce-box__link:hover {
  color: var(--main-color);
}

.company-announce-box__date {
  margin-right: 20px;
}

.company-announce-box__title {
  font-size: 15px;
  line-height: 1.8;
}

/*--------------------------------
フッター
---------------------------------*/
.footer {
  color: #fff;
  padding: 60px 20px 50px;
  background-color: var(--main-color);
}

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

.footer-nav {
  margin-bottom: 20px;
}

.footer-navArea {
  display: flex;
  column-gap: 30px;
}

.footer-navArea-box {
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.05em;
}

.footer-navArea-box__link {
  color: var(--text-color);
  color: #fff;
  text-decoration: none;
}

.footer-copyright {
  font-size: 12px;
  letter-spacing: 0.03em;
}


ヘッダーとフッターにあるメニューの「ホーム」「メッセージ」「会社概要」をそれぞれクリックすると、各サイトに移動するようにしました。

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

Cursor（カーソル）の画面

CursorにはコーディングをサポートしてくれるAI機能（ChatGPT）が付いています。無料版を利用しているのでAI機能の使用回数に制限がありますが、無料で利用できる生成AI（ChatGPT、Copilot、Gemini）を使えば無料版でも十分だと思います。

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


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

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


関連する記事


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