インラインフレーム

インラインフレームタグで他のページを表示する

インラインフレームの作り方

<iframe> インラインフレーム（iframe）は、アイフレームともいいます。

<iframe>〜</iframe>
インラインフレームタグの開始タグに記述したurlのページが現在のページ（タグを記述した場所）の小窓の中に表示されます。
小窓の大きさはwidth="横幅" height="縦幅"で設定します。
複数ページに同じ 目次、見出しなどをつける場合、インラインフレームで表示させると、外部の1つのページを修正するだけでいいのでとても便利です。

また、インラインフレームではフレームのスクロールやボーダーの有り無しも設定できるので、デザインも自由自在です。

インラインフレームのタグの書き方
サンプル
このサイトの他のページをインラインフレーム内に表示しています。



タグはこのようになります。 上記のタグはデフォルトで、スクロールバー　枠線が表示されますが、スクロールバーを隠す、枠線を表示しない、などの細かい設定ができます。

インラインフレームのサイズを設定

width="値"	幅を指定。ピクセルまたは%
height="値"	高さを指定。ピクセルまたは%

インラインフレームのスクロールバーの設定

scrolling="yes"	常にスクロールバーを表示
scrolling="no"	スクロールバーを表示しない
scrolling="auto"	自動で表示（初期値、何も指定しなければauto）

インラインフレームの枠線の設定

frameborder="0"	フレーム枠線を表示しない
frameborder="1"	フレーム枠線を表示する

インラインフレームに名前をつける

name="フレーム名"	フレームに名前を指定。（リンクや、form送信で target属性を指定する場合に使用します。）

枠と表示内容の間にマージンを指定する

marginwidth="値"	フレームの境界との左右の余白（ピクセルで指定）
marginheight="値"	フレームの境界との上下の余白（ピクセルで指定）

インラインフレームに並ぶ文字の回り込み

align="top"	インラインフレーム右上部に文字を表示
align="middle"	インラインフレーム右中央に文字を表示
align="bottom"	インラインフレーム右下部に文字を表示（初期値）

<p><iframe src="http://yume.hacca.jp/" width="300" height="250" align="top">（代替）インラインフレームを使用しています。</iframe>ここへ文字を記述</p>


先ほどのサンプルを、設定を変えてインラインフレームで表示させています。スクロールさせない表示の時は、どんなに大きなページでも指定したサイズで固定されます。

<iframe src="http://yume.hacca.jp/" width="300" height="250" frameborder="0" scrolling="no">インラインフレームを使用しています。</iframe>

インラインフレームに呼び出すページや画像は自分のサイトのページにしましょう。
無断で他人さまのページを呼び出さないようにして下さい！！

リンクの小技 リンクの開き方 HEAD要素 Body属性 改行する


●当サイトのソースは、IE6.0＋のみ動作確認をしております。 それ以外のブラウザでは同じように表示されない場合がございます。ご了承下さい。


★skip ページtop