インラインフレーム-ホームページ作成講座

昔はフレームという機能を使って、ブラウザ画面を複数に分割する方法がよく取られていました。しかし検索エンジンでは不利な部分が多く、HTML5でフレームは廃止になりました。

HTML5で残っているフレームはインラインフレームだけです。インラインフレームを使うと、ウェブページの一部に別のページを埋め込むことができます。ではインラインフレームの使い方を見てみましょう。

インラインフレームのHTMLタグ

まず最初に、インラインフレームを表示させるためのHTMLタグを見ておきましょう。

さらに、インラインフレームのサイズを指定する属性を加えることも可能です。

これらの属性は両方指定することもできますし、片方だけの指定でも構いません。ただし値はピクセル数で指定することになります。 ％指定はできません（スタイルシートでは可能）。

では、インラインフレームのサンプルを作ってみましょう。

HomePageフォルダの中に、「ifm」と言う名前のフォルダを作ります。次にtemp.htmlを開いて「lesson1.html」というファイル名で、ifmフォルダに保存して下さい。そしてbody内に以下のように記述してみましょう。

<ul>
<li>画像</li>
<li>テーブル</li>
<li>リスト</li>
<li>フレーム解除</li>
</ul>

<iframe src="../index.html" height="240"></iframe>

毎回サンプルはこのiframeを使っていました。ここでまたiframeを使うと入れ子になってややこしいので、別タブでサンプルページを表示しています。

サンプルページでは、インラインフレーム内にindex.htmlが表示されていると思います。 リンク先のページも、インラインフレーム内に表示されると思います。