HTMLのインラインフレーム表示

今回は、ホームページ作成時に知っておくと便利なHTMLでのiframeタグの情報を掲載します。

iframeとは、インラインフレームと呼ばれるフレームのことです。

iframeを使用すると、ウェブページ内にフレーム、つまり内わくを作成することができます。

ここまで読んで、通常のフレームとインラインフレームとの違いについて、気になった人もいると思うので、もう少し説明すると…。

framesetタグで作る通常のフレームの場合は、上下、または左右に画面を分割し、その中に別ファイルを読み込みます。

iframeタグで作るインラインフレームの場合は、ウェブページ内の好きな場所にフレーム領域を作り、その中に別ファイルを読み込みます。

ですから見た目も性質も全く違うということです。

さらに、通常のフレームは、2種類のタグ(frameset、frame)を組み合わせて指定します。

しかし、インラインフレームの場合は、iframeタグを好きな場所に記述するだけで指定することができます。

つまり、インラインフレームの方が、通常のフレームよりも、HTMLタグ数も少ないので、使用しやすいということです。

さらに、インラインフレームと通常のフレームの違いをあげるとすれば、通常のフレームでは、bodyタグは使用しません。

しかし、インラインフレームはこのbodyタグに囲まれた部分で使用します。

以上、通常のフレームとインラインフレームとの違いを理解していただけたと思います。

名前は似ていますが、それぞれ特徴があるので、あなたのウェブサイトに合わせて使い分けていただければと思います。

  1. インラインフレームとフレームの違い
  2. インラインフレームの基本
  3. iframe未対応ブラウザの場合
  4. iframeの大きさ指定
  5. iframeタグにフレーム名をつける
  6. iframeタグの枠線指定
  7. iframeタグのスクロールバー指定
  8. iframeタグの枠と内容間指定
  9. iframeタグの文字位置を指定
  10. インラインフレームの周囲を指定

インラインフレームとフレームの違い

インラインフレームと通常のフレームの違いについては前述のとおりです。

ここでは、インラインフレームと通常のフレームとの違いを理解した上で、それぞれの使用用途を考えてみましょう。

まずは、通常のフレームについてです。

通常のフレームでは、表示するウェブページの画面自体を大きく分割することができるという特徴を持っています。

例えば、左3割をナビゲーションメニューに割いて、残りをコンテンツとするというのが、一般的な使い方です。

このやり方でウェブページを作っていくと、いくらコンテンツのページが増えたとしても、ナビゲーションメニューのページは1ページで済むという利点があります。

さらに、フレームで分割されたウェブページは、HTMLのリンクタグや、フォームタグ以外では、お互いのウェブページを干渉することはありません。

フレームで分割されたウェブページに大きな影響を与えているのは、フレーム分割を指定しているHTMLファイルのみです。

ですから、たとえウェブページの更新に不慣れで、コンテンツページをあやまって削除してしまった場合でも、影響がウェブページ全体に及ぶことはありません。

これに対して、インラインフレームは、ウェブページの一部にスペースを設けて、そこに別のHTMLファイルを表示させます。

ですから、インラインフレームは、前述のフレームのように、ナビゲーションメニューを表示させるといった使い方にはむきません。

インラインフレームは、どちらかというと、ウェブページの一角を利用したコンテンツ表示に向いています。

例えば、すべてのウェブページ中央に、同じ文章で広告などを表示させたいときには、インラインフレームを使用するのが便利です。

広告部分のHTMLを最初に1つ作っておき、あとはすべてのコンテンツページの中央で、広告用のHTMLファイルをインラインフレームで呼び出すだけです。

こうしておくと、広告部分のHTMLファイルをひとつ書き換えるだけで、すべてのコンテンツページに表示される広告内容が変更されます。

このように、通常のフレームも、インラインフレームも、それぞれ便利なところがあるので、使用用途に合わせて、使い分けてくださいね。

インラインフレームの基本

