HPB19 | HPB18 コンテンツ一覧
ホーム > HPB19 > HTML インラインフレーム <iframe> の使い方
目次 | 元のページ 前のページ | 次のページ サイトマップ | ページEND

HTML インラインフレーム <iframe> の使い方


HTML インラインフレーム < iframe > とは



インラインフレーム < iframe > とは、現在表示しているページ ( フレーム ) 内に、窓を開けたかのように、別のURLページを組込み 、現在表示しているページの一部分 ( インライン ) であるかのように表示するためのものです



<iframe src="xxxx.html" width="303" height="253" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" style="border:none;"></iframe>



PDFファイルをインラインフレーム表示するやり方につきましては、「 PDFファイルの貼付け方 インラインフレームの活用 」 (次のページ) をご参照下さい




<iframe> 使用例



こんな風に、ページの中に窓を開けたように、別URLページを表示することができます

この窓(インラインページ)の表示構文を示します

<iframe src="xxxx.html" width=" 320" height="270" marginwidth="0" marginheight="0" frameborder="0"  style="border:none;"></iframe>



もちろんシームレスに表示することも可能です

上と同じページを表示しています
スクロールバーを出さなければ、ページの一部分のみを固定的に見せることができます

この窓(インラインページ)の表示構文を示します

<iframe src="xxxx.html" width=" 303" height="253" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" style="border:none;"></iframe>




<iframe> 記述例



<iframe src="xxxx.html" width="303" height="253" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" style="border:none;"></iframe>

< 構文開始
iframe インラインフレームタグ
src="http://~" インライン表示するページ URL
width="303" フレームの横幅 303ピクセル
height="253" フレームの高さ 253ピクセル
scrolling="no" スクロールバーの表示 yes:常に表示 no:常に非表示 auto:自動(既定値)
marginwidth="0" フレーム左右の余白 0ピクセル
marginheight="0" フレーム上下の余白 0ピクセル
frameborder="0" フレームの枠線  1 :表示する 0 :表示しない IEでは yes と no も指定可能
style="border:none;" スタイルシート ボーダー表示しない(規定値)
> 構文終了
</iframe> インラインフレームタグ 終了




<iframe> 属性



属性 記述例 説明
src URL
src="http://ドメイン名/フォルダ名/frame.html" (絶対URL指定)
src="../フォルダ名/frame.html" (相対URL指定)
src="frame.html"
src="frame.html#ラベル名"
フレームの中に表示するURL(html)を指定します 注1 注2
srcdoc contents フレームに表示するコンテンツを src属性で別ファイルから指定するのではなく、直接 srcdoc属性で指定します (IE11, Safari 5.1 ではまだサポートされていません)
name 名前 name="leftframe" フレームの名前を指定します
sandbox sandbox sandbox 属性を値なしで指定すると、iframeで表示されるコンテンツは別サイトのものと見なされ、フォームのサブミット、スクリプト、トップレベルコンテンツへの操作(window.top.location など)、Cookieなどへのアクセス、ポップアップ(<a target="_blank"> や window.open())、プラグインなどが無効化されます
sandbox="allow-xxx" のように値を指定すると、一部の機能を許可することができます。allow-xxx には、下記の値をスペースで区切って複数指定することが可能です
  allow-forms:フォームのサブミットを許可
  allow-scripts:ポップアップを除くスクリプトを許可
  allow-top-navigation:トップレベルコンテンツへの操作を許可
  allow-same-origin:Cookieなどへのアクセスを許可
width 数値/% width="100" フレームの幅幅をピクセルまたはパーセンテージで指定します
height 数値/% height="120" フレームの高さをピクセルまたはパーセンテージで指定します
align left
center
right
align="left"
align="center"
align="right"
左揃えで表示 (既定値)
中央揃えで表示
右揃えで表示
フレームを表示する位置を指定します
hspace 数値 hspace="100" フレームの周りの横方向の余白をピクセル単位で指定します
vspace 数値 vspace="100" フレームの周りの縦方向の余白をピクセル単位で指定します
marginwidth 数値 marginwidth="10" フレームの左右の余白をピクセル単位で指定します
marginheight 数値 marginheight="0" フレームの上下の余白をピクセル単位で指定します
allowtransparency true
false
allowtransparency=true フレームを透明色にする
フレームを透明色にしない (既定値)
border 数値 border="1" フレームの枠線の太さをピクセル単位で指定します
bordercolor bordercolor="red"
bordercolor="#FF0000"
色の名前を指定する
色のRGB値を指定する
フレームの枠線の色を指定します
frameborder 1
0
frameborder="1"
frameborder="0"
フレームの枠線を表示 (既定値)
フレームの枠線を非表示
datafld datafld データバインド機能を用いる際の、データソースの列名を指定します
datasrc datasrc データバインド機能を用いる際の、データソースの ID を指定します
framespacing framespacing フレーム間の隙間をピクセル単位で指定します
longdesc ongdesc このフレームに関する説明が TITLE 属性で示せないくらいに長文の場合に、その説明ページのURLを指定します
scrolling yes
no
auto
scrolling="yes"
scrolling="no"
scrolling="auto"
スクロールバーを表示
表示しない
自動切換え (既定値)
noresize noresize フレームのリサイズを禁止
seamless フレームコンテンツがシームレスに表示されます
フレームの境界線は無く、CSS等も、あたかもフレーム内コンテンツがフレーム外のコンテンツの一部であるように適用されます
HTML5 の草案で検討されていましたが、最終勧告では破棄されました



