【HTML】iframeタグの使い方
プログラミング勉強日記
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, 埋め込みたい動画を開いて、共有をクリック
<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>
参考文献
Author And Source
この問題について(【HTML】iframeタグの使い方), 我々は、より多くの情報をここで見つけました https://qiita.com/mzmz__02/items/c74a388c8ade33d7b4c0著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .