WEB / HTML / CSS / VIDEO
LESSON 04
Hero背景動画をスマートフォンに対応させる方法
第3回では、Hero背景動画の上にタイトル、説明文、リンクボタンを重ねて表示しました。
PCでは見やすくても、画面幅の狭いスマートフォンでは、タイトルが大きすぎたり、文章の改行が不自然になったり、動画の見せたい部分が切れたりすることがあります。
今回は、第3回のHTML構造とPC用CSSを残したまま、CSSの末尾へメディアクエリを追加し、スマートフォン用の表示へ調整します。
この記事は「動画を使ったHeroエリアを作る」全5回の第4回です。
第3回の記事をまだ読んでいない場合は、先に背景動画の上にタイトルを重ねて表示する方法を読み、タイトル部分まで作成しておきましょう。なお、この連載はSTACK公式サイトをモデルに構成しています。実際のページの表示や動きも、あわせて参考にしてください。
今回作成するもの
第3回で作成したHeroエリアを、スマートフォンでも読みやすく操作しやすい表示へ変更します。
- Heroエリアの高さをスマートフォン向けに調整する
- タイトル部分の左右に余白を作る
- タイトルと説明文の文字サイズを調整する
- PC用に指定した固定改行を解除する
- ボタンの押しやすさを保つ
- 動画の表示位置を調整する
この記事で学べること
- メディアクエリの基本
max-widthで適用範囲を指定する方法- PC用CSSを残したまま値を上書きする方法
svhを使ったHeroの高さ調整brタグによる固定改行をCSSで解除する方法object-positionで動画の表示位置を変える方法- 開発者ツールで画面幅を変えて確認する方法
作業を始める前の準備
第3回で作成したフォルダーを複製し、フォルダー名をweb-004へ変更します。
web-004/
├─ index.html
├─ css/
│ └─ style.css
└─ video/
└─ hero.mp4index.htmlは変更しません。今回の作業は、css/style.cssの末尾へスマートフォン用のCSSを追加して進めます。
STEP 1
メディアクエリを追加する
最初に、スマートフォン用のCSSを書く範囲を作ります。
style.cssの末尾へ、次のコードを追加してください。
@media (max-width: 800px) {\n\n}@mediaは、画面幅などの条件によって適用するCSSを切り替えるための仕組みです。今回は、ブラウザーの表示幅が800px以下になった場合に、波括弧の中へ書いたCSSが適用されます。
PC用CSSは削除しません。
スマートフォン用の指定をCSSの末尾へ追加し、必要な値だけを上書きします。
STEP 2
Heroエリアの高さを調整する
メディアクエリの中へ、次のCSSを追加します。
.hero {\n height: 100svh;\n min-height: 560px;\n}100svhは、スマートフォンのブラウザーに表示される領域を基準に高さを指定する単位です。
min-height: 560pxも指定し、画面の高さが低い場合でも、タイトルやボタンを表示するための最低限の高さを確保します。
STEP 3
タイトル部分の左右余白を調整する
スマートフォンでは横幅が狭いため、タイトル部分の左右に余白を作ります。
.hero__content {\n left: 6%;\n right: 6%;\n}PC用CSSではleft: 8%だけを指定していました。スマートフォン用CSSではright: 6%も追加し、文字が画面右端まではみ出さないようにします。
STEP 4
ラベルとタイトルの文字サイズを調整する
英文ラベルとタイトルを、スマートフォンで読みやすい大きさへ変更します。
.hero__label {
margin-bottom: 12px;
font-size: 11px;
line-height: 1.6;
}
.hero__title {
margin-bottom: 20px;
font-size: 38px;
line-height: 1.2;
}同じセレクターとプロパティをあとから書くと、条件が成立している範囲では、あとに書いた値が優先されます。これがCSSの上書きです。
STEP 5
HTMLで指定した改行を解除する
第3回では、PC表示に合わせてbrタグで改行位置を指定しました。
スマートフォンでは、その改行が残ると文章が細かく分かれすぎるため、次のCSSを追加します。
.hero__title br,
.hero__text br {
display: none;
}display: noneを指定すると、対象のbrタグが表示上は使われなくなります。文章は画面幅に合わせて自然に折り返されます。
STEP 6
説明文を読みやすく調整する
説明文の文字サイズ、行間、下側の余白を調整します。
.hero__text {
margin-bottom: 28px;
font-size: 15px;
line-height: 1.8;
}文字を小さくするだけでなく、line-heightで行間を確保します。スマートフォンでは複数行になりやすいため、行間が狭すぎないことが重要です。
STEP 7
リンクボタンをスマートフォン向けに調整する
リンクボタンは小さくしすぎず、指で押しやすい余白を残します。
.hero__button {
padding: 13px 24px;
font-size: 15px;
}paddingは、文字と枠線の間に作る内側の余白です。スマートフォンでも押しやすさを保つため、上下左右に十分な余白を残します。
STEP 8
動画の表示位置を調整する
object-fit: coverを使うと、画面の形に合わせて動画の一部が切り取られます。スマートフォンでは縦長になるため、見せたい部分が画面外へ移動することがあります。
.hero video {
object-position: 58% center;
}object-positionは、切り取られる動画のどの位置を中心に表示するかを指定します。今回は横方向を58％へ移動し、使用動画の見せたい部分が画面内に入りやすくしています。
STEP 9
完成コードを確認する
今回変更したのはCSSだけです。第3回で作成したHTML構造は、そのまま使用します。
完成版のHTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hero背景動画をスマートフォンに対応させる</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="hero">
<video autoplay muted loop playsinline>
<source src="video/hero.mp4" type="video/mp4">
お使いのブラウザーは動画の再生に対応していません。
</video>
<div class="hero__content">
<p class="hero__label">STACK CREATIVE CONTENTS COMPANY</p>
<h1 class="hero__title">
伝える技術を、<br>
もっと分かりやすく。
</h1>
<p class="hero__text">
書籍・動画・Web・教育コンテンツを通じて、<br>
知識を「伝わる形」に変えます。
</p>
<a class="hero__button" href="#contents">活動を見る</a>
</div>
</div>
<section id="contents" class="contents">
<h2>活動とコンテンツ</h2>
<p>この位置に、Heroエリアに続くコンテンツを配置します。</p>
</section>
</body>
</html>
完成版のCSS
body {
margin: 0;
}
.hero {
position: relative;
height: 100vh;
overflow: hidden;
}
.hero video {
position: absolute;
inset: 0;
z-index: 1;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.hero__content {
position: absolute;
top: 50%;
left: 8%;
z-index: 2;
color: #fff;
transform: translateY(-50%);
}
.hero__label {
margin: 0 0 16px;
font-size: 14px;
letter-spacing: 0.2em;
}
.hero__title {
margin: 0 0 24px;
font-size: clamp(40px, 6vw, 80px);
font-weight: 300;
line-height: 1.15;
}
.hero__text {
margin: 0 0 32px;
font-size: 18px;
line-height: 1.8;
}
.hero__button {
display: inline-block;
padding: 14px 28px;
border: 1px solid #fff;
color: #fff;
text-decoration: none;
}
.hero__button:hover {
background-color: #fff;
color: #111;
}
.contents {
padding: 80px 8%;
}
@media (max-width: 800px) {
.hero {
height: 100svh;
min-height: 560px;
}
.hero video {
object-position: 58% center;
}
.hero__content {
left: 6%;
right: 6%;
}
.hero__label {
margin-bottom: 12px;
font-size: 11px;
line-height: 1.6;
}
.hero__title {
margin-bottom: 20px;
font-size: 38px;
line-height: 1.2;
}
.hero__title br,
.hero__text br {
display: none;
}
.hero__text {
margin-bottom: 28px;
font-size: 15px;
line-height: 1.8;
}
.hero__button {
padding: 13px 24px;
font-size: 15px;
}
.contents {
padding: 56px 6%;
}
}
ファイルを保存したら、ブラウザーの開発者ツールなどで表示幅を800px以下にし、スマートフォン用のレイアウトへ切り替わることを確認してください。
PC用CSSとスマートフォン用CSSの関係を整理しよう
メディアクエリより前に書かれているCSSは、基本となるPC表示に使用します。
.hero__title {
font-size: clamp(40px, 6vw, 80px);
}画面幅が800px以下になると、メディアクエリ内の同じプロパティが適用されます。
@media (max-width: 800px) {
.hero__title {
font-size: 38px;
}
}PC用CSSを削除するのではなく、必要な値だけをスマートフォン用CSSで上書きするのが今回の基本です。
表示が崩れた場合の確認項目
メディアクエリが適用されない
@media (max-width: 800px)の波括弧が正しく閉じられているか、表示幅が800px以下になっているか確認します。
PC表示まで変わってしまう
スマートフォン用CSSがメディアクエリの波括弧の外へ出ていないか確認してください。
タイトルが右端からはみ出す
.hero__contentにright: 6%が追加されているか確認します。
タイトルや説明文の改行が細かすぎる
.hero__title brと.hero__text brへdisplay: noneが指定されているか確認します。
動画の見せたい部分が切れる
object-positionの横方向の数値を少しずつ変更し、使用する動画に合う位置を探します。
今回のまとめ
- メディアクエリを使うと、画面幅によって適用するCSSを切り替えられる
- PC用CSSは残し、スマートフォン用CSSで必要な値だけを上書きする
leftとrightで左右の余白を確保するbrタグの固定改行は、スマートフォンでは解除できるobject-positionで動画の見せたい位置を調整できる- レスポンシブ対応は実際の画面幅で確認する
次回は、Hero背景動画をWeb公開用に軽量化し、読み込み負荷を抑える方法を扱います。