それでは、ホームページ上で、インラインフレームを使用するためのHTMLタグについて、説明します。

iframeタグの指定を行うと、ウェブページ内の好きな場所にフレームを表示することができます。

例えば、以下のように記述します。

<html>
<head>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=Shift_JIS">
<title>インラインフレームサンプル</title>
</head>
<body>
<iframe src="sample.html"></iframe>
</body>
</html>

インラインフレーム内で、sample.htmlを呼び出して表示させています。

src=""の「"」と「"」とのあいだに、表示させたいファイル名を指定します。

ファイル名までのパスは、絶対パスまたは相対パスが使用可能です。

<戻る>

iframe未対応ブラウザの場合

iframe未対応ブラウザでは、iframeタグで囲まれた部分が表示されます。

<html>
<head>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=Shift_JIS">
<title>インラインフレームサンプル</title>
</head>
<body>
<iframe src="sample.html">
インラインフレーム未対応ブラウザではこの部分が表示されます。
</iframe>
</body>
</html>

iframeタグに囲まれた内容が、未対応ブラウザで表示されます。

iframeタグに対応しているブラウザでは、この部分は表示されません。

<戻る>

iframeの大きさ指定

iframeタグに、widthやheightを追加すると、インラインフレームの大きさを指定することができます。

<html>
<head>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=Shift_JIS">
<title>インラインフレームサンプル</title>
</head>
<body>
<iframe src="sample.html" width="300" height="200">
</iframe>
</body>
</html>

width=""の「"」と「"」とのあいだに横のサイズをピクセル数か、パーセントで指定します。
height=""の「"」と「"」とのあいだに縦のサイズをピクセル数か、パーセントで指定します。

<戻る>

iframeタグにフレーム名をつける

iframeタグに、nameを追加すると、そのインラインフレームに対して、フレーム名を付けることができます。

name=""の「"」と「"」とのあいだに、任意のフレーム名を指定します。

フレーム名には、アルファベットで始まる半角英数字(一部の記号も使用可)で好きな名前を指定できます。

フレーム名に使用できる記号は、ハイフン(-)、アンダーバー(_)、コロン(:)、ピリオド(.)の4つです。

このフレーム名は、リンクにtarget属性を指定する場合や、formの送信でtarget属性を指定する場合に使用します。

例えば、以下のように記述します。

<html>
<head>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=Shift_JIS">
<title>インラインフレームサンプル</title>
</head>
<body>
<a href="sample1.html" target="top">上のフレームにサンプル1を表示</a>
<a href="sample2.html" target="bottom">下のフレームにサンプル2を表示</a>
<iframe src="index1.html" name="top">
</iframe>
<iframe src="index2.html" name="bottom">
</iframe>
</body>
</html>

上下に2つのインラインフレームを作成しています。

上のフレームには、top、下のフレームには、bottomというフレーム名を付けています。

リンクタグには、それぞれ、targetタグを追加しています。

targetタグには、表示させたいフレーム名を指定しています。

iframeタグの枠線指定

iframeタグに、frameborder="0"を追加すると、インラインフレームの枠線を消すことができます。

frameborder=""の「"」と「"」とのあいだに、1か0で指定します。

例えば、以下のように記述します。

<html>
<head>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=Shift_JIS">
<title>インラインフレームサンプル</title>
</head>
<body>
<iframe src="sample.html" frameborder="0">
</iframe>
</body>
</html>

「0」の場合は、枠線を消します。
「1」の場合は、枠線を表示します。

指定が何もない場合は、「1」となり枠線がつきます。

<戻る>

iframeタグのスクロールバー指定

iframeタグに、scrollingを追加すると、スクロールバーの有無を指定できます。

例えば、以下のように記述します。

<html>
<head>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=Shift_JIS">
<title>インラインフレームサンプル</title>
</head>
<body>
<iframe src="sample.html" scrolling="yes">
</iframe>
</body>
</html>

