HTMLのbodyの中で、別のHTMLファイルを埋め込む時に使うのがインラインフレームで、
iframeタグを使います。
これは名前の通りインライン要素です。よって、imgタグの配置のように
幅(width)や高さ(height)、alignなどの配置の指定ができます。
例えば、exディレクトリにあるmain1.htmlとmain2.htmlのファイルをフレーム内へ使った例を以下に示します。
上記のソースを以下に示します。
<div style="background-color: #CCFF66; margin-left: 10%; width: 400px; height: 200px;"> <iframe src="ex/main1.html" name="frameA" width="300" height="180" style="margin: 10px; float: right;"> main2.htmlが埋め込まれる </iframe> <p><a href="ex/main2.html" target="frameA">リンク2</a></p> <p><a href="ex/main1.html" target="frameA">リンク1</a></p> <br clear="right"> </div>
<iframe> と </iframe>囲まれる
main2.htmlが埋め込まれるの部分は、
フレームが使えないブラウザに見せる文字列を指定する部分です。
iframeのタグ属性としては、上記で示したsrc、name、whidth、height以外に
left,right,centerなどの配置位置を指定するalign、
フレームの枠線の太さをピクセル単位で指定するborder、
フレームの枠線の色を指定するbordercolor、
フレームの有無を指定するframeborderがよく使われます。
("1"が表示で、"0"が非表示の設定値です。)
また、スクロールバーの表示を指定するscrollingでは、
常に表示の"yes"、常に非表示の"no"、既定値である"auto"の指定があります。
また、代表的なブラウザで使える特別な指定で、
フレームを透明にして壁紙や背景色をフレーム内に反映させるallowtransparency="true"属性があります。
この設定は"false"の設定で非透明です。
IEでこれを使う場合、フレーム内で使うhtmlのbody背景色を"transparent"に指定する
必要があります。
(body {background-color: transparent;})
以下の例では、リンク2で使っているmain2B.htmlが、
body { background-color: transparent; } の設定になっています。
それ以外は、main2.htmlと同じです。
←上記を実験できます。フレームの枠をやスクロールバーを表示するよう変更してみましょう。
例えば次のようなTwitterのツイートボタンは、下記のようなiframeで作ることができます。
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/tweet_button.html?lang=ja&show_count=false&button=grey&url=http://manabu.quu.cc/up/6/e61145.htm" style="width:130px; height:20px;"> </iframe>