シュウ

今回は【HTML】iframeの使い方 HTMLにコンテンツを埋め込もう!
の解説になります！

こんな方に読んでほしい

• HTMLを学び始めた方へ
• HTMLについて学びたい方へ
• 今回はiframeの使い方、埋め込み方についての解説になります

Web上でよく、「Googleマップ」、「SNS」の埋め込みを見かけることはありませんか、
それらは全て、「iframe」で埋め込み、読み込みを行っております。
iframeとは、（インラインフレーム） の略で、「アイフレーム」といった呼び方をします。

iframeとは

iframeとは、HTML文書を埋め込むことができます。埋め込むHTML文書はsrc属性で指定します。
埋め込む際に、src属性にパス(URL)を指定します、このパスは、「相対パス」と「絶対パス」どちらでも
問題ありません。
書き方は以下のようになります

<!-- iframeの使用例 -->
<iframe 属性="属性値"> 〜 </iframe>

HTMLファイルの埋め込みについて

今回は、src属性に読み込みたいページのURLを指定し、widthでフレームの横幅、
heightフレームの高さを指定していきます。

src属性 「https://shu-naka-blog.com/」
width、height 「400 400」にします。
実際に埋め込んだ際には、リンクをクリックしてページの移動も可能になります。

<iframe src="https://shu-naka-blog.com/" width="400" height="400"></iframe>

sandbox、表示制限について

sandboxとは、インラインフレーム内の表示制限を加えます。
下記のコードには、sandboxを指定しております。

sandboxを指定することにより、iframe内のコンテンツが制限され、安全性が向上します。
以下のような制限が掛かります。
iframe内のドキュメントのスクリプト(JavaScript)の実行を無効化にする。
iframe内のドキュメントのフォームを無効化にする。
ポップアップを禁止、（target=”_blank”等） など 一部の制限が掛かってしまいます。

<iframe src="https://shu-naka-blog.com/" sandbox></iframe>

これらの一部の制限を解除するキーワードがあります、
複数の属性値を指定する際には、半角スペースで区切って指定します。

下記のコードのように指定をする際には、半角スペースで区切って指定します。
下記のコードでは、「フォームの送信」、「スクリプトの実行」の許可し制限を解除しております。

<iframe src="url" sandbox="allow-forms allow-scripts"></iframe>

iframeの幅をコンテンツ幅に合わせる

HTMLに記述する際のwidth属性は、「px」、「数値のみ」の指定になります。
ブラウザーいっぱいに表示させたい場合はCSSに記述する必要があります。

HTMLに記述する際に、width属性は指定せず、CSSでiframeに対して100%を指定しましょう。

<iframe src="https://shu-naka-blog.com/" height="400"></iframe>

iframe {
	width: 100%;
}

関連記事

まとめ

今回はこれで以上です。
次回は「Googleマップなどの埋め込みの仕方」について解説します。

最新記事

• 

  【HTML】download属性について、ファイルのダウンロードを学ぼう!

  2021.07.27

• 

  【HTML】ruby要素の使い方、テキストにルビ(ふりがな)を振ろう!

  2021.07.09

• 

  【HTML】kbd要素の使い方、キーボードのキーを表す要素!

  2021.07.06

• 

  【HTML】hr要素の使い方、段落の区切りを示す要素!

  2021.07.02

関連記事

< 前の記事

【HTML】絶対パス、相対パスの使い方、ファイルの位置(階層)を学ぼう!

次の記事 >

【HTML】GoogleMapを埋め込む方法!!縮尺調整についての解説