「サイトを開いた瞬間、画面いっぱいに大きな画像がドーン!」――いわゆるフルスクリーンのメインビジュアルは、コーポレートサイトやLPでよく使われる定番の表現です。
仕組みはシンプルですが、初めて挑戦するとき「height: 100% にしたのに高さが出ない」「スマホで画像が見切れる」といった小さな落とし穴があります。
この記事では、HTML / CSS を触り始めて間もない方を対象に、最小限のコードからフルスクリーンメインビジュアルを作る手順を、ひとつずつ解説していきます。
この記事のゴール
完成形は以下のようなレイアウトです。
- 画面の縦横いっぱいに背景画像が広がる
- その上にタイトル（メインコピー）とサブコピーが中央配置で乗る
- 文字が読みやすいよう、画像の上に薄い黒のオーバーレイを敷く
- スマートフォンでもレイアウトが崩れない
最後まで読むと、コピペしてすぐ動くコードが手に入ります。
まずはHTMLを書く
ファイル構成は次のようなイメージです。
project/
├─ index.html
├─ style.css
└─ images/
└─ main-visual.jpg
index.html を以下のように記述します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Full Screen Main Visual</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="hero">
<div class="hero__inner">
<h1 class="hero__title">Main Visual</h1>
<p class="hero__lead">サブコピーをここに記述します</p>
</div>
</section>
</body>
</html>
ポイント
- メインビジュアルを
<section class="hero">で囲っています。hero（ヒーロー）は、サイト冒頭の大きなビジュアルエリアを指す慣用的な呼び方です。 - 中身のテキストは
<div class="hero__inner">でひとまとめにしておきます。後でこの単位で「中央寄せ」を効かせるためです。 viewportのmetaタグは、スマホ対応のために必須です。忘れるとモバイルで意図しない表示になります。
ここまでではまだ「ただの文字が並んでいるだけ」の状態です。次にCSSで見た目を整えていきます。
CSSの全体像
先に完成したCSSを示します。このあと、ブロックごとに分解して解説します。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.hero {
position: relative;
width: 100%;
height: 100vh;
min-height: 600px;
background-image: url("images/main-visual.jpg");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
text-align: center;
}
.hero::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.35);
}
.hero__inner {
position: relative;
z-index: 1;
padding: 0 24px;
}
.hero__title {
font-size: clamp(2rem, 6vw, 4.5rem);
font-weight: 700;
letter-spacing: 0.05em;
margin-bottom: 16px;
}
.hero__lead {
font-size: clamp(0.95rem, 1.6vw, 1.125rem);
line-height: 1.8;
}
CSSをブロックごとに解説
リセットCSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ブラウザは要素ごとにデフォルトの余白（marginやpadding）を持っています。これが残っていると「hero の上下に謎の隙間ができる」原因になりがちです。最初に全部ゼロにしておくと、レイアウトが意図したとおりになります。
box-sizing: border-box は、「width の数値に padding や border を含める」設定です。サイズ計算がシンプルになるので、習慣的に書いておくのがおすすめです。
高さをフルスクリーンにする
.hero {
width: 100%;
height: 100vh;
min-height: 600px;
}
ここが今回の核です。
100vhのvhは “viewport height” の略で、画面（ビューポート）の高さの100% という意味です。height: 100%ではうまくいかないことが多いのは、親要素に明示的な高さが指定されていないとパーセント指定が効かないからです。vhなら親要素に依存せず、画面サイズを基準にできます。min-height: 600pxは保険です。横長のディスプレイやウィンドウを縦に縮めたとき、100vhだけだとコンテンツが潰れてしまいます。最低限の高さを確保しておくと安心です。
背景画像を画面いっぱいに
.hero {
background-image: url("images/main-visual.jpg");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
このセットは「背景画像を画面いっぱいに敷くときの定番」です。
background-size: cover: 画像のアスペクト比（縦横比）を保ったまま、要素を覆い尽くすように拡大縮小します。画面サイズに応じて自動で調整されるので、デバイスごとに画像を切り替えなくてもそれなりに見えます。background-position: center center: 画像の中心が要素の中心に来るよう配置します。coverではみ出た部分が左右(または上下)で均等にトリミングされるので、被写体が真ん中の画像と相性が良いです。background-repeat: no-repeat: 画像が繰り返されないようにします。背景画像を使うときの基本マナーです。
テキストを中央に置く
.hero {
display: flex;
align-items: center;
justify-content: center;
}
Flexboxを使って、hero の中身（hero__inner）を縦にも横にも中央に配置しています。
display: flex: Flexboxを有効にするalign-items: center: 縦方向（交差軸）の中央寄せjustify-content: center: 横方向（主軸）の中央寄せ
3行覚えるだけで、中央配置で困ることはほぼなくなります。
黒いオーバーレイで文字を読みやすく
.hero::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.35);
}
.hero__inner {
position: relative;
z-index: 1;
}
明るい写真の上に白い文字を載せると、どうしても文字が読みづらくなります。そこで ::before という擬似要素を使って、画像の上に半透明の黒い膜を敷いています。
inset: 0は、top: 0; right: 0; bottom: 0; left: 0;をまとめた短縮指定です。要素いっぱいに広げる呪文だと思ってください。rgba(0, 0, 0, 0.35)の最後の0.35が透明度です。0に近いほど透明、1に近いほど不透明。写真の明るさに応じて0.2〜0.5あたりで調整します。- オーバーレイがテキストより前面に出てしまうと文字が見えなくなるので、
hero__innerにposition: relativeとz-index: 1を付けて、テキストを前面に持ってきています。
レスポンシブな文字サイズ
.hero__title {
font-size: clamp(2rem, 6vw, 4.5rem);
}
clamp() 関数は「最小・推奨・最大」を一行で書ける便利な指定です。
- 最小:
2rem（小さい画面でも最低これくらい） - 推奨:
6vw（画面幅の6%、画面に応じて伸縮） - 最大:
4.5rem（大画面でも大きくなりすぎない上限）
メディアクエリを使わずに、画面サイズに応じてなめらかに文字サイズが変わります。
スマホで「下に隙間ができる」問題への対処
実機のスマホで確認すると、アドレスバーの表示・非表示が切り替わる瞬間にビジュアルがガタッと動くことがあります。これは 100vh が「アドレスバーを除いた高さ」と「含めた高さ」のどちらを指すかがブラウザによって異なるためです。
対策として、新しい単位 dvh（dynamic viewport height）を併用します。
.hero {
height: 100vh; /* 古いブラウザ用のフォールバック */
height: 100dvh; /* 対応ブラウザではこちらが優先される */
}
dvh はアドレスバーの伸縮に追従してくれる単位です。下に2行書くだけで、モバイルの見え方がぐっと安定します。
応用：動画を背景にしたいとき
写真ではなく動画を背景にしたいケースもよくあります。その場合は background-image の代わりに <video> 要素を使います。
<section class="hero">
<video class="hero__video" autoplay muted loop playsinline>
<source src="movie/main.mp4" type="video/mp4">
</video>
<div class="hero__inner">
<h1 class="hero__title">Main Visual</h1>
</div>
</section>
.hero__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
ここで初心者がつまずきやすいのが <video> タグの属性です。
autoplay: 自動再生muted: 消音（多くのブラウザでは消音でないと自動再生されません）loop: ループ再生playsinline: iPhoneでフルスクリーン表示にせず、ページ内で再生する
この4つはセットで覚えておくと安心です。
また、object-fit: cover は background-size: cover の動画版だと考えればOKです。
つまずきポイントまとめ
最後に、初心者が引っかかりやすいポイントをまとめておきます。
height: 100%ではなく100vh: 親要素に高さがなくても画面いっぱいに広がりますbackground-size: coverを忘れない: これがないと画像がタイル状に並んだり、原寸で表示されたりします- 画像のパスは相対パスで正しく:
images/main-visual.jpgのスペル・大文字小文字も合わせる - オーバーレイの
z-index: テキストにもposition: relativeを付けないと文字が背面に隠れます - スマホは
dvhを併用: アドレスバーのガタつき対策に有効です
おわりに
フルスクリーンメインビジュアルは、ファーストビューの印象を決める大事なパーツです。今回紹介したコードは最小構成ですが、ここから「スクロールを促す矢印を置く」「テキストにフェードインアニメーションを付ける」「動画と画像をデバイスで出し分ける」といった拡張がしやすい作りになっています。
まずはコピペで動くことを確認して、少しずつ自分のサイトに合わせて調整してみてください。実際に手を動かして「数字を変えると何が起きるか」を観察するのが、CSSが上達する一番の近道です。