scrolling=""の「"」と「"」とのあいだに、スクロールバーの設定を記述します。

「yes」の場合は、常にスクロールバーを表示します。
「no」の場合は、スクロールバーを表示しません。
「auto」の場合は、必要に応じてスクロールバーを表示します。

何も指定のない場合は、この設定が採用されます。

スクロールバーを消してしまうと、ページの内容や閲覧者の環境によっては、ページの一部を見られなくしてしまう可能性があるので注意が必要です。

<戻る>

iframeタグの枠と内容間指定

iframeタグに、marginwidthや、marginheightを追加すると、フレームの枠と内容との間にマージンを指定できます。

例えば、以下のように記述します。

<html>
<head>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=Shift_JIS">
<title>インラインフレームサンプル</title>
</head>
<body>
<iframe src="sample.html" marginwidth="30" marginheight="30">
</iframe>
</body>
</html>

上下左右に30ピクセルのマージンを指定しています。

marginwidth=""の「"」と「"」とのあいだに、左右のマージンをピクセル数で指定します。
marginheight=""の「"」と「"」とのあいだに、上下のマージンをピクセル数で指定します。

<戻る>

iframeタグの文字位置を指定

iframeタグに、alignを追加すると、インラインフレームの文字の位置を指定できます。

例えば、インラインフレーム右側の上部に文字を表示する場合は、以下のように記述します。

<html>
<head>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=Shift_JIS">
<title>インラインフレームサンプル</title>
</head>
<body>
<iframe src="sample.html" align="top">
</iframe>
右側の上部に文字が表示されます。
</body>
</html>

align=""の「"」と「"」とのあいだに、インラインフレーム内に表示させたい文字の位置を指定します。

「top」の場合は、インラインフレーム横の上部に文字を表示します。
「middle」の場合は、インラインフレーム横の中央に文字を表示します。
「bottom」の場合は、インラインフレーム横の下部に文字を表示します。

何も指定のない場合は、この設定が採用されます。

「left」の場合は、インラインフレームの右側に複数行の文字を表示します。
「right」の場合は、インラインフレームの左側に複数行の文字を表示します。

並ぶ文字の扱いについて注意すべき点があるので、少し補足しておきます。

top、middle、bottomの指定では1行しか並べられないのに対して、left、rightの指定では複数行の文字を並べることができるようです。

left、rightを指定する場合は、文字の回り込みを終了させるための工夫が必要です。

「<br clear="all">」などとするとよいでしょう。

clearに指定できるものとしては、以下のようなものがあります。

「left」では、インラインフレームの右側にある文字の回り込みを解除します。
「right」では、インラインフレームの左側にある文字の回り込みを解除します。
「all」では、どちらの回り込みも解除します。

ただし、この属性は、HTML4.01では非推奨とされています。

HTMLタグに埋め込むのではなく、スタイルシートで指定するとよいでしょう。

読んだだけではわかりにくいと思うので、実際にやってみてくださいね。

インラインフレームの周囲を指定

iframeタグに、vspaceや、hspaceを追加すると、インラインフレームの周囲にマージンを入れることができます。

例えば、上下に10ピクセル、左右に30ピクセルのマージンを指定する場合は、以下のように記述します。

<html>
<head>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=Shift_JIS">
<title>インラインフレームサンプル</title>
</head>
<body>
<iframe src="sample.html" vspace="10" hspace="30">
</iframe>
</body>
</html>

vspace=""の「"」と「"」とのあいだに、上下のマージンをピクセル数で指定します。
hspace=""の「"」と「"」とのあいだに、左右のマージンをピクセル数で指定します。

iframeタグに対するこの属性は、NetscapeとFirefoxでは対応していないようです。

両ブラウザにも対応させたい場合は、スタイルシートで指定するのがよいようです。

以上でインラインフレームの説明は終了です。

インラインフレームは、慣れるまではわかりにくいと思うので、何度か実際に使用してみてくださいね。

<戻る>