WEBCRE8TOR.COM中国短期大学情報ビジネス学科 メディア科目ブログ
[コーディングの実践:NORMAL – Web movie – ] 03 背景動画実装編
実践編

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

2023年12月21日 ／最終更新：2024年11月16日

全画面背景動画のコーディング練習03 背景動画実装編

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

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

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

mainタグのhtmlコーディング

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

  1. headerタグの終了タグ(22行目)の記述の下を改行する。
  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タグをコーディングしていきましょう。

  1. mainタグの開始タグ(23行目)の記述の下を改行する。
  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>
<!-- 下部省略 -->

ブラウザで確認する

書き換えができたら「index.html」をCtrl + Sし、ブラウザで「index.html」を開いてF5キーしてみましょう。
上部中央に動画が表示されました。h1タグとnavタグもチラ見えしていますね。

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

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

  1. <div id=”video”></div>タグの終了タグ(26行目)の下を改行する。
  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>のメッセージの文字列が表示されましたね。
・・・ちなみに#videoや#messageをsectionではなくdivにしている理由はわかりますか?

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

最初に「main {}」のcssの指定を追加しましょう。
構造を確認しながらすべてのセレクタを記述していきましょう。

  1. header {〜}(38〜71行目)の記述の下を改行する。
  2. ハイライトされている73〜82行目の内容を記述する。

main.css

/*-- 〜上部省略〜 --*/

header {
  display: flex;
  justify-content: space-between;
  top: 0;
  letter-spacing: .05em;
  text-align: left;
  h1 {
    padding: 10px 0;
    font-size: 20px;
    line-height: 20px;
    font-weight: 400;
  }
  nav {
    @media screen and (max-width: 768px) {
      display: none;
    }
    ul {
      display: flex;
      li {
        font-size: 14px;
        line-height: 30px;
        a {
          display: block;
          padding: 5px 15px;
          color: #fff;
          &:hover {
            color: #000;
            background: #fff;
          }
        }
      }
    }
  }
}

main {
  #video {
    video {
    }
  }
  #message {
    p {
    }
  }
}

ひとまずmainタグの入れ子構造にあるすべてのセレクタを記述しました。

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

次に「main {}」単体のCSSコーディングを行いましょう。

  1. main {(73行目)の記述の下を改行する。
  2. ハイライトされている74〜82行目のコードの追記を行いましょう。

main.css

/* 上部省略 */

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番目に指定。 */
  #video {
    video {
    }
  }
  #message {
    p {
    }
  }
}

/* 下部省略 */

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. #video{(83行目)の記述の下を改行する。
  2. ハイライトされている84～88行目のコードの追記を行いましょう。
  3. video{(89行目)の記述の下を改行する。
  4. ハイライトされている90～93行目のコードの追記を行いましょう。

main.css

/* 上部省略 */

main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  #video {
    width: 100%;
    height: 100vh;
    position: absolute;/* 要素の位置を絶対配置にする。 */
    left: 0; /* 画面左端に配置。 */
    top: 0; /* 画面上端に配置。 */
    video {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  #message {
    p {
    }
  }
}

/* 下部省略 */

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

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

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

ブラウザで確認する

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

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

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

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

  1. #message {(96行目)の記述の下を改行する。
  2. ハイライトされている97～102行目のコードの追記を行う。
  3. p {(103行目)の記述の下を改行する。
  4. ハイライトされている104〜111行目のコードの追記を行う。

main.css

/* 上部省略 */

main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  #video {
    width: 100%;
    height: 100vh;
    position: absolute;
    left: 0;
    top: 0;
    video {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  #message {
    display: flex; /* フレックスボックスにする */
    flex-direction: column; /* #message {} の内側の要素のレイアウトを縦に均等配置するように指定 */
    align-items: flex-start;  /* 子要素を交差軸(横方向)左揃えに配置 */
    padding: 50px;
    position: relative; /* positionの指定がないとZ方向が奥になってしまうので指定 */
    gap: 5px;
    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; /* 文字自体に背景色を付ける時のおまじない */
    }
  }
}

/* 下部省略 */

「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 準備・確認編

RELATED POST関連記事

© 2024 RYU-YA DESIGN.

PAGE TOP
offcanvas