ウェブデザイン演習 第12回 - ウェブデザイン演習 | WordPress・jQuery・HTML・CSSのスニペット集 WEBCRE8TOR.COM

WEBCRE8TOR.COM

ウェブデザイン演習 第12回

今回から新しいデザインでコーディングを行います。
アンケートの中にあった「Web動画の埋め込み」です。

この記事の目次

ウェブデザイン演習 第12回

質問に対する回答

「よく使われるjQueryプラグインにはどんなものがありますか」という質問があったので回答します。
使用頻度の高いプラグインはいくつかありますが、最も使う&必ず使うプラグインは以下になります。

Magnific Popup

Magnific Popupは様々なものをポップアップ表示させるのに有効です。
代表的なものでいえばこのブログでも使っている画像の拡大表示ですね。

Magnific Popupで作るjQueryのモーダルウィンドウ ｜ Gimmick log

Magnific Popup を使ってみる | Web Design Leaves

imgLiquid.js

imgLiquid.jsはブロックのサイズぴったりに画像を表示してくれるjQueryプラグインで、
これを使えば縦長や横長や正方形など、どのような形の画像でもボックス内に綺麗に納めてくれます。

imgタグ内の画像をアスペクト比を保ちながら表示するjQueryプラグイン – Qiita

コンテナに画像がぴったり収まるように画像のサイズを変更するjQueryプラグイン・imgLiquid | かちびと.net

コーディングの準備

今回は講義終了までに完成を目指しますので、
JavaScriptのコードを1から記述することはしません。

全画面表示と自動リサイズの対応だけなら、
jQueryプラグインで簡単に実装することができます。

https://webcre8tor.com/data/lesson/video/

※ID・PASSは講義にて

フォルダ・ファイルの準備

今回もまずHTMLファイルやCSSファイルなどの準備を行いましょう。

こちらのファイルも今後の講義で毎回使いますので、管理しやすく、データが消えないような場所にフォルダとファイルを作り、できればUSBメモリなど自分で持ち歩けるものにフォルダとファイルを保存して、講義の度に持ってきてもらうと安全です。

手順は以下です。

  1. 自分で管理できる場所にフォルダを作り、名前を「html_video」にする。
  2. 「html_video」フォルダの中にさらに「css」「js」「img」「video」というフォルダを作る。
  3. Dreamweaverを開き、新規ファイルを作成。
    「index.html」という名前をつけて「html_video」フォルダの直下に保存する。
  4. Dreamweaverで新規ファイルを作り、「main.css」という名前をつけて、
    「html_video」フォルダの中の「css」フォルダの中に保存する。

1・2 フォルダの作成

まずはじめにフォルダから作っていきましょう。

右クリックメニューから、新規作成 > フォルダー と進み「html_video」と名前をつけてください。
作成された「html_video」フォルダを開き、フォルダの中に「css」「js」「img」「video」の4つのフォルダを再び作成して終わりです。

3・4 ファイルの作成

次に、3の「index.htmlの作成」の説明をします。
まずDreamweaverを起動してください。

lesson03_dreamweaver01

起動して出てきたウィンドウの「HTML」をクリックして・・・

lesson03_dreamweaver02

そのまま「作成」ボタンをクリックすると・・・

lesson03_dreamweaver03

新規ドキュメントが立ち上がりますが、すでに10行ほどコードが記述されています。
この講義では記述を行いながら説明を行うので、ひとまずこちらのコードを削除して、
上部メニューから、ファイル > 保存 と進み、「index.html」と名前をつけて保存しましょう。

この時、保存先が先ほど作成した「html_video」フォルダになるように注意してください。

4の「main.cssの作成」も同様に、新規ドキュメントが立ち上がったらコードを削除して、
「main.css」と名前をつけて「html_video」フォルダの中の「css」フォルダに保存しましょう。

ファイル・フォルダ構成の確認

問題なくできていれば、以下の画像のようなフォルダ構成になっているはずです。

フォルダ・ファイル構成がもし違っていたら、
もう一度よく確認しながら手順を進めてください。

動画ファイル・画像ファイルを各フォルダに配置する

