レスポンシブ込みのファーストビューレイアウトをコピペで使いまわせるようにする

こんにちは！株式会社プロットハブのエンジニア、山名です。
いきなりですが、コーポレートサイトのファーストビューってこんなデザインをよく見かけませんか？

私の過去のホームページ制作案件でもこういったフルスクリーン型のファーストビューデザインがかなり多かった印象です。
パッと見のインパクトが大きく、企業メッセージやブランドイメージを強く伝えることができます。
今回はこのよくあるファーストビューデザインのコーディングをコピペでペタッと簡単に使いまわせるようなコードをご紹介します！
レスポンシブ対応まで行っているので、よければ作ってみてくださいね！

早速コードのご紹介

実際のコードはこちら↓

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <!-- リセット用css -->
  <link rel="stylesheet" href="https://plot-hub.com/code_example/lib/css/reset.css" />

  <!-- ヘッダーのcss -->
  <link rel="stylesheet" href="https://plot-hub.com/code_example/lib/css/header-style.css" />

  <!-- css -->
  <style media="screen">

  /* clampは(最小値,可変値(vwなど),最大値) の順に指定してください*/

  #hero {
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100);
  }

  body {
    font-size: 1.6rem;
    max-width: 1920px;
    margin: auto;
  }

  .hero {
    /* ↑のパス指定はこのファイルの位置から見て画像がどこに位置するかで変わります。 */
    background-position: bottom left;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }

  @media (orientation: landscape) {
    .hero {
      background-image: url("https://plot-hub.com/code_example/lib/img/hero-image.jpg");
    }
  }

  @media (orientation: portrait) {
    .hero {
      background-image: url("https://plot-hub.com/code_example/lib/img/hero-sp-image.jpg");
    }
  }

  .hero::before {
    content: '';
    position: absolute;
    inset: 0px;
    background-color: rgba(0, 0, 0, 0.4);
  }

  .hero .hero-text {
    position: absolute;
    color: #fff;
    padding-right: clamp(10px, 2.6666666666666665vw, 30px);
    padding-left: clamp(10px, 2.6666666666666665vw, 30px);
  }

  @media (min-width: 1025px) {
    .hero .hero-text {
      padding-right: clamp(30px, 3.125vw, 60px);
      padding-left: clamp(30px, 3.125vw, 60px);
      bottom: clamp(140px, 14.583333333333334vw, 280px);
    }
  }

  @media (max-width: 1024px) {
    .hero .hero-text {
      inset: 0px;
      margin: auto;
      height: -moz-fit-content;
      height: -webkit-fit-content;
      height: fit-content;
      text-align: center;
    }
  }

  .hero-text .main-text {
    font-weight: 700;
    font-size: clamp(24px, 6.4vw, 48px);
  }

  @media (min-width: 1025px) {
    .hero-text .main-text {
      font-size: clamp(64px, 4.166666666666667vw, 80px);
    }
  }

  @media (max-width: 1024px) and (orientation: landscape) {
    .hero-text .main-text {
      font-size: clamp(24px, 6.4vw, 32px);
    }
  }

  @media (max-width: 1024px) {
    .hero-text .main-text {
      line-height: 2;
    }
  }


  </style>


</head>

<body>

  <!-- レスポンシブ込みの追従ヘッダー -->
  <header class="header">
    <div class="header-container">

      <h1 class="header-logo">
        <a href="#" id="logo" class="logo-link">
          <img src="https://plot-hub.com/code_example/lib/img/logo.jpg" alt="">
        </a>
      </h1>

      <nav id="hb-menu" class="nav-menu">
        <ul class="menu-list">
          <li class="menu-item"><a href="#" class="menu-link">MENU1</a></li>
          <li class="menu-item"><a href="#" class="menu-link">MENU2</a></li>
          <li class="menu-item"><a href="#" class="menu-link">MENU3</a></li>
          <li class="menu-item"><a href="#" class="menu-link">MENU4</a></li>
          <li class="menu-item"><a href="#" class="menu-link">MENU5</a></li>
          <li class="menu-item"><a href="#" class="menu-link">MENU6</a></li>
        </ul>
      </nav>

      <!-- ハンバーガーメニュー ボタン -->
      <button id="openbtn" class="hamburger-button">
        <div class="hamburger-lines">
          <span class="line"></span>
          <span class="line"></span>
        </div>
      </button>
      <!-- ハンバーガーメニュー ボタン ここまで -->

    </div>
  </header>
  <!-- レスポンシブ込みの追従ヘッダー ここまで -->


  <!-- ファーストビューセクションのHTML -->
  <section id="hero" class="hero">
    <div class="hero-text">
      <p class="main-text">常にウィンドウサイズの高さ<br class="min-1024:hidden">いっぱいになる<br class="max-1024:hidden">ファーストビューのコンポーネント</p>
    </div>
  </section>
  <!-- // ファーストビューセクションのHTML -->


  <!-- jQueryのCDNをインクルード -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

  <!-- ヘッダーのJSの呼び出し -->
  <script type="text/javascript" src="https://plot-hub.com/code_example/lib/js/header.js"></script>

  <script type="text/javascript">
    jQuery(function ($) {
      let resizeTimeout; // リサイズイベントのタイマーIDを保持する変数

      const setFillHeight = () => {
        const vh = window.innerHeight * 0.01; // ウィンドウの高さの1%を計算
        document.documentElement.style.setProperty('--vh', `${vh}px`); // CSSカスタムプロパティ'--vh'に値を設定
      }

      // 画面のサイズ変動が終わってから0.5秒後に高さを再計算する
      window.addEventListener('resize', () => {
        clearTimeout(resizeTimeout); // 既存のタイマーをクリア
        resizeTimeout = setTimeout(setFillHeight, 500); // 0.5秒後に高さを再計算するタイマーをセット
      });

      // 初期化
      setFillHeight(); // ページロード時に一度高さを設定
    });
  </script>


