投稿者: master

-本日のアジェンダ-

1限目
実技 JavaScript（jQuery）実習①
jQuery について

2限目
実技 JavaScript（jQuery）実習①
jQuery 使い方について

3限目
実技 JavaScript（jQuery）実習①
課題作成

4限目
実技 JavaScript（jQuery）実習①
課題作成

5限目
実技 JavaScript（jQuery）実習①
課題作成

本日のテーマ

jQueryの活用法についてです。

jQueryについて

jQueryを利用する時の基本事項を理解しましょう。

参考サイト

• jQuery入門 – サンプルを元にセレクタやイベントを理解しよう！ | パソナテック
• JavaScript初心者のためのjQuery入門
• とほほのjQuery入門 – とほほのWWW入門

jQueryの利用方法

jQueryを利用する時は実装するための参考サイトを検索し利用方法を理解しましょう。
検索は、「jQuery （実装したいキーワード）」で検索します。
良く使うキーワードの例は、以下の通りです。

• スライダー
• カルーセル
• ハンバーガーメニュー
• ライトボックス
• ドリルダウン
• フェード
• スクロール
• など

参考サイト

• 動くWebデザインアイディア帳
• jQuery サンプル集 / Web Design Leaves
• 7つのサンプルでjQueryを学ぼう！「jQueryが全く分からない人のため」の超初級者向け入門講座

第5回成績考査

10月14日5限目までに、紙用（pdf）ポートフォリオを提出してください。
ポートフォリオの内容は、自由です。
※是非、就職活動に活かせる作品を作成してみてください。

-本日のアジェンダ-

1限目
学科　WEB動画基礎
YouTube利用について

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

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

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

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

本日のテーマ

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

YouTubeにつて

YouTube （ ユーチューブ ） は、アメリカ合衆国・カリフォルニア州サンブルーノに本社を置く世界最大の動画共有サービス。Youは「あなた」、Tubeは「ブラウン管（テレビ）」という意味である。

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>

参考サイト

• 【HTML】動画を扱う。HTML5から導入されたvideoタグの基本～応用について解説。
• 動画形式とその特徴について
• 高品質なフリー動画素材 – Pixabay

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

SNSの埋め込み方

第5回成績考査

10月14日5限目までに、紙用（pdf）ポートフォリオを提出してください。
ポートフォリオの内容は、自由です。
※是非、就職活動に活かせる作品を作成してみてください。