今回コーディングで使用する動画ファイル・画像ファイルをダウンロードして、
読み込み先の各フォルダに移動しておきましょう。

以下の2つのURLを右クリック「ファイルを保存」して、
2件の動画データを「html_video」フォルダの中の「video」フォルダに移動してください。

動画ダウンロードURL：https://webcre8tor.com/data/lesson/video/video/video.mp4

次に以下のURLを右クリック「ファイルを保存」してダウンロードしたzipファイルを解凍し、
中にある「after.png」「poster.jpg」という2枚の画像を、
「html_video」フォルダの中の「img」フォルダの中に移動してください。

画像ダウンロードURL：https://webcre8tor.com/data/lesson/video/img/img.zip

※上の画像の「video」フォルダ内「video.webm」があるようになっていますが、このファイルは今回使わないので必要ありません。

テンプレート部分のHTML・CSSコーディング

前回のデザインで基本部分は抑えているので、
テンプレート部分はサクサク進めてしまいます。

テンプレート部分のHTMLコーディング

まずはテンプレート部分のHTMLを記述します。
下記コードの全てをindex.htmlに記述しましょう。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/main.css">
<title>Web Movie</title>
</head>
<body>
</body>
</html>

問題ないですか？？

テンプレート部分のCSSコーディング

HTMLの記述が終われば今度はCSSの記述を追加しましょう。
下記コードの全てをmain.cssに記述しましょう。

main.css

@charset "utf-8";

* {
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;
  box-sizing: border-box;
}

a {text-decoration: none;}

ul {list-style: none;}

header,
nav,
footer {
  display:block;
  margin: 0;
}

html , body {
  height: 100%;
}

body {
  background: #000;
}

前回のものよりかなり記述を省略していますが、
今回のWeb動画の埋め込みに関してはこれで十分です。

Google Web FontsでWebフォントを使ってみよう

今回はWeb動画の埋め込みと並行して、
Webフォントというものを使ってみましょう。

Webフォントとは？

Webサイトを閲覧するときには、
通常であればPCの中にインストールされているフォントしか表示できないこと、
万人のPCに自分が使ったフォントがインストールされているわけではないことは、
以前講義で解説しましたよね。

しかし今回解説するWebフォントを使えば、
ほとんどのPCで同じフォントを比較的簡単に表示することができるようになります。

Webフォントは、Webサイトの画像やテキストと同じ扱いで、
そのデータをウェブサーバー上に置き、PCからWebサーバーにリクエストを送って読み込むことで、
各々のPCにインストールしていないフォントでも表示することができるという技術です。

Google Web Fontsとは？

Google Web Fontsは最も有名なWebフォントの一つです。
様々なフォントが用意され、しかも全て無料で使用することができるため、
手軽にWebサイトにWebフォントを導入することができます。

Google Web Fontsの導入方法

Google Web Fontsのページにアクセスする

まずはGoogle Web Fontsにアクセスしてみましょう。

様々なフォントがありますよね。
今回はこの中から「Crimson Text」というフォントを使ってみましょう。

右上の「Search」と書いている検索ウィンドウに「Crimson」と打ってみましょう。
すると左側に検索キーワードに該当するフォントの一覧が表示されますので、
フォント名の右横の、赤丸の中に「+」があるボタンをクリックしてみましょう。

ボタンをクリックするとウィンドウ下の真ん中あたりに黒い帯で「1 Family Select」と表示されたものが表示されますね。これでフォントが選択された状態になります。今度は黒い帯をクリックしてみましょう。

黒い帯をクリックすると、Webフォント使用のために必要なコードが表示されます。

上の「<link href=”https〜〜”>」の文字列を、index.htmlのmain.cssを読み込んでいる行の下に追加し、
下の「font-family: 〜〜;」の文字列は、main.cssの「body {}」セレクタの中に追記しましょう。

コード上で説明しましょう。

まずindex.htmlの<link rel=”stylesheet” href=”css/main.css”>の下の行を改行し、
ハイライトされている<link href=”https://fonts.googleapis.com/css?family=Crimson+Text” rel=”stylesheet”>を追加します。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/main.css">
<link href="https://fonts.googleapis.com/css?family=Crimson+Text" rel="stylesheet">
<title>Web Movie</title>
</head>
<body>
</body>
</html>