</body>

</html>

ここからはHTMLとCSS、jQueryに記述を分けます。
ちなみにファーストビューの記述に限定している為、ヘッダーのレイアウトはこちらの記事を参考にしてください→コピペOK！実案件でも使用したレスポンシブ込みの追従ヘッダーをご紹介！
また、JavaScriptとjQueryのどちらを使うか問題ですが、今回は中小規模Webサイトの制作を想定してjQueryを使用してご紹介しています。

HTMLの記述

ヘッダー以外のファーストビューのHTMLです。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <!-- お好きなcssを読み込んでください -->

</head>

<body>

  <!-- ファーストビューセクションのHTML -->
  <section id="hero" class="hero">
    <div class="hero-text">
      <p class="main-text">常にウィンドウサイズの高さ<br class="min-1024:hidden">いっぱいになる<br class="max-1024:hidden">ファーストビューのコンポーネント</p>
    </div>
  </section>
  <!-- // ファーストビューセクションのHTML -->

</body>

</html>

CSSの記述

ブレイクポイントは1024pxと768px以下でデバイスが横になった時に切り替わります。
clampを使って切り替えているのでどのデバイスで見ても大体ちょうどいいサイズになっていると思います。
ちなみに1025px以上のサイズはビューポート1920pxをベースに、1024px以下では375pxをベースに、768px以下かつデバイスが横の場合は667pxをベースにvwを算出しています。


  /* clampは(最小値,可変値(vwなど),最大値) の順に指定してください */

  #hero {
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100);
  }

  body {
    font-size: 1.6rem;
    max-width: 1920px;
    margin: auto;
  }

  .hero {
    background-position: bottom left;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }

  @media (orientation: landscape) {
    .hero {
      background-image: url("https://plot-hub.com/code_example/lib/img/hero-image.jpg");
    }
  }

  @media (orientation: portrait) {
    .hero {
      background-image: url("https://plot-hub.com/code_example/lib/img/hero-sp-image.jpg");
    }
  }

  .hero::before {
    content: '';
    position: absolute;
    inset: 0px;
    background-color: rgba(0, 0, 0, 0.4);
  }

  .hero .hero-text {
    position: absolute;
    color: #fff;
    padding-right: clamp(10px, 2.6666666666666665vw, 30px);
    padding-left: clamp(10px, 2.6666666666666665vw, 30px);
  }

  @media (min-width: 1025px) {
    .hero .hero-text {
      padding-right: clamp(30px, 3.125vw, 60px);
      padding-left: clamp(30px, 3.125vw, 60px);
      bottom: clamp(140px, 14.583333333333334vw, 280px);
    }
  }

  @media (max-width: 1024px) {
    .hero .hero-text {
      inset: 0px;
      margin: auto;
      height: -moz-fit-content;
      height: -webkit-fit-content;
      height: fit-content;
      text-align: center;
    }
  }

  .hero-text .main-text {
    font-weight: 700;
    font-size: clamp(24px, 6.4vw, 48px);
  }

  @media (min-width: 1025px) {
    .hero-text .main-text {
      font-size: clamp(64px, 4.166666666666667vw, 80px);
    }
  }

  @media (max-width: 1024px) and (orientation: landscape) {
    .hero-text .main-text {
      font-size: clamp(24px, 6.4vw, 32px);
    }
  }

  @media (max-width: 1024px) {
    .hero-text .main-text {
      line-height: 2;
    }
  }

jQueryの記述

CSSのカスタムプロパティ’–vh’を作成し、#heroのmin-heightのcalc計算に使っています。
また、ウィンドウをぐりぐり拡大/縮小されると計算処理が連続してしまうので、既存のタイマーをクリアして連続するリサイズイベントが発生しても、最後のイベントだけが処理されるようにします。

<script type="text/javascript">
  jQuery(function ($) {
    let resizeTimeout; // リサイズイベントのタイマーIDを保持する変数

    const setFillHeight = () => {
      const vh = window.innerHeight * 0.01; // ウィンドウの高さの1%を計算
      document.documentElement.style.setProperty('--vh', `${vh}px`); // CSSカスタムプロパティ'--vh'に値を設定
    }

    // 画面のサイズ変動が終わってから0.5秒後に高さを再計算する
    window.addEventListener('resize', () => {
      clearTimeout(resizeTimeout); // 既存のタイマーをクリア
      resizeTimeout = setTimeout(setFillHeight, 500); // 0.5秒後に高さを再計算するタイマーをセット
    });

    // 初期化
    setFillHeight(); // ページロード時に一度高さを設定
  });
</script>

実際の表示を確認

実際のレイアウトはこちらからご確認いただけます。→https://plot-hub.com/code_example/615/
検証モードなどで確認してみてください。

終わりに

今回はよくあるフルスクリーン型デザインのファーストビュー部分のテンプレートをご紹介しました。
CSSのclamp処理に関してはこちらの記事(TailwindCSSにVWとClampを実装する)でもお伝えしているTialwindCSS+clampカスタマイズを使用して算出された値を再編集して記載しています。
よければそちらもご覧ください。

皆さんに意見もらってどんどんブラッシュアップできればと思っているのでコメントお待ちしています！
それではまた！