WEB / HTML / CSS / VIDEO
LESSON 02
CSSで動画を画面いっぱいに表示する方法
第1回では、HTMLのvideoタグを使って、WebページにMP4動画を表示しました。
ただし、現時点では動画が通常のコンテンツとして配置されているだけです。Webサイトのメインビジュアルとして使用するには、動画をブラウザーの表示領域に合わせて広げる必要があります。
今回はCSSを追加し、第1回で配置した動画を、画面いっぱいに広がるHero背景動画へ変更します。
この記事は「動画を使ったHeroエリアを作る」全5回の第2回です。
第1回の記事をまだ読んでいない場合は、先にHTMLのvideoタグを使って動画を配置しておきましょう。
今回作成するもの
第1回では、動画にwidth="960"を指定し、横幅960ピクセルで表示しました。
今回は動画をheroクラスを付けたdivタグで囲み、CSSを使って次のように変更します。
- ページ周囲の余白をなくす
- Heroエリアをブラウザー画面の高さに合わせる
- 動画をHeroエリア全体へ広げる
- 動画の縦横比を保つ
- Heroエリアからはみ出した部分を非表示にする
完成すると、ブラウザーの表示領域いっぱいに動画が表示されます。
なお、動画の上に表示するタイトルや説明文は、第3回で追加します。
この記事で学べること
- 外部CSSファイルをHTMLから読み込む方法
class属性を使って要素に名前を付ける方法100vhを使って画面の高さに合わせる方法overflow: hiddenではみ出した部分を隠す方法object-fit: coverで動画を隙間なく表示する方法- 動画の縦横比と見切れの関係
作業を始める前の準備
今回は、第1回で作成したファイルを引き続き使用します。
作業用フォルダーを複製し、フォルダー名をweb-002へ変更しておきましょう。フォルダー内は、次の構成にします。
web-002/
├─ index.html
├─ css/
│ └─ style.css
└─ video/
└─ hero.mp4第2回からはCSSを使用するため、新しくcssフォルダーとstyle.cssファイルを追加します。
STEP 1
CSSファイルを作成する
最初に、CSSを記述するためのファイルを作成します。
web-002フォルダーの中に、cssという名前のフォルダーを作成してください。続いて、作成したcssフォルダーの中に、style.cssファイルを作成します。
CSSは、Webページの色、文字サイズ、余白、配置、要素の大きさなど、主に見た目を指定するための言語です。
| ファイル | 役割 |
|---|---|
index.html |
動画など、ページの内容と構造を記述する |
style.css |
動画の大きさや配置など、ページの見た目を指定する |
HTMLとCSSを別ファイルに分けておくと、それぞれの役割が明確になり、あとからデザインを修正しやすくなります。
STEP 2
HTMLからCSSファイルを読み込む
CSSファイルを作成しただけでは、index.htmlには適用されません。HTMLからCSSファイルを読み込むため、index.htmlのheadタグ内に、次のlinkタグを追加します。
<link rel="stylesheet" href="css/style.css">追加後のhead部分は、次のようになります。
<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>linkタグの役割
linkタグは、HTMLファイルと外部ファイルを関連付けるためのタグです。
rel="stylesheet"
読み込むファイルが、CSSのスタイルシートであることを示します。
href="css/style.css"
読み込むCSSファイルの場所を指定します。今回のstyle.cssは、index.htmlと同じ階層にあるcssフォルダーの中にあります。そのため、css/style.cssと指定します。
フォルダー名やファイル名が実際の構成と異なっていると、CSSは適用されません。特に、cssとCSS、style.cssとstyles.cssの違いに注意してください。サーバー環境によっては、大文字と小文字も区別されます。
STEP 3
動画をHeroエリアで囲む
続いて、動画を表示する範囲となるHeroエリアを作成します。
第1回のHTMLでは、videoタグを単独で配置していました。
<video width="960" autoplay muted loop playsinline>
<source src="video/hero.mp4" type="video/mp4">
お使いのブラウザーは動画の再生に対応していません。
</video>今回は、このvideoタグをdivタグで囲みます。
<div class="hero">
<video autoplay muted loop playsinline>
<source src="video/hero.mp4" type="video/mp4">
お使いのブラウザーは動画の再生に対応していません。
</video>
</div>divタグとは
divタグは、複数の要素をひとまとまりにしたり、レイアウトの範囲を作ったりするときに使用するタグです。divは「division」の略で、区分や分割という意味があります。
divタグそのものには、見た目を変える働きはありません。CSSと組み合わせることで、大きさや配置、背景色などを設定できるようになります。今回は、動画を表示する範囲として使用します。
class="hero"とは
class属性は、HTML要素に名前を付けるために使用します。
<div class="hero">このコードでは、div要素にheroというクラス名を付けています。CSSでは、クラス名の先頭にピリオドを付けて指定します。
.hero {
}これにより、heroクラスが設定されたHTML要素に対して、CSSを適用できます。
width="960"を削除する
第1回のvideoタグに指定していたwidth="960"は削除します。今回はCSSを使って動画の幅と高さを設定するためです。
HTMLのwidth属性が残っていてもCSS側の指定が優先される場合がありますが、同じ大きさをHTMLとCSSの両方で指定すると管理しにくくなります。見た目に関する設定はCSSへまとめておきましょう。
STEP 4
ページ周囲の余白を取り除く
ここから、style.cssへCSSを記述します。最初に、次のコードを追加してください。
body {
margin: 0;
}bodyが表す範囲
bodyは、ブラウザーに表示されるページ全体を表します。HTMLでは、ページ内に表示する見出し、文章、画像、動画などを、基本的にbodyタグの中へ記述します。
margin: 0;の役割
多くのブラウザーでは、初期状態でbodyの周囲に少し余白が設定されています。そのまま動画を配置すると、画面の端と動画の間に白い余白が表示されます。
margin: 0;を指定すると、bodyの外側の余白が0になり、Hero背景を画面の端まで表示できます。
STEP 5
Heroエリアの高さを画面に合わせる
続いて、Heroエリアの大きさを設定します。style.cssへ、次のコードを追加してください。
.hero {
position: relative;
height: 100vh;
overflow: hidden;
}position: relative;
positionプロパティは、要素を配置する方法や、位置を決める基準を設定するために使用します。
今回の表示だけを見ると、position: relativeを指定しても大きな変化はありません。これは、第3回でタイトルを動画の上に重ねるための準備です。次回、Heroエリアをタイトル配置の基準として利用します。
height: 100vh;
heightプロパティは、要素の高さを指定します。vhは「viewport height」の略です。viewportとは、ブラウザーでWebページが表示されている領域を指します。
1vhは表示領域の高さの1％です。
| 指定 | 高さ |
|---|---|
25vh |
表示領域の高さの25％ |
50vh |
表示領域の高さの50％ |
100vh |
表示領域の高さの100％ |
今回はheight: 100vhを指定しているため、Heroエリアの高さがブラウザーの表示領域と同じになります。ブラウザーのウィンドウサイズを変更すると、Heroエリアの高さも合わせて変化します。
overflow: hidden;
overflowプロパティは、要素の範囲から内容がはみ出した場合の表示方法を指定します。hiddenを指定すると、範囲からはみ出した部分が非表示になります。
今回の動画は、Heroエリアに隙間ができないように拡大して表示します。そのため、画面と動画の縦横比によっては、動画の一部がHeroエリアからはみ出します。overflow: hiddenを指定しておけば、はみ出した部分を隠せます。
STEP 6
動画をHeroエリア全体へ広げる
次に、Heroエリアの中にある動画へCSSを適用します。
.hero video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}.hero videoが表す要素
.hero videoは、heroクラスが付いた要素の中にあるvideo要素を指定しています。
<div class="hero">
<video>
</video>
</div>この場合、div class="hero"が親要素、その中にあるvideoが子要素です。ある要素の中に配置された別の要素を指定する場合は、セレクターを半角スペースで区切って記述します。
親となる要素 子となる要素ページ内のすべての動画ではなく、Heroエリア内の動画だけにスタイルを適用できるのがポイントです。
display: block;
displayプロパティは、要素の表示形式を指定します。video要素は、初期状態では下側にわずかな隙間ができる場合があります。display: block;を指定してブロックレベルのボックスとして表示すると、この不要な隙間を防げます。
width: 100%;
widthプロパティは、要素の横幅を指定します。ここでの100%は親要素の幅に対する100％です。そのため、動画の横幅がHeroエリアと同じになります。
height: 100%;
heightプロパティは、要素の高さを指定します。ここでの100%は、親要素であるHeroエリアの高さに対する100％です。
Heroエリアにはheight: 100vh;が指定されています。親要素の高さが決まっているため、その中にある動画へheight: 100%;を指定すると、動画もHeroエリアと同じ高さになります。
STEP 7
動画を隙間なく表示する
動画をHeroエリア全体へ広げるために重要なのが、object-fitプロパティです。
object-fit: cover;object-fitとは
object-fitプロパティは、画像や動画を、指定された表示領域へどのように収めるかを設定します。今回使用するcoverには、次の特徴があります。
- 動画の縦横比を維持する
- Heroエリア全体を覆う
- 余白を作らない
- 収まりきらない部分は見切れる
たとえば、横長の動画を縦長のブラウザー画面で表示すると、動画の左右が見切れる場合があります。反対に、動画よりも横長の画面で表示すると、動画の上下が見切れる場合があります。
これは表示上の不具合ではありません。動画の縦横比を崩さず、Heroエリアに隙間を作らないための動作です。
coverを指定しない場合
width: 100%;とheight: 100%;だけを指定すると、動画がHeroエリアの幅と高さに強制的に合わせられ、縦や横へ伸びて見える場合があります。ここにobject-fit: cover;を加えることで、動画本来の縦横比を保ちながら表示できます。
containとの違い
| 値 | 表示方法 |
|---|---|
cover |
表示領域全体を覆う。動画の一部が見切れる場合がある |
contain |
動画全体を表示する。上下または左右に余白ができる場合がある |
背景動画では、周囲に余白ができないcoverがよく使用されます。一方、動画の全体を必ず見せたい場合は、containのほうが適しています。
今回の目的はHero背景として画面全体を覆うことなので、coverを使用します。
STEP 8
完成コードを確認する
ここまでの作業が完了したら、HTMLとCSSのコード全体を確認しましょう。
完成版のHTML
index.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>
</body>
</html>完成版のCSS
css/style.cssには、次のコードを記述します。
body {
margin: 0;
}
.hero {
position: relative;
height: 100vh;
overflow: hidden;
}
.hero video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}ファイルを保存したら、index.htmlをブラウザーで開きます。
動画がブラウザーの表示領域いっぱいに広がり、周囲に白い余白が表示されていなければ完成です。ブラウザーの横幅や高さを変更し、動画が画面に合わせて変化することも確認してください。
HTMLとCSSの関係を整理しよう
今回のHTMLとCSSには、次のような親子関係があります。
<div class="hero">
<video>
</video>
</div>heroクラスが付いたdivタグが親要素、その中にあるvideoタグが子要素です。
親要素であるHeroエリアには、画面全体の高さと表示範囲を指定しています。
.hero {
height: 100vh;
overflow: hidden;
}子要素である動画には、親要素を覆うための大きさと表示方法を指定しています。
.hero video {
width: 100%;
height: 100%;
object-fit: cover;
}今回のレイアウトは、次の考え方で作られています。
- 親要素の
.heroで、動画を表示する範囲を決める - 子要素の
videoを、親要素と同じ大きさにする object-fit: cover;で、隙間ができないように動画を表示する- はみ出した部分を
overflow: hidden;で隠す
CSSを学ぶときは、プロパティを個別に暗記するだけでなく、親要素と子要素の役割を分けて考えることが重要です。
表示が崩れた場合の確認項目
CSSが適用されていない
動画が第1回と同じ状態で表示される場合は、CSSファイルが読み込まれていない可能性があります。headタグ内に、次のコードがあるか確認します。
<link rel="stylesheet" href="css/style.css">また、style.cssがindex.htmlと同じ階層にあるcssフォルダーの中へ保存されているか確認してください。別の場所にある場合は、href属性の指定も変更する必要があります。
ページの周囲に白い余白がある
ページの上下左右に白い余白がある場合は、次のCSSが記述されているか確認してください。
body {
margin: 0;
}marginのスペルや、末尾のセミコロンにも注意します。
動画の高さが画面に合わない
Heroエリアに、height: 100vh;が指定されているか確認してください。
100%と100vhは意味が異なります。height: 100%;の場合は、基準となる親要素の高さが必要です。一方、100vhはブラウザーの表示領域を基準にするため、画面と同じ高さを指定できます。
動画が縦や横に伸びて見える
動画の縦横比が崩れている場合は、object-fit: cover;の指定を確認します。width: 100%;とheight: 100%;だけでは、動画が表示領域に合わせて変形する場合があります。
動画の一部が見切れている
object-fit: cover;を指定すると、動画の一部が上下または左右で見切れる場合があります。これは、動画の縦横比を保ちながら、Heroエリア全体を隙間なく覆っているためであり、不具合ではありません。
第4回では、スマートフォン表示への対応とあわせて、object-positionを使用して動画の見える位置を調整します。
動画が再生されない
sourceタグのsrc属性と、実際の動画ファイルの場所が一致しているか確認してください。
<source src="video/hero.mp4" type="video/mp4">自動再生には、基本的にautoplayとmutedの両方が必要です。
<video autoplay muted loop playsinline>動画ファイル自体が途中までしか再生できない場合は、MP4ファイルが破損していないか、動画編集ソフトから正常に書き出されているかも確認してください。
今回のまとめ
今回はCSSを追加し、第1回で配置した動画を、画面いっぱいに広がるHero背景動画へ変更しました。
margin: 0;でページ周囲の余白をなくすheight: 100vh;でHeroエリアを画面の高さに合わせるoverflow: hidden;ではみ出した動画を隠すwidth: 100%;とheight: 100%;で動画をHeroエリア全体へ広げるobject-fit: cover;で動画の縦横比を保ちながら隙間なく表示するposition: relative;で次回のタイトル配置に備える
今回の段階では、Heroエリアには動画だけが表示されています。
次回は、動画の上にWebサイトのタイトルと説明文を重ねて表示します。その際に、今回指定したposition: relative;が、タイトルの配置基準として機能します。
コード全文、実習用動画、完成サンプルは、STACK公式サイトの「LEARN」から確認できます。