次にmain.cssへの追加です。先ほど記述したmain.cssのbody {}セレクタの中に、
ハイライトされている「font-family: ‘Crimson Text’, serif;」を追加しましょう。

main.css

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

html , body {
  height: 100%;
}

body {
  background: #000;
  font-family: 'Crimson Text', serif;
  /*Google Web Fontsで読み込んだ書体「Crimzon Text」を指定する。 */
}

これで<body></body>セクション全体にCrimson TextのWebフォントが適用されます。
部分的に適用したい場合は、適用したいセレクタの中に上記のコードを追加すればいいだけのことです。

簡単ですよね。

<header></header>のHTMLコーディング

<header></header>セクションの追加

では今度はメインコンテンツの内容をコーディングしていきましょう。
まずは<header></header>セクションを追加します。

<body></body>タグの開始タグの下を改行し、ハイライトされている<header></header>を追記しましょう。

なお、今回からセクション間の改行を増やしています。
これは各個人でコードが見やすい改行をしてもらえればと思います。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/main.css">
<link href="https://fonts.googleapis.com/css?family=Crimson+Text" rel="stylesheet">
<title>Web Movie</title>
</head>
<body>

<header>
</header>

</body>
</html>

<h1></h1>の追加

次に<header></header>セクションのすぐ内側に、<h1></h1>タグを追加してサイトタイトルを表示しましょう。

<header></header>タグの開始タグの下を改行し、ハイライトされている<h1></h1>を追記しましょう。

index.html

<!-- 〜上部省略〜 -->
<body>

<header>
  <h1><a href="#">Web Movie</a></h1>
</header>

</body>
<!-- 〜下部省略〜 -->

<nav></nav>の追加

次にサイトのグローバルナビゲーションを表示します。
グローバルナビゲーションは<nav></nav>セクションの内側に、
<ul></ul>タグと<li></li>タグを使ってリスト表示させます。

先ほど記述した<h1></h1>タグの終了タグの下を改行し、
ハイライトされている<nav></nav>を追記しましょう。

index.html

<!-- 〜上部省略〜 -->
<body>

<header>
  <h1><a href="#">Web Movie</a></h1>
  <nav>
    <ul>
      <li><a href="#">TOP</a></li>
      <li><a href="#">ABOUT</a></li>
      <li><a href="#">WORKS</a></li>
      <li><a href="#">TOPICS</a></li>
      <li><a href="#">CONTACT</a></li>
    </ul>
  </nav>
</header>

</body>
<!-- 〜下部省略〜 -->

<header></header>セクションのCSSコーディング

<header></header>と<footer></footer>への一括指定と<header></header>のみへの指定

では今回も<header></header>セクションのCSSコーディングから行いましょう。

先ほど記述した「body {〜}」の下を改行し、
ハイライトされている「header , footer {〜}」と「header {〜}」の記述を行いましょう。

main.css

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

body {
  background: #000;
  font-family: 'Crimson Text', serif;
}

header , footer {
  width: 100%;
  padding: 20px; /* <header></header>と<footer></footer>タグ内の余白を、上下左右20pxに指定。 */
  position: fixed; /* 要素の位置を絶対配置し、かつ固定表示にする。 */
  left: 0; /* 画面左端に配置。 */
  color: #fff;
  z-index: 2;
}

header {
  top: 0; /* 画面上端に配置。 */
  letter-spacing: .05em; /* 文字間を1文字の5%分広げる。 */
  text-align: left;
}

この中でまだ解説していない「z-index」を解説します。

z-indexで要素の重なり順を指定。

z-indexプロパティは、要素の重なり順を指定するものです。
Webサイトではコーディング上、先に記述した要素から重なり順が下になり、
後に記述するにつれ要素の重なり順が上になる、という性質を持っています。

今回デザインを制作した動画埋め込みでは、
後述する<div id=”video”></div>の動画の重なり順を最も下にし、
<header></header>セクションのロゴ、グローバルナビゲーションと、
<footer></footer>セクションの著作権表記を上に持ってこなければいけません。

それを実現するためには、記述順を以下のようにしなければいけません。

  1. <div id=”video”></div>
  2. <header></header>
  3. <footer></footer>

しかし表示の都合で記述を変えてしまうのは解決策とは言えず、
ページのコード記述の意味で考えるとこの順番は好ましくありません。
要素の重なり順をCSSで調整するのが取るべき方法です。

そんな時に活躍してくれるのが「z-index」プロパティです。
z-indexを使って要素の重なり順を意図的に変更することができます。

参考：重ねて表示する！CSSのz-indexの使い方 | TechAcademyマガジン

参考ページにあるように、数値が大きいほど手前に表示され、数値が小さいものほど奥に表示されます。

<h1></h1>タグ（ロゴ）への指定

では次にサイトロゴである<h1></h1>タグの指定を行います。

先ほど記述した「header {〜}」の下を改行し、
ハイライトされている「header h1 {〜}」「header h1 a {〜}」、「header h1 a:hover {〜}」の記述を行いましょう。

main.css

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

header {
  top: 0;
  letter-spacing: .05em;
  text-align: left;
}

header h1 {
  float: left; /* <h1></h1>を左寄せする。 */
  padding: 10px 0; /* <h1></h1>タグ内の余白を、上下10px、左右0pxに指定。 */
  font-weight: normal; /* 文字の太さを通常の太さに指定。 */
  font-size: 20px; /* 文字サイズを20pxに指定。 */
  line-height: 20px; /* 行間を20pxに指定。 */
}

header h1 a {
  color: #fff;
}

header h1 a:hover {
  text-decoration: none;
}

特に新しいプロパティはありませんね。
忘れてしまっていたら各プロパティの横にあるコメントを読んでみてください。

<nav></nav>セクション（グローバルナビゲーション）への指定

<header><header>セクションにはグローバルナビゲーションもありますね。

先ほど記述した「header h1 a:hover {〜}」の下を改行し、
「header nav {〜}」「header nav ul {〜}」、
「header nav li {〜}」「header nav li a {〜}」、
「header nav li a:hover {〜}」の記述を行いましょう。

main.css

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

header h1 a:hover {
  text-decoration: none;
}

header nav {
  float: right; /* <nav></nav>を右寄せする。 */
}

header nav ul {
  font-size: 0; /* 文字サイズを一旦0にすることで内側の要素の間を詰める。 */
}

header nav li {
  display: inline-block; /* インライン要素で、かつブロック要素になるように指定。 */
  font-size: 14px; /* 文字サイズを14pxに指定。 */
  line-height: 30px; /* 行間を30pxに指定。 */
}

header nav li a {
  display: block; /* paddingを反映するため、インライン要素の<a></a>タグをブロック要素に指定。 */
  padding: 5px 15px; /* <a></a>タグ内の余白を、上下5px、左右15pxに指定。 */
  color: #fff;
}

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

この中で解説していないのは、
「header nav ul {〜}」の「font-size: 0;」と、
「header nav li {〜}」の「display: inline-block;」です。

display: inline-block;

「display: inline-block;」は「ブロック要素の特性を持ちつつインライン要素としても扱える」もので、
「display: inline;」は横幅や高さ、余白の指定は無効になるのに対して、
「display: inline-block;」では横幅や高さ、余白の指定が行えます。

簡単に言うと「余白サイズなどの指定ができるインライン要素」というところでしょうか。

参考：display－スタイルシートリファレンス

display: inline-block;とfont-size: 0;の合わせ技

第10回の<footer></footer>の<ul></ul>と<li></li>の時に、「display: inline;を指定すると、インライン要素とインライン要素の間に微妙なスペースが発生する」と解説しましたが、今回<li><li>に指定した「display: inline-block;」も同じように微妙なスペースが発生します。

この微妙なスペースを埋めるために使うプロパティが、
<li></li>の親要素の<ul></ul>に指定する「font-size: 0;」です。
この指定で<li></li>間に発生するスペースを埋めることができます。

<footer></footer>のHTMLコーディング

<footer></footer>セクションの追加

<footer></footer>セクションを追加します。
先ほど記述した<header></header>セクションの下を改行し、
ハイライトされている<footer></footer>を追記しましょう。

index.html

<!-- 〜上部省略〜 -->
</header>

