iframeタグとは?|インラインフレームを作成する

iframeタグとは?|インラインフレームを作成する
博士
今回は、インラインフレームを作成して、ページ内に別ページを埋め込む方法を解説するぞ。
 
 
博士
博士
リンゴが師と仰ぐ人物。
毎日HTML/CSSデザインの研究をしており、その知識を余すことなくリンゴに教えてくれる。

スポンサーリンク

<iframe>タグとは

 

<iframe>

対応ブラウザ Internet Explorer / Firefox / Google Chrome / Safari / Opera
分類 フロー・コンテンツ / フレージング・コンテンツ / エンベディッド・コンテンツ / インタラクティブ・コンテンツ / パルパブル・コンテンツ
利用場所 エンベディッド・コンテンツが期待される場所
内容 テキスト


 
 
<iframe>タグは、インラインフレームを作る際に使用します。
インラインフレームとは、文書内の特定の領域に、別のページを埋め込む形式のフレームです。
 
 
博士
YouTubeなどの動画をページに貼り付ける際にもよく使われるタグじゃ。
 
 

src属性

src属性の値には、フレーム内に埋め込むページのURLを指定します。
 
 

スポンサーリンク

srcdoc属性

インラインフレームに埋め込むコンテンツを、直接HTMLで記述することができます。
値には、以下のような形でHTMLコードを記述します。

 
 
srcdoc属性とsrc属性を同時に指定した場合は、srcdoc属性が優先されます。
srcdoc属性に対応していないブラウザでは、src属性で指定したページが読み込まれます。
 
 

エスケープについて

指定する内容の中にダブルクォーテーション( ” )やアンパサンド( & )が含まれる場合は、それらを以下のようにエスケープする必要があります。

  • ( ” )→ &quot;
  • ( & )→ &amp;

 

 
 

name属性

インラインフレームの名前を指定します。
この要素をa要素のtarget属性で参照すれば、リンクを使って複数のページを読み込ませることができます。
 
 

スポンサーリンク

width属性 / height属性

インラインフレームの横幅と高さをピクセルで指定します。
 
 

sandbox属性

sandbox属性を追加すると、インラインフレーム内のコンテンツにセキュリティ制限をかけることができます。

 
 
博士
こうすることで、悪意あるコンテンツからの被害を避けることができるぞ。
 
 
sandbox属性に指定できる値は、以下の通りです。

allow-same-origin 埋め込まれた文書を固有のものとせず、親文書と同じドメインを持つものとする
allow-top-navigation 埋め込まれた文書から別のブラウジングコンテキストを指しているリンクを有効にする
allow-forms 埋め込まれた文書からのフォーム送信を有効にする
allow-scripts 埋め込まれた文書からのスクリプトの実行を有効にする
allow-pointer-lock Pointer Lock APIを有効にする
allow-popups 埋め込まれた文書からのポップアップを有効にする

 
 
sandbox属性の値は、以下のように半角スペースで区切って複数のキーワードを指定することも可能です。

 
 

スポンサーリンク

使用例

 
 

表示例

以下が、私のブログのトップページです。


 
 

まとめ

インラインフレームを作成する際は、<iframe>タグを使用します。
 
 

HTML5 タグ図鑑

HTML5タグ全種類を図鑑としてまとめています。タグの意味や使い方でわからないことがあれば、ぜひこのページをご活用ください。

HTML5 タグ図鑑へ

 
HTML5 タグ図鑑

スポンサーリンク








iframeタグとは?|インラインフレームを作成する