SHU BLOG

BLOG NEWS ブログ

TITLE

【HTML】iframeの使い方 HTMLにコンテンツを埋め込もう!

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

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

こんな方に読んでほしい

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

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

iframeとは

iframeとは

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

<!-- iframeの使用例 -->
<iframe 属性="属性値"> 〜 </iframe>
指定できる属性
  • src属性
    表示するページのURLを指定し表示させます。
  • name属性
    インラインフレームの名前を指定します。
  • width属性
    フレームの横幅を指定します。
  • height属性
    フレームの高さを指定します。
  • sandbox属性
    インラインフレーム内の表示制限を加えます。
    複数の属性値を指定する際には、半角スペースで区切って指定します。詳しい解説は最後にします。

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

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

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

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

<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>

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

解除するキーワード
  • allow-scripts
    iframe内のスクリプトの実行を許可します。
    ※ただし、ポップアップウィンドウは使えません。
  • allow-forms
    iframe内のフォームの送信を許可します。
  • allow-popups
    iframe内のtarget=”_blank”等のようなポップアップウィンドウの実行を許可します。
  • allow-modals
    iframe内のページにモーダルウィンドウを開くことを許可します。
  • allow-same-origin
    iframe内のページが呼び出し元と同じドメインとみなします。
  • allow-top-navigation
    iframe内のページから読み込み元のページを操作することを許可します。

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

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

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

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

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

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

<iframe src="https://shu-naka-blog.com/" height="400"></iframe>
iframe {
	width: 100%;
}

関連記事

【STEP01】GoogleMapを埋め込む方法!!縮尺調整についての解説
GoogleMapの埋め込み方を画像付きで解説しております。

まとめ

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

POINT
  • iframeとは、HTML文書を埋め込むことができます。
  • sandboxとは、インラインフレーム内の表示制限を加えます。
  • 制限を解除するキーワードを複数指定する際には、半角スペースで区切って指定しましょう。
  • iframeの幅をコンテンツ幅に合わせる際は、CSSでiframeに対して100%を指定しましょう。
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

最新記事

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top