#プログラミング勉強日記
2021年2月2日
iframeタグの使い方をちゃんと理解していなかったので簡単にまとめる。
#iframeタグとは
iframe(読み方：「アイフレーム/インラインフレーム」)タグはInline Frameの略で、HTMLの中に別のHTMLを埋め込むために利用する。
iframeタグは<body>~<body>内で使用する。src属性でフレーム内に表示する内容を指定することができる。name属性でフレームに名前を付けることができ、そのインラインフレームをリンクの表示先としてしてできる。
#iframeの使い方
##src属性にページを埋め込むページを指定
基本的な使い方はとても簡単で、src属性に埋め込むページのURLを指定する。
<iframe src="埋め込みたいページのURL"></iframe>
###フレームの幅と高さを指定する
widthとheightを使ってフレームの幅と高さを指定できる。デフォルトは300px(幅)×150px(高さ)になっている。(幅と高さはCSSでも指定できる)
<iframe
src="埋め込むHTMLのURL"
width="フレームの幅(単位なし)"
height="フレームの高さ(単位なし)"
></iframe>
サンプルプログラム
<p>iframe↓</p>
<iframe src="https://mzmz02.github.io/travel/" width="500" height="500"></iframe>
実行結果
##srcdocで直接HTMLを書き込む
srcdoc属性に埋め込むHTMLを直接書き込むこともできる。ただ、"と&を使う場合はエスケープ文字を使用する。"は"を、&は&に置き換える。
<iframe
srcdoc="埋め込みたいHTMLコード"
src="srcdocが使えなかった場合に表示するURL"
></iframe>
##YouTubeの動画を埋め込む
よくサイトで見かけるようにYouTubeを埋め込むこともできる。
1, 埋め込みたい動画を開いて、共有をクリック
2, 埋め込むをクリック
3, でてきたコードをコピーする
YouTubeの埋め込み
<p>iframeを使ってYouTubeを埋め込む</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/gdZLi9oWNZg" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
実行結果
#参考文献
IFRAME …… インラインフレームを作る