注1.

相対URLフォルダーの混在


<iframe src="Island_Nishinoshima_600000.html" ~ ></iframe>
<iframe src="../cm/CM_Gen_Bottom_000000.html" ~ "></iframe>
<iframe src="Island_Nishinoshima_700000.html" ~ ></iframe>

相対URLで記述する場合、上記の様に、異なるフォルダーにあるURL(html)を混在させると、カレントフォルダーが移動してしまい、3行目の<iframe ~ >htmlページが正常に表示されなくなる場合があります


別フォルダーを絶対URLで指定


<iframe src="Island_Nishinoshima_600000.html" ~ ></iframe>
<iframe src="http://abhp.net/cm/CM_Gen_Bottom_000000.html" ~ "></iframe>
<iframe src="Island_Nishinoshima_700000.html" ~ ></iframe>

別フォルダー html を指定する場合、絶対URLで記述することにより、カレントフォルダーの移動を防ぎ、正常に表示できるようになります


同一フォルダーを絶対URLで指定


<iframe src="http://abhp.net/island/Island_Nishinoshima_600000.html" ~ ></iframe>
<iframe src="../cm/CM_Gen_Bottom_000000.html" ~ "></iframe>
<iframe src="http://abhp.net/island/Island_Nishinoshima_700000.html" ~ ></iframe>

同一フォルダー内の html を絶対URL指定にしても、カレントフォルダーに関係なく正常に表示されるようになります



注2.

ラベル名指定


#ラベル名を記述することで、frame.html の ラベル名以降を表示することができますが、<iframe>元のページ自体のページトップが、<iframe>枠の先頭に移動してしまいます




<iframe> 一般属性



属性 説明
accesskey=key アクセスキーを指定します
class=class クラスを指定します
contenteditable=bool 要素を編集可能にします
dir=dir 文字の表示方向を指定します
hidden 要素を非表示にします
id=id ID を指定します
lang=lang 言語を指定します
spellcheck=bool スペルをチェックします
style=style スタイルシートを指定します
tabindex=n タブインデックスを指定します
title=title タイトルを指定します
translate=title 翻訳可否を指定します




Amazonアソシエイトでの <iframe> の使用例


Amazonアソシエイトのアフィリエイト広告で使用されている構文を例に、<iframe> の主な要素仕様に触れておきます

<iframe src="http://rcm-fe.amazon-adsystem.com/e/cm?t= アソシエイトID &o=9&p=9&l=ez&f=ifr&f=ifr" width="180" height="150" scrolling="no" marginwidth="0" marginheight="0" border="0" frameborder="0" style="border:none;"></iframe>

< 構文開始
iframe インラインフレームタグ
src="http://~" インライン表示するページ URL
width="180" フレームの横幅 180ピクセル
height="150" フレームの高さ 150ピクセル
scrolling="no" スクロールバーの表示 yes:常に表示 no:常に非表示 auto:自動(既定値)
marginwidth="0" フレーム左右の余白 0ピクセル
marginheight="0" フレーム上下の余白 0ピクセル
border="0" フレーム枠線の太さ 0ピクセル
frameborder="0" フレームの枠線  1 :表示する 0 :表示しない IEでは yes と no も指定可能
style="border:none;" スタイルシート ボーダー表示しない(規定値)
> 構文終了
</iframe> インラインフレームタグ 終了

Amazonアソシエイト ※1 のアフィリエイト広告でも利用されているのですが、困ったことに、<iframe> の中で、「 border="0" 」なんて使われていたりして、ホームページビルダー19では、これは、「属性未定義」の構文エラーになります
2014年10月13日現在 Amazonアソシエイト もようやくこの問題に気付いたようで、 <iframe> 構文に、「 border="0" 」が付かなくなりましたので、この問題は起こらなくなったと思われます

ホームページビルダーでAmazonアソシエイトを利用する際に、「 border="0" 」が付いていた場合、「border="0"」を取っ払ってしまいましょう
ホームページビルダー19で構文エラーとなってしまう為、本当の構文エラーを見落とす誘因になってしまいます
Amazonアソシエイト では、構文の自由な改変を認めていますので、規約上も問題ありません





関連ページ 「HTML タグ辞典 <iframe>
※1 Amazonアソシエイト について詳しくお知りになりたい方は、「 Amazonアソシエイト 」をご参照下さい

目次 | 元のページ 前のページ | 次のページ サイトマップ | ページTOP
ホーム > HPB19 > HTML インラインフレーム <iframe> の使い方
   

© 2014 abhp.net All Rights Reserved.
ページTOP
ページTOP
ページTOP
ページTOP
ページTOP
ページTOP