[コーディングの実践:NORMAL – Web movie – ] 03 背景動画実装編

<main></main>タグのhtml・cssコーディング

ではメインブロックの<main></main>タグをコーディングしていきましょう。
なお内側にあるのは「背景動画」と「英語のメッセージ」です。
この二つがアイキャッチになって雰囲気のあるデザインを演出していますね。

<main></main>タグのhtmlコーディング

編集画面を「index.html」に切り替えてください。
今度はメインコンテンツの内容をコーディングしていきましょう。

1. <header></header>タグの終了タグと<footer></footer>タグの開始タグの間を改行する。
2. ハイライトされている23・24行目の内容を記述する。

index.html

<!-- 上部省略 -->
</header>
<main>
</main>
<footer>
<!-- 下部省略 -->

ブラウザで確認する

書き換えができたら「index.html」を上書き保存(Ctrl + S)し、
ブラウザで「index.html」を開いてキーボードの「F5」キーで更新してみましょう。
特に変化はありません。

<div id=”video”></div>タグのhtmlコーディング

いよいよ背景動画のブロック<div id=”video”></div>、
そして動画自体のhtmlタグ、<video></video>タグをコーディングしていきましょう。

1. <main></main>タグの開始タグと終了タグの間を改行する。
2. ハイライトされている24～26行目の内容を記述する。

index.html

<!-- 上部省略 -->
<main>
  <div id="video">
    <video src="./video/video.mp4" autobuffer loop preload="none" autoplay muted playsinline="true" poster="./img/poster.jpg"></video>
  <!-- / #video --></div>
</main>
<!-- 下部省略 -->

ブラウザで確認する

書き換えができたら「main.css」を上書き保存(Ctrl + S)し、
ブラウザで「index.html」を開いてキーボードの「F5」キーで更新してみましょう。

上部中央に動画が表示されました!
<h1><h1>と<nav></nav>もチラ見えしていますね。

<div id=”message”></div>タグのhtmlコーディング

最後にメッセージのブロック<div id=”message”></div>、
そして内側の段落<p></p>タグをコーディングしていきましょう。

1. <div id=”video”></div>タグの終了タグの下を改行する。
2. ハイライトされている27～31行目の内容を記述する。

index.html

<!-- 上部省略 -->
<main>
  <div id="video">
    <video src="./video/video.mp4" autobuffer loop preload="none" autoplay muted playsinline="true" poster="./img/poster.jpg"></video>
  <!-- / #video --></div>
  <div id="message">
    <p>Ouch.</p>
    <p>Your hair is scratchy.</p>
    <p>Keep away from me.</p>
  <!-- / #message --></div>
</main>
<!-- 下部省略 -->

ブラウザで確認する

書き換えができたら「main.css」を上書き保存(Ctrl + S)し、
ブラウザで「index.html」を開いてキーボードの「F5」キーで更新してみましょう。

小さく<div id=”message”></div>のメッセージの文字列が表示されましたね。

「main {}」のcssコーディング

では「main {}」のCSSコーディングを行いましょう。
編集画面を「main.css」に切り替えてください。

1. 「header nav li a:hover {〜}」と「footer {～}」の間を改行する。
2. ハイライトされている79〜89行目のコードの追記を行いましょう。

main.css

/* 上部省略 */

header nav li a:hover {
  color: #000;
  background: #fff;
}

main {
  display: flex;  /* フレックスボックスにする */
  flex-direction: column; /* main{} の内側の要素のレイアウトを縦に均等配置するように指定 */
  justify-content: center;  /* 子要素を主軸(縦方向)中央揃えに配置 */
  width: 100%;
  height: 100%;
  position: absolute;/* 要素の位置を絶対配置にする。 */
  left: 0; /* 画面左端に配置。 */
  top: 0; /* 画面上端に配置。 */
  z-index: 1; /* z-indexプロパティで要素の重なり順を1番目に指定。 */
}

footer {
  bottom: 0;
  text-align: right
}

display: flex; + flex-direction: column; + justify-content: center; = フレックスボックスにし、縦方向を主軸として中央揃えにする

「main {}」で注目すべき指定はまず「主軸を縦方向にしたフレックスボックス」にし、
内包する要素、今回は「動画・メッセージ」の2つを「中央揃えにする」という点です。

position: absolute; + left: 0; + top: 0; = 配置を絶対配置にして左から0px・上から0pxの位置に固定する

もう一つ注目すべき点は、横幅・高さともに100%にした「main {}」自体を、
ページ内で他の要素の配置に影響を受けないように「絶対配置でレイアウト」している点です。

プロパティ・値の説明

プロパティ	指定の効果	値
position	要素がどのように配置されるかを設定	static(初期値)・relative・ absolute・fixed・sticky

「position」プロパティは指定した要素がボックス内でどのように配置されるかを指定することができます。

値に「relative」を指定すると親要素内で他の要素に影響を受けつつ相対配置され、
「absolute」を指定すると親要素内で他の要素の影響を受けずに絶対配置され、
「fixed」を指定するとウィンドウ全体で他の要素の影響を受けずに固定配置されます。

