10.ウィンドウ内部に別のページを表示したい

◆ <iframe src="○" "●">〜</iframe>

○ はhtmlファイル名
● は位置や大きさなど iframe で指定できる決められたワード(属性)を指定します。

<iframe> を使用すると、実に簡単にブラウザの画面の一部にそして好きな場所に小窓 (インラインフレーム) を開けて別のページを表示することが出来ます。 ページの中に小窓の大きさを自由に決め、表示したい .htmlファイルを埋め込むことで可能です。 <iframe> は<body> 内で使用し、インラインフレームに表示する内容は、src で指定します。

インラインフレーム作成時のいろいろな指定

例: <iframe src="xxx.html" name="in" width="200" height="100">

インラインフレームの大きさと表示されるファイル名で画面に小窓ができ xxx.html の内容が表示されます。name はフレームに付けられた名前です。(名前は任意です)他のページをこのフレームに表示したい場合に使います。 あとは、いろいろな働きを付加していきます。

srcファイルのURL
nameフレーム名(任意の名前を付けることで、インフレーム内に他のファイルを読み込むことができます。
widthフレームの横幅(ピクセル、%)
heightフレームの高さ(ピクセル、%)
marginwidthフレーム内の左右のマージン(ピクセル)
marginheightフレーム内の上下のマージン(ピクセル)
scrolling auto(自動、標準)、yes(表示)、no(非表示)
frameborder0,1(フレームの枠の表示・非表示)
alignleft,center,right(テキストの回りこみ)

インラインフレームは、たびたび 更新される情報(更新記録や季節の挨拶など)を表示するホームページのトップ画面によく 使われます。小さなスペースの中に多くの情報を表示することができます。トップページとは別ファイルなので、別ファイルを更新するだけで済みます。
<iframe>〜</iframe>の間には、インラインフレームに非対応のブラウザに対して別のページへ案内するメッセージと別ページへのリンクを記述します。このメッセージはフレームに対応しているブラウザでは表示されません。


▼ ページ内に更新情報のインラインフレームを作る 例:1

<iframe src="kosin.html" name="in" width="350" height="100" scrolling="auto" >
インフレームを使っています。未対応のブラウザをお使いの方は
<a href="kousin.html">更新情報</a>からどうぞ。
</iframe>

幅350ピクセル、高さ100ピクセルの大きさのフレームの中にファイル名"kosin.html"のページを表示します。表示される内容がフレーム内に収まらないときは自動的にスクロールバーがでます。 フレームに name="in" と名前をつけることで、違うページもリンク先をインラインフレームに指定することができます。 指定に target="in"を付け加えると、このフレームの中に表示されます。

▼ ページ内に更新情報のインラインフレームを作る 例:2

<iframe src="photo_kousin.html" name="photo" width="350" height="200" scrolling="auto" frameborder="0">
インラインフレームを使用しています。非対応の方はリンク文字「photo」からどうぞ。
<a href="photo_kousin.html">photo</a>
</iframe>

トップページに写真で更新を知らせます。小さなスペースで何枚もの写真を紹介できます。 幅350ピクセル、高さ200ピクセルの大きさのフレームの中にファイル名"shasin.html"のページを表示します。 frameborder="0" 指定でフレームの枠線を消しています。

▼ インラインフレーム内に表示するページを変えてみる

↓のリンクをクリックするとインラインフレームに表示されます。(TOPは今表示されているページです。)
TOP HPの横幅について フレームの注意点 フォントの大きさの見本
   

<table border><tr>
<th><a href="bee.html" target="inline">TOP</a></th>
<th><a href="ifra-sample1.html" target="inline">HPの横幅について</a></th>
<th><a href="ifra-sample2.html" target="inline">フレームの注意点</a></th>
<th><a href="ifra-sample3.html" target="inline">フォントの大きさの見本</a></th>
</tr></table>
<iframe src="bee.html" name="inline" width="500" height="300" marginwidth="20" marginheight="20" scrolling="auto" >
インフレーム内にページが表示されます。
ご覧になっているブラウザで表示されない場合はこちらからどうぞ。
<a href="bee.html">TOP</a>
<a href="width-sample.html">HPの横幅について</a>
<a href="frame-sample.html">フレームの注意点</a>
<a href="fontsize.html">フォントの大きさの見本</a>
</iframe>

幅500ピクセル、高さ300ピクセルの大きさのフレームの中にファイル名"bee.html"のページを表示します。ここで、インラインフレームの名前を name="inline"としています。このフレームの中に他のページを表示する時にリンク指定に target="inline"を加えます。

▼ スタイルシートを使ってインラインフレームのスタイルを変えてみましょう。

★フレームの枠線を消しました。
ソース
<iframe src="kosin1.html" name="sample1" width="350" height="100" scrolling="auto" frameborder="0" >こちらからどうぞ。<a href="bee.html">TOP</a>
</iframe>

frameborder="0"でインラインフレームの枠線を消してみました。インラインフレームのスクロールバーの色は、スタイルシートを使って指定しています。フレームに表示するページ側で指定します。インラインフレームの画面上で右クリック→「ページのソース」を表示→head内のスタイルシートの部分 <style type="text/css">〜</style> をコピーし自分のページの<head>〜</head>内にに貼り付けてください。(ブラウザによってはスクロールバーの色の表示に対応しない場合があります。指定しても色が付きません。)

★枠線の形状を二重線、色を緑、枠線の太さを3pxにしました。frameborder="0"で枠線を消してから、スタイルシートで枠を指定します。
ソース
<iframe src="kosin1.html" name="sample2" width="350" height="100" scrolling="auto" frameborder="0" style="border:3px green double;">こちらからどうぞ。<a href="bee.html">TOP</a>
</iframe>

★枠線の形状を点線、色を緑、枠線の太さを2pxにしました。
ソース
<iframe src="kosin.html" name="sample3" width="350" height="100" scrolling="auto" frameborder="0" style="border:3px green dotted;">こちらからどうぞ。<a href="bee.html">TOP</a>
</iframe>

★枠線の形状を立体枠、色を薄茶、枠線の太さを8pxにしました。
ソース
<iframe src="kosin.html" name="sample4" width="350" height="100" scrolling="auto" frameborder="0" style="border:8px #ffcccc ridge;">こちらからどうぞ。<a href="bee.html">TOP</a>
</iframe>

よろしければ、ページの更新にお使いください。

PageTop