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

WEBCRE8TOR.COM

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

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

講義終了までに完成を目指しますのでJavaScriptのコードを1から記述することはしません。
全画面表示と自動リサイズの対応だけならjQueryプラグインで簡単に実装することができます。

https://webcre8tor.com/data/lesson/video/
※ID・PASSは講義にて

この記事の目次

構成ファイルのダウンロード・解凍・確認

構成ファイルのダウンロード・解凍

今回は時短のためHTMLファイルやCSSファイルなどの構成ファイルすでに準備しています。
ひとまず構成ファイル「WebDesignExercise03.zip(zip圧縮データ)」をダウンロードしておきましょう。
※IDとPASSは講義で伝えます。

https://webcre8tor.com/data/WebDesignExercise03.zip

ダウンロードが終わったら構成ファイルを解凍しましょう。

構成ファイルの確認

ダウンロードした圧縮ファイル「WebDesignExercise03.zip」を解凍すると「html_video」というフォルダがあり、そのファイル・フォルダ構成は以下の画像のようになっているはずです。

フォルダ・ファイルが準備できたらテキストエディタを起動してVisual Studio Codeの左のエクスプローラーメニューの「html_video」フォルダから「index.html」「main.css」を開いて早速始めていきましょう。

Visual Studio Codeの起動と日本語化。

なお今回の講義内容も提出課題です。管理しやすくデータが消えないような場所に移動してください。

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

今回、テンプレート部分は既に記述を行なっています

テンプレート部分のHTMLの確認

まずはindex.htmlを開き、テンプレート部分の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の確認

次にcss/main.cssを開き、テンプレート部分の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 fonts」と書いている検索ウィンドウに「Crimson Text」と打ってみましょう。
すると左側に検索キーワードに該当するフォントの一覧が表示されますので、「Crimson Text」のブロックをクリックしてみましょう。

クリックするとフォントの詳細ページが開きます。
少し下のフォントウェイトの一覧部分までスクロールして、
Select Regular 400」のテキストリンクをクリックしましょう。

クリックすると右側に「Selected family」というサイドメニューが開きます。
そのサイドメニューを「Use on the web」のブロックまでスクロールすると、「index.html」と「main.css」にそれぞれコピペするコードが表示されます。

以下に表示されている「<link rel=”preconnect” 〜」の文字列は、index.htmlのmain.cssを読み込んでいる行の下に追加します。

その下の「font-family: 〜〜;」の文字列は、main.cssの「body {}」セレクタの中に追記して使用します。

一旦Google Chromeのタブを閉じずに置いておきましょう。
次の項目で使用します。

Google Web Fontsの導入ためのHTML・CSSコーディング

さっそくindex.htmlとmain.cssへの記述をしながらコード上で説明しましょう。
まずindex.htmlの<link rel=”stylesheet” href=”css/main.css”>の下の行を改行し、ハイライトされている6〜8行目のコードを追記します。

index.html

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

次にmain.cssへの追加です。先ほど記述したmain.cssのbody {}セレクタの中に、ハイライトされている9行目のコードを追記しましょう。

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・CSSコーディング

<header></header>セクション・<h1></h1>タグ・<nav></nav>セクションのHTMLコーディング

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

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

<body></body>タグの開始タグと終了タグの間を改行し、ハイライトされている4〜15行目のコードを追記しましょう。

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>セクション・<h1></h1>タグ・<nav></nav>セクションのCSSコーディング

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

では<header></header>セクションのCSSコーディングを行いましょう。
先ほど記述した「body {〜}」の下を改行し、ハイライトされている8〜15行目・17〜21行目のコードの追記を行いましょう。

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 {〜}」の下を改行し、ハイライトされている9〜15行目・17〜19行目・21〜23行目のコードの記述を行いましょう。

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 {〜}」の下を改行し、ハイライトされている7〜9行目・11〜13行目・15〜19行目・21〜25行目・27〜30行目のコードの記述を行いましょう。

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・CSSコーディング

<footer></footer>セクション・<p class=”copyright”></p>タグのHTMLコーディング

<footer></footer>セクション、そして著作権表記である<p class=”copyright”></p>を追記しましょう。

先ほど記述した<header></header>セクションの終了タグの下を改行し、ハイライトされている4〜6行目のコードを追記しましょう。

index.html

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

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

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

<footer></footer>セクション・<p class=”copyright”></p>タグのCSSコーディング

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

main.css

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

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

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

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

こちらにも特に新しいプロパティはありません。
<footer></footer>セクションのCSSコーディングは以上です。

<div id=”video”></div>セクションのHTML・CSSコーディング

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

ではいよいよ動画のセクションを追加します。まずは<div id=”video”></div>セクションの用意です。
<header></header>セクションの終了タグの下を改行し、ハイライトされている4・5行目のコードを追記しましょう。

index.html

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

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

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

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

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

<div id=”video”></div>セクションの開始タグの下を改行し、ハイライトされている4〜8行目のコードを追記しましょう。

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>の上を改行し、ハイライトされている4行目のコードを追記しましょう。

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>セクションのCSSコーディング

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

先ほど記述した「footer .copyright {〜}」の下を改行し、ハイライトされている8〜16行目・18〜28行目のコードの記述を行いましょう。

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>セクションのCSSコーディング

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

先ほど記述した「#video:after {〜}」の下を改行し、ハイライトされている15〜22行目・24〜29行目・31〜36行目のコードの記述を行いましょう。

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

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

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

ダウンロードが終わったら、ファイルを解凍して中から「covervid.js」というJSファイルを見つけて取り出し、開発中の「html_video」フォルダの中の「js」フォルダに移動します。

  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行改行し、ハイライトされている7・8行目のコードを記述してください。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Crimson+Text&display=swap" 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>の閉じタグの上を改行し、ハイライトされている4〜6行目のコードを追記しましょう。

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_video」フォルダをまるごと圧縮してzip形式で提出してください。

    学籍番号(必須)

    氏名(必須)

    フリガナ (必須)

    メールアドレス(必須)

    質問など

    課題ファイル

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

    WEBCRE8TOR.COM

    SEARCH

    PAGES

    CATEGORY

    ARCHIVE

    LINK

    CLOSE