カテゴリー: 実技 WEBページ制作実習

実技 WEBページ制作実習③

-本日のアジェンダ-

1限目
実技 WEBページ制作実習③
SNSの埋め込みについて

2限目
実技 WEBページ制作実習③
動画の埋め込みについて

3限目
実技 WEBページ制作実習③
WEBページ制作

4限目
実技 WEBページ制作実習③
課題制作

5限目
実技 WEBページ制作実習③
課題制作

【講師用カリキュラム情報】
※このブロックは公開時は非表示になります。削除しないでください。
※講師用の情報（注記）を追記して頂いても大丈夫です。
ストーリー：とにかく作る
内容1：WEBページ作成⑦
内容2：WEBページ作成⑧
内容3：
課題：出来たものをUP

（注記）
・SNS・動画の埋め込み方法を説明してください。
・生徒が作成したデザインカンプのWebページ制作をすすめてもらってください。
・生徒各人の状況を確認しながら制作のサポートを実施してください。
・クラス全体を見て理解不足の項目がある場合は、全体講義で補足説明を実施してください。

本日のポイント

コーディングを進めましょう！

SNSの埋め込み方について

埋め込み例
https://samplesdl.me/training_html-css/sns.html

動画の埋め込みタグについて

videoとiframeタグ

WEBサイトに動画を埋め込む方法は２つあります。
①iframeタグを使用する（youtubeなどの動画サイトから読み込む）
②videoタグを使用する（動画ファイルをアップロードして読み込む）

①iframeタグを使用する（YOUTUBEなどの動画サイトから読み込む）

記述例
<iframe width="410" height="200" src="https://www.youtube.com/embed/9No-FiEInLA" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>

②VIDEOタグを使用する（動画ファイルをアップロードして読み込む）

記述例
<video src="sample.mp4"></video>

参考サイト

本日の課題

今日できたところまでのサイトをサーバにアップしましょう

実技 WEBページ制作実習②

-本日のアジェンダ-

1限目
実技 WEBページ制作実習②
レスポンシブ対応について

2限目
実技 WEBページ制作実習②
レスポンシブ対応について

3限目
実技 WEBページ制作実習②
WEBページ制作

4限目
実技 WEBページ制作実習②
課題制作

5限目
実技 WEBページ制作実習②
課題制作

【講師用カリキュラム情報】
※このブロックは公開時は非表示になります。削除しないでください。
※講師用の情報（注記）を追記して頂いても大丈夫です。
ストーリー：とにかく作る
内容1：前回オンライン座学の実践・補足
内容2：WEBページ作成
内容3：
課題：出来たものをUP

（注記）
・復習としてRWD対応の概要を説明してください。
・生徒が作成したデザインカンプのWebページ制作をすすめてもらってください。
・生徒各人の状況を確認しながら制作のサポートを実施してください。
・クラス全体を見て理解不足の項目がある場合は、全体講義で補足説明を実施してください。

本日のテーマ

コーディングを進めましょう！

デザインカンプを忠実に再現するのがコーダーさんのお仕事です。

RWD 対応のサイトについて※再掲

  • 幅広デザインでの Web ページ作成
  • viewport 定義の指定
  • 横幅変動時のコンテンツ幅を設定
  • Media Querie でデザインを整える
  • 画面サイズに合わせた表示部品の導入

Webページ制作実践⑤

参考元を確認し、ブラウザの画面幅を変えて背景色が変わる事を確認しましょう。

body{
	background:#ccc;
}
@media only screen and (max-width: 1280px){
	body {
		background:#999;
	}
}
@media only screen and (max-width: 960px){
	body {
		background:#666;
	}
}

@media only screen and (max-width: 640px){
	body {
		background:#333;
	}
}

1280px（PC）、960px（タブレット）、640px（スマホ）と認識してみましょう。

PC表示の場合は横並びのレイアウト、スマホ表示の場合は縦積みのレイアウトとし、flexプロパティを使ってレイアウトを自在に切り替えてみましょう。

トレーニング-５

実際のWebページを作成しましょう。

トレーニング用ファイルのダウンロードおよび解凍を行ってトレーニングを実施してください。トレーニングの実施方法は、解凍したフォルダに格納されている「readme.pdf」を参照してください。

カリキュラム資料 ダウンロード用サイト
https://samplesdl-web.com/doc/

下記のファイルをダウンロードしましょう。
「training-5.zip」　

本日の課題

今日できたところまでのサイトをサーバにアップしましょうょう