BinaryDevelop
  1. ホーム
  2. Web制作
  3. HTML/Xhtml

htmlフレーム、Iframe、Framesetの違いについて

2022-01-30 16:44:35

10.4.1 フレームセットとフレームの違い
最初にFramesetとFrameの違いを説明します。

<Frameset></Frameset> は、フレームを区切るために使用され、それぞれは <Frame></Frame> でマークされます。 <Frame></Frame> は、以下のコードで <Frameset></Frameset> 内で使用しなければなりません。

<FRAMESET border=1 frameSpacing=1 borderColor=#47478d rows=* cols=180,*>

<FRAME src="inc/admin_left.htm" name=left scrolling=no id="left">

<FRAME src="inc/admin_center.htm" name=main scrolling="no">

</FRAMESET>

上記の例では、<Frameset></Frameset>でページを2分割し、左フレーム内のページをadmin_left.htm、右フレーム内のページをadmin_center.htmとしました。

注：<Frame></Frame>は、フレームの順序が左から右、または上から下であることを示します。

両者の違いは、以下の通りです。

  ● <Frameset> は、Webドキュメントがフレームで構成されていることを示すフレームタグで、ドキュメント内のフレームセットを構成するフレームのレイアウトを設定します。

  フレームセットを構成する個々のフレームのプロパティを設定するには、 ● <フレーム> を使用します。

10.4.2 フレームセット・パラメータ設定
<Frameset> は、ページ全体のレイアウトを直接決定するいくつかの特定のパラメータを、以下のコードで設定する必要があります。

<Frameset border=1 frameSpacing=1 borderColor=#47478d rows=* cols=180,*>

上記コードの各パラメータの設定とその意味を表 10.3 に示す。

表 10.3 フレームセットパラメータ

<テーブル

パラメータ

説明

ボーダー

枠の太さをピクセル単位で設定します。

フレームボーダー

フレームの枠線を表示するかどうかを設定します。0なら表示しない、1なら表示します。

フレーム間隔

フレーム間距離を示す

ボーダーカラー

フレームのボーダーカラーを設定します

列

ドキュメントが上下のフレームに分割されていること、Rowの後の値は値またはパーセント、*は残りのスペースを占めることを示し、値の数は水平方向に分割されたフレームの数を表します、例えば、Rows = ",*,10%"、ページは3フレームに分割されていること、上のフレームは210px、下のフレームはドキュメント全体の10%、残りのフレームの真ん中はスペースを占めていることを示します。* は相対的な概念で、例えばRow=*の場合、ページの上下の構造に対してフレームレイアウトがないことを意味します。

カラー

Rowと同様に設定します。

10.4.3 フレームパラメータ設定

Frameのパラメータ設定については、以下のようなコードになります。

を表 10.4 に示す。

表 10.4 フレームパラメータ

<テーブル

パラメータ

説明

名称

フレームの名称を設定します。

Src

フレーム内に表示されるページのパスと名前を、相対パスまたは絶対パスで設定します。

マージン幅

フレームの左右の端からの距離を示す

マージンハイト

上下の端からフレームの距離を示す

スクロール

フレーム内にスクロールバーを表示するかどうかを設定します。表示する場合は yes、表示しない場合は no、auto はフレームページ内のコンテンツがフレームサイズを超えた場合に自動的にスクロールバーを表示することを意味します。

フレームボーダー

フレームの枠線を表示するかどうかを設定します。0なら表示しない、1なら表示します。

ノーズサイズ

ユーザーがこのフレームのサイズを変更できるようにするかどうかを設定します。これを設定しないと、視聴者がフレームを引き回してサイズを変更することができます

フレーム間隔

フレーム間距離を示す

ボーダーカラー

フレームのボーダーカラーを設定する

10.4.4 フレームとIframeの違い

FrameとIframeはどちらも基本的に同じ機能を果たすことができますが、Iframeの方がFrameよりも柔軟性があります。

Iframeタグはフローティングフレームタグとも呼ばれ、HTML文書をHTML表示の中に埋め込むために使用することができます。Frameマークアップとの大きな違いは、Webページに埋め込まれた <Iframe></Iframe> に含まれるコンテンツはページ全体と一体であるのに対し、 <Frame></Frame> に含まれるコンテンツは別の存在で、独立して表示することができる点です。また、Iframeを適用することで、同じページ内に同じコンテンツを複数回表示することができ、そのコンテンツのコードを繰り返し記述する必要がなくなります。

図10.21のページは、ページの上下にIframeを適用してページネーションリンクを作成したものです。上下のコードは同じで、コードを繰り返すことなく、同じファイルをページに埋め込むことができます。

10.4.5 Iframeの透過性を設定する

Iframeのさらに大きな利点は、フレームを透明に設定し、フレーム内の背景をメインページの背景と同じにすることができることです。注意深い読者は、上の例でこのことにお気づきでしょう。そこで、Iframeの透過性を設定する方法について詳しく説明します。具体的な手順は、以下の通りです。

(1) 付属CDのcase/frame/iframe/see_infomore_iframe1.htmを開いてください。

(2) ブラウザーでページファイルを閲覧すると、Iframeが挿入された部分が元のセルの背景を覆っており、期待した効果とは異なっていることがわかります。

(3) page.htmを開き、コード表示に切り替えて、<body>タグに以下のようにコードを挿入してください。

<body style="background-color=transparent">

図 10.21 Iframe を適用してフリップページを作成する

(4) see_infomore_iframe1.htmをコード表示に切り替えると、ページ上のIframeが挿入されているセルのコードが次のように表示されます。

<td height="30" colspan="4" >

<iframe name="main" width="100%" height="30" frameborder="0" border=0 scrolling="no" ; marginwidth="0" marginheight="0" src="page.htm"</iframe>

</td>

(5) <Iframe>タグの中

<frame name="left" src=" index_manager/admin_left.htm " marginwidth="1" marginheight="1" scrolling="no" frameborder="1" noresize framespacing="2" bordercolor="#cc0000" >.となります。

上記コードのパラメータ設定とその意味

allowTransparency="true"。

(6) この時点でIframeを挿入するためのセルコードは以下の通りです。

<td height="30" colspan="4" >

<iframe name="main" width="100%" height="30" frameborder="0" border=0 scrolling="no" ; marginwidth="0" marginheight="0" src="page. htm" allowTransparency="true" ></iframe>& lt;/td>

(7) page.htm と see_infomore_iframe1.htm のページを保存し、ブラウザで効果を確認します。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します