MB-Support

パソコン初心者のサポートページ

ページの中に別のページを表示させる方法 iframe インラインフレーム

 ページの中に、他のページを埋め込むことができます。iframe タグに src で相対パス、または、絶対パスを指定します。


iframe(インラインフレーム)を指定すると、ページの中に別ページを表示させる事が出来ます。 表示できるページは、自サイトに限りませんが、全く知らないサイトを許可なく埋め込む事は礼儀に反します。 また、JavaSciprt を利用して、iframe では表示できない作りになっている場合もあります。


<iframe width="幅" height="高さ" src="相対パス" scrolling="auto"></iframe>

HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
<iframe width="200" height="300" src="sample.htm" scrolling="auto"></iframe>
</body>
</html>

ブラウザ


width="200" で表示するページ幅を指定します。 height="300" で表示するページ高さを指定します。 src="sample.htm" で表示させるページの絶対/相対パスを指定します。

ページ更新履歴/サーバーメンテナンスのお知らせなど、頻繁に変更される情報を複数のページに埋め込むと便利です。 なぜならば、元になるページ 1 つを更新すれば、iframe で埋め込んだ全てのページを更新できるからです。 スクロールバーを非表示にさせたい場合は、scrolling="no" を指定します。 さらに frameborder="0" を指定すると枠 0 の凹凸が無くなります。


HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
<iframe width="200" height="500" src="sample.htm" scrolling="no"
 frameborder="0"></iframe>
</body>
</html>

ブラウザ


この方法は、ページを埋め込んでいるので、親となるページのソースを参照しても、埋め込まれたページのソースは参照できません。 つまり、検索エンジンのロボットがクロールできません。 しかし、埋め込まれたページは、単独ページとしてクロールされます。

複数のページで共通するメニューなどで利用すると便利です。変更する時は、読み込んでいる元の 1 ページを変更すれば、全てのページに瞬時に反映されます。 埋め込まれたページは独立したものなので、親ページと違和感無く表示させるには、読み込ますページにも同じスタイルシートを指定した方が良いでしょう。



例えば、このサイトではホームページの作り方でインラインフレームを多用しています。 これは、インラインフレームを設置した親ページのスタイルシートを継承しないため、ページ環境に依存せずソースの結果を表示できるからです。



枠線の表示の違い

上で説明したスクロールバーと枠線を表示しない場合は問題ありませんが、表示する場合、あるいは、<ifram src="URL"> 以外、何も指定しない場合、Internet Explorer ではインラインフレームの部分が凹んだ表示になり、他のブラウザでは枠線が表示されません。

もし、枠線に関して表示を統一するのであれば、スタイルシートの border-style を指定すれば良いでしょう。



未対応ブラウザのために

インラインフレームに非対応ブラウザの場合、src= に続くアドレスがそのまま表示されます。 <ifram src="URL"> 〜 <ifram> の間に、文章とインラインフレームで読み込むページアドレスをハイパーリンクで記述すれば、インラインフレームのページへ誘導する事ができ、対応ブラウザではこの文章やハイパーリンクは表示されません。


HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
<iframe class="hp_iframe" height="600" src="URL">
<p>他のスタイルシートによる誤りを防ぐために
インラインフレームでサンプルを取り込んで表示しています。
iframeをサポートするブラウザでアクセスします。</p>
<p><a href="URL" target="_blank">サンプルに直接アクセスする</a></p>
</iframe>
</body>
</html>

テキストブラウザの[Lynx]で参照した場合、赤枠の範囲がインラインフレームを記述した部分です。 テキストとインラインフレームで読み込まれるページへのリンクが表示されています。



リンクをクリックすると、対応ブラウザではインラインフレームで表示されるページへ、直接アクセスできる手段を提示できます。




戻る 一覧表示 次へ


BTOパソコン・ゲームPC・自作パソコンなら【TSUKUMO】 - 自作PCに必要なパーツ、豊富な品揃え

Copyright © 2013 MB-Support パソコン初心者のサポートページ All Rights Reserved.

管理人サイト閲覧方法プライバシーポリシー著作権/免責事項