- HOME
- ホームページ作成講座
- インラインフレーム
昔はフレームという機能を使って、ブラウザ画面を複数に分割する方法がよく取られていました。 しかし検索エンジンでは不利な部分が多く、HTML5でフレームは廃止になりました。
HTML5で残っているフレームはインラインフレームだけです。 インラインフレームを使うと、ウェブページの一部に別のページを埋め込むことができます。 ではインラインフレームの使い方を見てみましょう。
インラインフレームのHTMLタグ
まず最初に、インラインフレームを表示させるためのHTMLタグを見ておきましょう。
- <iframe src="パス"></iframe>
- ページ内に別のページを表示します。 src属性で表示するページを指定します。
さらに、インラインフレームのサイズを指定する属性を加えることも可能です。
- width="横幅"
- インラインフレームの横幅を指定します。
- height="高さ"
- インラインフレームの高さを指定します。
これらの属性は両方指定することもできますし、 片方だけの指定でも構いません。 ただし値はピクセル数で指定することになります。 %指定はできません(スタイルシートでは可能)。
インラインフレームのサンプル
では、インラインフレームのサンプルを作ってみましょう。
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が表示されていると思います。 リンク先のページも、インラインフレーム内に表示されると思います。