<footer>
</footer>

</body>
<!-- 〜下部省略〜 -->

<p class=”copyright”></p>の記述

今回<footer></footer>セクションに表示するのは著作権表記だけです。
著作権表記は<p class=”copyright”></p>を使って表示するんでしたよね。

先ほど記述した<footer></footer>セクションの開始タグの下を改行し、
ハイライトされている<p class=”copyright”></p>を追記しましょう。

index.html

<!-- 〜上部省略〜 -->
</header>

<footer>
  <p class="copyright">&copy; Web Movie.</p>
</footer>

</body>
<!-- 〜下部省略〜 -->

<footer></footer>のCSSコーディング

<footer></footer>セクションへの指定

次に<footer></footer>セクションのCSSコーディングを行いましょう。
先ほど記述した「header nav li a:hover {〜}」の下を改行し、
ハイライトされている「footer {〜}」の記述を行いましょう。

main.css

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

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

footer {
  bottom: 0; /* 画面下端に配置する。 */
  text-align: right; /* テキストを右寄せにする。 */
}

こちらにも特に新しいプロパティはありません。

<p class=”copyright”></p>（著作権表記）への指定

main.css

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

footer {
  bottom: 0; /* 画面下端に配置する。 */
  text-align: right; /* テキストを右寄せにする。 */
}

footer .copyright {
  font-size: 11px; /* 文字サイズを11pxに指定。 */
  line-height: 16px; /* 行間を16pxに指定。 */
}

<footer></footer>セクションのCSSコーディングは以上です。

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

<div id=”video”></div>セクションの追加

ではいよいよ動画のセクションを追加しましょう。
まずは<div id=”video”></div>セクションの用意です。

<header></header>セクションの終了タグの下を改行し、
ハイライトされている<div id=”video”></div>を追加しましょう。

index.html

<!-- 〜上部省略〜 -->
</header>

<div id="video">
<!-- / #video --></div>

<!-- 〜下部省略〜 -->

<div class=”message”></div>セクションの追加

次に、動画の上にオーバーレイで表示されるコピーを表示するブロック、
<div class=”message”></div>を追加しましょう。

<div id=”video”></div>の開始タグの下を改行し、
ハイライトされている<div class=”message”>〜</div>を記述しましょう。

index.html

<!-- 〜上部省略〜 -->

<div id="video">
  <div class="message">
    <p><span>Ouch.</span></p>
    <p><span>Your hair is scratchy.</span></p>
    <p><span>Keep away from me.</span></p>
  <!-- /.message --></div>
<!-- / #video --></div>

<!-- 〜下部省略〜 -->

<video></video>の追加

やっとここまできました・・・。

動画を表示するためのHTMLタグ、<video></video>タグを追加します。
先ほど記述した<div class=”message”></div>の上を改行し、ハイライトされている<video>〜</video>を追記しましょう。

index.html

<!-- 〜上部省略〜 -->

<div id="video">
  <video src="./video/video.mp4" autobuffer loop autoplay muted preload="auto" playsinline="true" poster="./img/poster.jpg" ></video>
  <div class="message">
    <p><span>Ouch.</span></p>
    <p><span>Your hair is scratchy.</span></p>
    <p><span>Keep away from me.</span></p>
  <!-- /.message --></div>
<!-- / #video --></div>

<!-- 〜下部省略〜 -->
<video></video>タグの属性

<video></video>タグは属性と呼ばれる動画の設定をタグに直接指定することで、
簡単に様々な指定を行うことができます。今回使用しているものを表にすると以下のような役割ですね。

autoplay 自動再生
loop 繰り返し再生
muted 映像に含まれる音声を再生しない
preload=”auto” 動画をあらかじめ読み込む
poster=”●●” 動画が再生できない場合に表示される画像

つまり「ページを開いたらあらかじめ動画を読み込み、自動かつループ再生してください。
動画が再生できない場合はposter.jpgを表示させてください。」という指定になります。

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

<div id=”video”></div>セクションへの指定

では<div id=”video”></div>セクションのCSSコーディングを行います。

先ほど記述した「footer .copyright {〜}」の下を改行し、
ハイライトされている「#video {〜}」そして「#video:after {〜}」の記述を行いましょう。

main.css

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

footer .copyright {
  font-size: 11px; /* 文字サイズを11pxに指定。 */
  line-height: 16px; /* 行間を16pxに指定。 */
}

#video {
  width: 100%;
  height: 100%;
  padding: 50px;
  position: absolute;/* 要素の位置を絶対配置にする。 */
  left: 0; /* 画面左端に配置。 */
  top: 0; /* 画面上端に配置。 */
  z-index: 1; /* z-indexプロパティで要素の重なり順を1番目に指定。 */
}

#video:after {
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;/* 要素の位置を絶対配置にする。*/
  left: 0; /* 画面左端に配置。*/
  top: 0; /* 画面上端に配置。*/
  background-image: url(../img/after.png) , url(../img/after.png); /* 背景画像を2枚読み込む。 */
  background-position: 0 0 , 1px 1px; /* 背景画像の描画開始位置を、1枚目は左上、2枚目は左上から1px分ずらす。 */
}

先ほど「header , footer {〜}」への指定でz-indexが出てきましたよね。
その時指定したz-indexの値は「2」でしたが、今回はz-indexに「1」を指定しています。

z-index: 1;の指定で<header></header>・<footer></footer>より奥に表示

z-indexは「値が大きいほど手前に、数値が小さいほど奥に表示されるんでしたよね。
つまりこの指定で<div id=”video”></video>を奥に表示し、
<header></header>と<footer></footer>を手前に表示する指定を行っています。

擬似要素「:before」「:after」

「#video {〜}」の次に「#video:after {〜}」というものが出てきていますよね。
これは「擬似要素」と呼ばれるもので、要素の前後にテキストや画像を追加することのできるものです。

使い始めるととても便利なもので僕はかなり多用しているんですが、
コーディング初心者の間は使い方がよく分からないために敬遠されることも少なくありません。

今回Web動画をサイトに埋め込むに当たり、
擬似要素を使って動画にオーバーレイする形でストライプ画像を表示しています。

何故こんなことをするのでしょうか？？

動画はファイルサイズが大きくなりがちで、
Web動画になるとある程度ファイルサイズを小さくしないと、
Webページの表示が遅くなってしまいます。

ファイルサイズを小さくするということは画質を落とすということなので、
Webで再生する動画はある程度画質を落としたものを再生しなければいけません。

ストライプ画像をオーバーレイさせるのは、
画質を落としたことによる画の荒さをごまかすためです。

「background-image」「background-position」の複数指定

「#video:after {〜}」の最後の指定で、background-imageとbackground-positionをカンマ（,）で区切って複数記述していますね。

みなさんが学んでいるCSS3は背景画像を複数指定することができます。
背景画像の座標も同じようにカンマで区切ることでそれぞれの座標を指定できます。

<div class=”message”></div>セクションへの指定

次は<div class=”message”></div>セクションのCSSコーディングを行います。

先ほど記述した「#video:after {〜}」の下を改行し、
ハイライトされている「#video .message {〜}」「#video .message p {〜}」「#video .message p span {〜}」の記述を行いましょう。

main.css

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

#video:after {
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url(../img/after.png) , url(../img/after.png);
  background-position: 0 0 , 1px 1px;
}

#video .message {
  height: auto;
  position: absolute; /* 要素の位置を絶対配置にする。 */
  top: 50%; /* 画面上端から画面サイズの50%の位置に配置。 */
  transform: translateY(-50%); /* 要素の高さの半分のサイズをマイナス方向（上）へ移動。 */
  text-align: left;
  z-index: 2;
}

#video .message p {
  font-size: 60px; /* 文字サイズを60pxに指定。*/
  line-height: 60px; /* 行間を60pxに指定。*/
  letter-spacing: .05em; /* 文字間を1文字の5%分広げる。*/
  color: #fff;
}

#video .message p span {
  margin: 2px; /* <span></span>タグの外の余白を、上下左右2pxに指定。 */
  display: inline-block;　/* インライン要素で、かつブロック要素になるように指定。 */
  padding: 0 .05em 0 .1em; /* <span></span>タグ内の余白を、上下0px、左0.1em（1文字の10%分）右0.05em（1文字の5%分）に指定。 */
  background: rgba(0,0,0,.8); /* 背景色を、RGBA（レッド・グリーン・ブルー・アルファ）で#000000の80%に指定。 */
}

