-本日のアジェンダ-
1限目
実技 WEBページ制作実習③
SNSの埋め込みについて
・グーグルマップ
マップで検索→共有→埋め込みからコピペ
※iframeインラインレベルのため横並びになる
・YOUTUBE
検索→動画クリック→共有→埋め込みからコピペ
※iframeインラインレベルのため横並びになる
※サーバーに上げないとサムネ表示されない
・フェイスブック
フェイスブック 埋め込みで検索→出てきたサイトに必要事項入れてコードを取得→２か所コピペ
https://developers.facebook.com/docs/plugins/page-plugin?locale=ja_JP
※div ブロックレベルのため縦並びになる
・X（ツイッター）
ツイッター埋め込みで検索→２行目のサイトに結果的に飛ぶ→
https://help.x.com/ja/using-x/embed-x-feed
https://publish.twitter.com/#
①タイムライン埋め込み ※有料のみ画像で見れる
アカウントのURLを上記２個目のサイトに入れる
②投稿を埋め込み
埋め込みたい投稿→三点リーダーからポストを埋め込む→コピペ
・インスタグラム ※アカウント所有者もしくは所有者の認証を得ないと埋め込めない
埋め込みたい投稿→三点リーダーから埋め込みコードをコピー
※サーバーに上げないと画像表示されない
・FFFTPを使用してサーバーにアップ→クロームでフォルダを入力すると勝手にindex.htmlを読んでくれて出てくる
逆に言うとindex.html以外の名前の時はそこまで書いたほうがいい
2限目
実技 WEBページ制作実習③
動画の埋め込みについて
・動画の埋め込み
videoとiframeタグ
WEBサイトに動画を埋め込む方法は２つあります。
①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>
※<video>タグはこれだけでは動画ファイルが読み込まれるだけで再生はされません。
動画タグ例：
・controls
コントロールパネルを表示させるための属性です。
・autoplay
自動再生させるための属性です。
3限目
実技 WEBページ制作実習③
WEBページ制作
4限目
実技 WEBページ制作実習③
課題制作
5限目
実技 WEBページ制作実習③
課題制作
本日のポイント
コーディングを進めましょう！
本日の課題
今日できたところまでのサイトをサーバにアップしましょう
本日学んだこと
埋め込み実践
display flexの使い方 復習
heightはLP作成時はあまり設定せず画像サイズを合わせたほうがいい
感想
本日は、埋め込みの実践を行いました。実際にサーバーにも上げてみたことで、YOUTUBEやインスタグラムなどローカルでは見れなかったものが見えるようになりました。
SNSの種類によって埋め込み方が違うので覚えていきたいです。
また、LPサイトをもとにまだHTML/CSS組んでいますが難しいです。なかなかdisplay の使い方が頭に入ってこず苦戦しています。