一見「abosolute」と「fixed」は似ていますが、
決定的な違いは「スクロールされた際の表示の仕方」です。

スクロールするに足るコンテンツボリュームが十分にありスクロールした場合、
「absolute」は通常のコンテンツと同様に上に流れていきますが、
「fixed」はウィンドウ内で指定した位置から動くことがありません。

よく目にする「スクロールしても固定されるグローバルナビゲーション」は、
「position: fixed;」でレイアウトされています。

参考URL:positionプロパティの正しい使用方法を図解で詳しく紹介! | Webmedia (itra.co.jp)

ブラウザで確認する

書き換えができたら「main.css」を上書き保存(Ctrl + S)し、
ブラウザで「index.html」を開いてキーボードの「F5」キーで更新してみましょう。

動画とメッセージが垂直方向中央に移動していますか?
画面全体のサイズになり(width: 100%;height: 100%;)、
さらに左上に絶対配置(position: absolute;left: 0;top: 0;)し、
さらに上述のフレックスボックスの設定(display: flex;flex-direction: column;justify-content: center;)にしたことで、
「main {}」の中身を中央配置することができましたね。

「main #video {}」のcssコーディング

では「main #video {}」のCSSコーディングを行いましょう。

1. 「main {〜}」と「footer {～}」の間を改行する。
2. ハイライトされている91～97・99〜104行目のコードの追記を行いましょう。

main.css

/* 上部省略 */

main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}

main #video {
  width: 100%;
  height: 100vh;
  position: absolute;/* 要素の位置を絶対配置にする。 */
  left: 0; /* 画面左端に配置。 */
  top: 0; /* 画面上端に配置。 */
}

main #video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

footer {
  bottom: 0;
  text-align: right;
}

/* 下部省略 */

「main #video」に対して絶対配置を行ない背景動画にする

先ほど「main {}」に対して「主軸縦方向の中央揃え」を行いましたね。
それによって先ほど動画ブロックが中央に配置されるのを確認できました。

しかし動画ブロック「main #video {}」は親要素「main {}」と同じように絶対配置を行なっています。
実は絶対配置を行うと、その要素は親要素のフレックスボックスの対象外になります。

ブラウザで確認する

書き換えができたら「main.css」を上書き保存(Ctrl + S)し、
ブラウザで「index.html」を開いてキーボードの「F5」キーで更新してみましょう。
背景動画として配置されていますか?

けど・・・メッセージが消えた!

「main #message{}」のcssコーディング

では「main #message{}」のCSSコーディングを行いましょう。

1. 「main #video video {〜}」と「footer {～}」の間を改行する。
2. ハイライトされている106～113・115〜124行目のコードの追記を行いましょう。

main.css

/* 上部省略 */

main #video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

main #message {
  display: flex; /* フレックスボックスにする */
  flex-direction: column; /* #message {} の内側の要素のレイアウトを縦に均等配置するように指定 */
  align-items: flex-start;  /* 子要素を交差軸(横方向)左揃えに配置 */
  padding: 50px;
  position: relative; /* positionの指定がないとZ方向が奥になってしまうので指定 */
  gap: 5px;
}

main #message p {
  padding: 5px 15px ;
  letter-spacing: .05em; /* 文字間を1文字の5%分広げる。*/
  font-size: 60px; /* 文字サイズを60pxに指定。*/
  line-height: 60px; /* 行間を60pxに指定。*/
  background: #000;
  color: #fff;
  -webkit-box-decoration-break: clone; /* 文字自体に背景色を付ける時のおまじない */
  box-decoration-break: clone; /* 文字自体に背景色を付ける時のおまじない */
}

footer {
  bottom: 0;
  text-align: right;
}

/* 下部省略 */

「main #message」に「position: relative;」を指定して表示させる

先ほど確認したところ「main #message {}」が表示されていませんでしたね。
原因は「main #message {}」に「position」プロパティを指定していないからです。

前項で「main #video{}」には「position: absolute;」を指定して絶対配置を行いましたが、。
この場合は「main #message {}」にも「position」プロパティを指定しないと、
Z方向で奥に回ってしまいます。

ブラウザで確認する

書き換えができたら「main.css」を上書き保存(Ctrl + S)し、
ブラウザで「index.html」を開いてキーボードの「F5」キーで更新してみましょう。
メッセージ部分が表示されましたか?

LEVEL NORMAL – Web Movie –のコーディング完成

お疲れ様でした!
LEVEL NORMAL – Web Movie –はこれにて完成です。

いかがでしたか?全画面背景動画の実装をする場合、
以前はJavaScriptを使って色々な計算をしてやっと表示されていましたが、
今はcssの新しい指定だけで簡単に全画面で表示を行えるようになりました。

ちなみにYoutube動画などの動画サービスでも全画面背景で表示できますが、
少しコツが必要なので、やり方を知りたい人は聞いてくださいね。

その他のコーディングの実践

[コーディングの実践:EASY] 01 準備・確認編

[コーディングの実践:NORMAL] 01 準備・確認編

[コーディングの実践:HARD] 01 準備・確認編