全画面表示のヒーローイメージを作る

このページの目的

Webサイトの第一印象を決める、画面いっぱいに広がるヒーローイメージ（メインビジュアル）の実装方法を学びます。
`vw`や`vh`といった、ブラウザの表示領域を基準とする特殊な単位を使いこなすことがポイントです。

fullscreen基本となるCSSプロパティ

全画面表示のレイアウトでは、以下のCSSプロパティと単位を主に使います。

width: 100vw;

【横幅】vwは “Viewport Width” の略で、画面（ブラウザの表示領域）の横幅を基準とします。100vwは「画面の横幅の100%」を意味します。

height: 100vh;

【高さ】vhは “Viewport Height” の略で、画面の高さを基準とします。100vhは「画面の高さの100%」を意味します。

object-fit: cover;

【画像の表示方法】画像が指定した幅・高さに収まらない場合に、縦横比を保ったまま、要素全体を覆うように拡大・縮小し、はみ出た部分を切り抜いて表示します。背景画像のように使う場合に非常に便利です。

---

build実装方法

背景画像として実装する方法と、`img`タグとして実装する方法があります。

背景画像として実装する例

テキストを画像の上に重ねたい場合に最もよく使われる、一般的な方法です。

<!-- HTML -->
<section class="hero-fullscreen">
  <h1>サイトのキャッチコピー</h1>
</section>

<!-- CSS -->
.hero-fullscreen {
  height: 100vh; /* 画面の高さいっぱいに広げる */
  background-image: url('images/hero.jpg');
  background-size: cover; /* 画像を要素いっぱいに広げる */
  background-position: center; /* 画像の中央を表示 */
  
  /* テキストを中央揃えにするためのFlexbox設定 */
  display: flex;
  align-items: center;
  justify-content: center;
}

`img`タグとして実装する例

画像そのものが主役で、上にテキストを乗せる必要がない場合などに使います。

<!-- HTML -->
<div class="hero-image-wrapper">
  <img src="images/hero.jpg" alt="ヒーローイメージ">
</div>

<!-- CSS -->
.hero-image-wrapper {
  width: 100vw;
  height: 100vh;
}
.hero-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 縦横比を保ったまま、親の領域を埋める */
}

---

warningよくある間違いと対策

PCでは良いが、スマホだと画像の重要な部分が見切れてしまう

background-positionやobject-positionで、画像のどの部分を基準に表示するか（例: center topなど）を指定しましょう。モバイル用のメディアクエリで、表示位置を調整するのも有効です。

ヒーローイメージの下に、意図しない余白ができる

bodyや他の要素に設定されているmarginが原因の可能性があります。リセットCSSが正しく適用されているか確認しましょう。

横スクロールバーが出てしまう

100vwはスクロールバーの幅を含んでしまうため、縦のスクロールバーが表示されている環境では、僅かに横にはみ出すことがあります。親要素にoverflow-x: hidden;を指定するか、width: 100%;で代用できないか検討しましょう。

---

---