HTMLスキル - 第7章 Lesson7

ページの中に別のページを表示させる<iframe>の書き方

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

ページの中に窓のようにスクロールできる別ページを表示させる、<iframe>タグの書き方について、初心者向けに解説しています。



この動画で学べること

・<iframe>タグを使って、別のページを埋め込む方法



<iframe>タグを使って、別のページを埋め込む方法

今回は、<iframe>タグを使って、Wikipediaのページを埋め込んでみましょう。
<iframe>タグを書き、width属性とheight属性を追加します。それぞれの値を960、615と指定しておきましょう。
次にsrc属性を追加していきます。
Wikipediaで「カプチーノ」と検索したページを表示し、そのURLをコピーします。
そして、追加したsrc属性の値にペーストしましょう。



 <iframe width="560" height="315" src="<a href=" https:="" www.youtube.com="" embed="" 2ao5b6uqi40"=""><a href="https://www.youtube.com/embed/2Ao5b6uqI40">https://www.youtube.com/embed/2Ao5b6uqI40</a>" frameborder="0" allowfullscreen></iframe>



<iframe>タグに対応していないブラウザもあるので、フレームが表示されなかったユーザーのために埋め込みたいページに対応する文章を書いておくと、とても親切なサイトになります。
ここまでできたら 、保存してブラウザで見てみます。
Wikipediaのページが埋め込まれました。
指定した横幅になっていて、スクロールすることもできます。