タグ: HTML

学科 レイアウトデザイン基礎④

-本日のアジェンダ-

1限目
学科 レイアウトデザイン基礎④
ブラウザについて

2限目
学科 レイアウトデザイン基礎④
各ブラウザ検証について

3限目
学科 レイアウトデザイン基礎④
課題制作

4限目
学科 レイアウトデザイン基礎④
課題制作

5限目
学科 レイアウトデザイン基礎④
課題制作

本日のテーマ

ブラウザ検証についてです

ブラウザとは？

ブラウザとは、インターネットを介してホームページ（Webサイト）をパソコンやスマートフォンで閲覧するためのソフトウェアのことです。 Webブラウザとも呼ばれ、Chromeやsafari、Internet Explorerなどが有名です。

【資料】

Dropboxにある資料をダウンロードしましょう。
作品制作のポイントをまとめた資料です。

［保存場所］
Dropbox / DEAUアカデミー WEBデザイナー養成科 (短時間) / 資料 /
【STEP4】Webページの制作/「各ブラウザ検証.pdf」

【動画】「各ブラウザ検証」

ワンポイントアドバイス

サイトが一通り形になったら特に使用する可能性の高いブラウザは必ず確認しましょう。

参考サイト

本日の課題

コーディングを進めましょう。
今日できたところまでのサイトをサーバに仮アップしてみましょう。

学科 WEB動画基礎

-本日のアジェンダ-

1限目
学科　WEB動画基礎
WEB動画とは？

2限目
学科　WEB動画基礎
Webサイトでの動画の使い方について

3限目
学科　WEB動画基礎
課題作成

4限目
学科　WEB動画基礎
課題作成

5限目
学科　WEB動画基礎
課題作成

本日のテーマ

Webサイトでの動画の活用法についてです。

WEB動画について

Web動画とは、WebサイトやYouTubeチャンネルなど、オンラインでの視聴を想定した動画全般を指します。 「Webムービー」と呼ばれることもあり、目的はブランディングや商品・サービスのプロモーション、広告配信など多岐にわたります。

参考資料

ドロップボックス
資料＞【STEP4】Webページの制作＞「WEB動画基礎20220818.pdf」をダウンロードしましょう。
ポイントをまとめた資料です。

【動画】「WEB動画運用基礎」

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>

参考サイト

その他、埋め込みについては下記を参考に！

SNSの埋め込み方

本日の課題

課題提出はありません。
デザインラフを元にコーディングを進めていきましょう。