しょーごさんの 中級課題 の備忘録(スマホで閲覧するには重いかもしれません)

<div class="l-container">
  <header class="l-header">
    ...
  </header><!-- .l-header -->
  <main class="l-main">
    ...
  </main><!-- /.l-main-->
  <footer class="l-footer">
    ...
  </footer><!-- .l-footer -->
</div><!-- .l-container -->

<header class="l-header">
  <h1 class="l-header-logo">
　　...
  </h1>
  <nav class="c-gNav" aria-label="メインメニュー">
    ...
  </nav><!-- .c-gNav -->
  <a class="c-btn _header" href="#contact">お問い合わせ</a>
  <button class="c-hamburger js-hamburger" aria-label="メニューの開閉" aria-expanded="false" aria-controls="hamburgerMenu"><span class="c-hamburger-line"></span></button><!-- /.c-hamburger-->
  <nav class="c-hamburgerMenu" id="hamburgerMenu" aria-hidden="true" aria-label="メインメニュー">
    ...
  </nav><!-- .c-hamburgerMenu -->
</header><!-- .l-header -->

.l-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

margin-left: clamp(
      25px,
      25px + (137 - 50) * (100vw - 768px) / (1022 - 768),
      137px
    );

<div class="p-featureMedia">
  <figure class="p-featureMedia-pic">
    <picture>
      <source srcset="./img/top/feature_pic00.webp 1x, ./img/top/feature_pic00@2x.webp 2x" type="image/webp" />
      <img src="./img/top/feature_pic00.jpg" alt="特徴1" srcset="./img/top/feature_pic00.jpg 1x, ./img/top/feature_pic00@2x.jpg 2x" loading="lazy" />
    </picture>
  </figure>
  <div class="p-featureMedia-body">
    <p class="p-featureMedia-ttl"></p>
    <p class="p-featureMedia-txt"></p>
  </div>
</div><!-- .p-featureMedia -->

.p-featureMedia {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.p-featureMedia-pic {
    position: relative;
    width: 40%;
    overflow: hidden;
}

.p-featureMedia-pic::before {
    content: "";
    display: block;
    padding-top: calc(300 / 400 * 100%);
}

.p-featureMedia-pic img {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.p-featureMedia-pic img {
    max-width: 100%;
}

.p-featureMedia {
  margin-left: -92px;  
}

margin-right: clamp(
  -92px,
  -92 * (100vw - 1150px) / (1200 - 1150),
  0px
);

table,
tbody,
tr,
th,
td {
  display: block;
}

<form class="p-contactForm js-contactForm" id="form" name="contact" action="#" method="POST" data-aos="fade-up">
  <div class="p-contactForm-list">
    <div class="p-contactForm-item"><label for="name">お名前<span>必須</span></label>
      <div class="p-contactForm-inputField" data-field-name="name"><input type="text" name="name" id="name" required>
        <p class="p-contactForm-errorTxt">お名前を入力してください</p>
      </div>
    </div>
    <div class="p-contactForm-item"><label for="email">メールアドレス<span>必須</span></label>
      <div class="p-contactForm-inputField" data-field-name="email"><input type="email" name="email" id="email" required>
        <p class="p-contactForm-errorTxt">メールアドレスを入力してください</p>
      </div>
    </div>
    <div class="p-contactForm-item"><label for="message">お問い合わせ内容<span>必須</span></label>
      <div class="p-contactForm-inputField" data-field-name="message"><textarea name="message" id="message" cols="30" rows="10" required></textarea>
        <p class="p-contactForm-errorTxt">お問い合わせ内容を入力してください</p>
      </div>
    </div>
  </div>
  <div class="p-contactForm-privacy"><label><input type="checkbox" name="privacy" value="同意する" required><span>プライバシーポリシーに同意する</span></label></div>
  <div class="p-contactForm-btns"><button class="c-btn _submit" type="submit" disabled>送信する</button></div>
</form><!-- .p-contactForm -->

(() => {
  const $doc = document;

  const $form = $doc.querySelector('.js-contactForm');
  // form 内にある必須項目を取得
  const $requiredElements = $form.querySelectorAll('[required]');
  // 送信ボタンの取得
  const $submitBtn = $form.querySelector('[type="submit"]');

  // 各入力項目に適用する event を指定
  // blur はフォーカスが外れたときにイベント発生
  // change は入力項目になにかしら入力した後にフォーカスを外すとイベント発生
  // ただし、radio checkbox に関しては、チェックを入れても外してもイベント発生
  const elementsEventList = ["blur", "change"];

  // 個別チェック
  elementsEventList.forEach((elementsEvent) => {
    $requiredElements.forEach(($requiredElement) => {
      $requiredElement.addEventListener(elementsEvent, (e) => {
        // プライバシーポリシーに同意するボタンには、
        // エラーテキストを付けていないので除外
        if (e.target.name != "privacy") {
          // event を起こした入力項目の [name] を取得し
          const targetFieldName = e.target.name;
          // 入力項目の親要素にあたる
          // .p-contactForm-inputField に指定しておいた、
          // [data-field-name] と一致する .p-contactForm-inputField を取得
          const $targetField = $form.querySelector(
            `[data-field-name="${targetFieldName}"]`
          );

          // checkValidity() は form の入力項目や form 自身などにつかえるメソッドで
          // ブラウザにもともと備わっている検証機能をもとに
          // 書かれた内容が、正しいものであれば true
          // 不適切であれば false を返します
          if (e.target.checkValidity() === true) {
            // 正しい場合は、エラーテキストを非表示に
            $targetField.classList.remove("is-error");
          } else {
            // 不適切であれば、エラーテキストを表示します
            $targetField.classList.add("is-error");
          }
        }
      });
    });
  });

  // input と change は似ていますが、
  // こちらは change と違い一文字入力するたびにイベント発生
  // form そのものに、input イベント(もしくは change イベント)を指定すると、
  // すべての入力項目において、入力が行われた場合にイベントが発生することになります
  // (change イベントの場合は、入力してフォーカスが外れたとき)
  // 例えば <form> の中に <input type="text"> <input type="email"> があったとき
  // text に入力してもイベント発生
  // email に入力してもイベント発生
  $form.addEventListener("input", (e) => {
    // form に checkValidity() をつかうことで、
    // 全ての必須項目が正しく入力されている場合にのみ true を返します
    // これで、submit ボタンの disabled を無効化します。
    $form.checkValidity() === true
      ? ($submitBtn.disabled = false)
      : ($submitBtn.disabled = true);
  });
})();

$(function () {
  const $form = $(".js-contactForm");
  const $submitBtn = $form.find('[type="submit"]');

  $form.find("[required]").on("blur change", (e) => {
    if (e.target.name != "privacy") {
      const targetFieldName = e.target.name;
      const $targetField = $(`[data-field-name="${targetFieldName}"]`);

      if (e.target.checkValidity() === true) {
        $targetField.removeClass("is-error");
      } else {
        $targetField.addClass("is-error");
      }
    }
  });

  $form.on("input", (e) => {
    $form[0].checkValidity() === true
      ? ($submitBtn.prop("disabled", false))
      : ($submitBtn.prop("disabled", true));
  })
});

textarea {
  resize: vertical; // 垂直方向にのみ伸ばすことができる
  resize: horizontal; // 水平方向にのみ伸ばすことができる
  resize: both; // どちらにも伸ばせる(デフォルトの値)
  resize: none;
}