インラインフレーム

更新日:2018.06.30
  1. HOME
  2. ホームページ作成講座
  3. インラインフレーム

昔はフレームという機能を使って、ブラウザ画面を複数に分割する方法がよく取られていました。 しかし検索エンジンでは不利な部分が多く、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が表示されていると思います。 リンク先のページも、インラインフレーム内に表示されると思います。

NINJABUTTON