プログラミング勉強日記

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>