ここでもまだ出てきていないプロパティが出てきましたね。

transform: translateY(-50%);

transformプロパティは、要素の拡大や縮小、移動や回転などを指定出来るプロパティです。
基本的にはこのプロパティとjQueryを使ってスクロールアニメーションを行います。

値の「translateY(◯◯)」は縦方向への移動の意味を持っています。
この%（パーセンテージ）は要素の高さを100％とするので、今回の場合は、
「縦のマイナス方向に要素の半分のサイズの分だけ移動する」という指定になります。

この記述が終わったら、index.htmlとmain.cssを上書き保存してください。

jQueryプラグインの読み込みと設置・設定

今回の全画面動画の制御にはjQueryプラグインを使います。
まずは完成イメージサイトの再確認。

https://webcre8tor.com/data/lesson/video/

動画が再生されています。

プラグインのダウンロードとフォルダに移動

今回はCoverVidという全画面動画とリサイズに対応したプラグインを導入します。
まず、以下のURLからプラグインをダウンロードしてください。

CoverVid 配布サイト：https://github.com/stefanerickson/covervid

まずページを開き「Clone or Download」となっているボタンをクリックします。

次にポップアップしたブロックの「Download ZIP」をクリックしてダウンロードを始めます。

ダウンロードが終わったら、ファイルを解凍して中から以下のファイルを取り出し、
自分が開発しているhtmlフォルダの各場所に移動します。

  1. covervid.js → jsフォルダに移動

フォルダ構成は以下のようになっているはずです。

index.htmlに読み込みと実行の指定を記述

移動したら、以下の記述を行います。

jQuery本体とcovervid.jsの読み込み

まずはjQuery本体と、今回使用するCoverVidの読み込みを行いましょう。

Google Web Fontsの読み込みの記述を行った、<link href=”https://fonts.googleapis.com/css?family=Crimson+Text” rel=”stylesheet”>の下を1行改行し、ハイライトされている<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”></script>と、<script src=”./js/covervid.js”></script>を記述してください。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/main.css">
<link href="https://fonts.googleapis.com/css?family=Crimson+Text" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="./js/covervid.js"></script>
<title>Web Movie</title>
</head>
<body>
<!-- 〜下部省略〜 -->
CoverVidの実行

jQueryプラグインは読み込みだけだと実行されません。
全画面動画実装のために今回も実行の指定を行いましょう。

<body></body>の閉じタグの上を改行し、
ハイライトされている<script>〜</script>を記述しましょう。

index.html

<!-- 〜上部省略〜 -->
</footer>

<script>
  $('#video video').coverVid(768, 432);
</script>

</body>
</html>

以上です。 記述が終わったら、index.htmlをブラウザで開いて、
動画が表示されているかどうか確認してみてください。

課題の提出

今回のWeb動画の埋め込みも課題として提出を行います。
「html_video」フォルダのデータを提出しましょう。

提出用に「html_video」フォルダをまるごとzip形式で圧縮してください。

「html_video」フォルダをzip形式で圧縮

まず、「html_video」フォルダ圧縮の手順は以下。

  1. 「html_video」フォルダを右クリックして、「送る」→「圧縮（zip形式フォルダー）」を選択してzipファイルを作る。
  2. ファイル名を自分の学籍番号に変更する。

以上です。

zip圧縮したファイルをフォームから送信

なお、こちらのフォームに提出できるのは「zip形式で圧縮したファイルのみ」です。zip形式ではないファイルだと送信の際にエラーが出て送信ができませんので、必ず「html」フォルダをまるごと圧縮してzip形式で提出してください。

    学籍番号（必須）
    氏名（必須）
    フリガナ (必須)
    メールアドレス（必須）
    質問など
    課題ファイル

    課題の提出ができたら今回の講義は終了です。

    RELATED POSTS関連記事

    WEBCRE8TOR.COM

    SEARCH

    PAGES

    CATEGORY

    ARCHIVE

    LINK

    CLOSE