Homepage Zero ガイド
logo

ゼロから始めよう!わかりやすい!ホームページ作成ガイド

初めての方へ|総合案内|お問い合わせ|当サイトについて

ホームページ初心者ガイド| HTML| CSS| ホームページお役立ち情報| ホームページレベルアップ情報| その他

ホームレベルアップ情報一覧>フレーム内に表示されるページを読み込もう!

-HTML- 一歩踏み込んだHTML

フレーム内に表示されるページを読み込もう!(frame 要素、src 属性)

使用タグ <frame>タグ

HTML一覧タグ辞典 … <frame> タグ

<frame>タグ<frameset>〜</frameset>の中に記述し、<frame>タグの src 属性でフレームに表示されるページを読み込むことができます。属性はその他に name 属性、frameborder 属性、marginwidth 属性、marginheight 属性、noresize 属性、scrolling 属性、longdesc 属性などがあります。また、このタグは内容を持ちません。

属性 読み 説明
name 属性 ネーム フレームに名前を指定できます。<a>タグのtarget属性を使いname属性で指定したフレームを名前を指定すれば、リンク先のページをそのフレームで表示できます。
frameborder 属性 フレームボーダー フレームの境界線を非表示にできます。値には「1」または「0」を指定できます。「1」を指定した場合は境界線が表示され、「0」を指定した場合は境界線は非表示になります。
marginwidth 属性 マージンウィドス フレームの左右に空ける空白をピクセル数を表す整数で指定します。
marginheight 属性 マージンハイト フレームの上下に空ける空白をピクセル数を表す整数で指定します。
noresize 属性 ノーリサイズ フレームの境界線のサイズ変更ができないようにします。指定できる値は「noresize」のみです。
scrolling 属性 スクローリング スクロールバーの付け方を変更できます。「auto」、「yes」、「no」のいずれかを指定できます。値に「auto」を指定した場合は自動的にスクロールバーが表示されます。「yes」を指定した場合はスクロールバーが付きます。「no」を指定した場合はスクロールバーが付きません。
longdesc 属性 ロングデスク このフレームに関する説明が title 属性で説明しきれないくらい長文の場合、フレームに関するページの URL を指定します。音声ブラウザなどのために用意された属性です。

使用タグ <frame src="URL">タグ

<frame>タグのsrc属性を使うと、フレーム内に読み込むページのURLを指定できます。値は相対パス、絶対パスで指定できます。

他人のサイトにリンクするには?!

ただ、普通に他人のサイトのURLを指定したらフレーム内に表示されてしまい、著作権に触れる恐れ(自分のサイトのように見えるので)があるので、<a>タグの target 属性で「_top」を指定し、いちばん上位のウィンドウに表示しフレームを解除しましょう!もしくは別ウィンドウで表示しましょう!

使用例

では、実際にフレーム内に読み込むページのURLを指定しましょう!ここでは<frameset>タグcols 属性の属性値を「20%,75%」と指定して左右に分割しているので、最初に指定したページが左側のフレーム(25%で表示)で表示され、後に指定したページが右側のフレーム(75%で表示)で表示されます。

frame要素のsrc属性を使い、フレーム内に読み込むページのURLを指定します。まずは、左側に表示するファイル名「menu.html」というページを指定します。

  1. まず<frame src="menu.html">と入力します
記述例
<frameset cols="25%,75%">
<frame src="menu.html">
</frameset>
  ↓

右側に表示するファイル名「main.html」というページを指定します。

  1. <frame src="main.html">と入力します
記述例
<frameset cols="25%,75%">
<frame src="menu.html">
<frame src="main.html">
</frameset>

このように入力すると左側のフレームにファイル名「manu.html」が読み込まれ、右側のフレームにファイル名「main.html」が読み込まれます。

使用例の表示

[frame要素のsrc属性を指定した場合の表示例]
一人暮らしの前向きな料理
ファイル名「memu.html」のページが表示されます ファイル名「main.html」のページが表示されます

関連情報ページ

その他

ロゴ
ゼロから始めよう!わかりやすい!ホームページ作成ガイド

|初めての方へ|総合案内|お問い合わせ|当サイトについて|

copyright (C) TOMIY All Right Reserved
inserted by FC2 system