HTML フレーム、Iframe、フレームセットの違い

HTML フレーム、Iframe、フレームセットの違い

10.4.1 フレームセットとフレームの違い まず、フレームセットとフレームの違いについて説明します。

<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=メインスクロール="no">

</フレームセット>

上記の例では、<Frameset></Frameset> によってページが 2 つの部分に分割され、左のフレームのページは admin_left.htm、右のフレームのページは admin_center.htm になります。

注意: <Frame></Frame> タグのフレーム順序は、左から右、または上から下です。

両者の違いは次のとおりです。

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

● <Frame> は、フレームセット内の各フレームのプロパティを設定するために使用されます。

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

<フレームセット border=1 frameSpacing=1 borderColor=#47478d rows=* cols=180,*>

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

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

パラメータ

例示する

国境

フレームの境界線の太さをピクセル単位で設定します。

フレームボーダー

フレームの境界線を表示するかどうかを設定します。0は表示しない、1は表示することを意味します。

フレーム間隔

フレーム間の距離を示します

境界線の色

フレームの境界線の色を設定する

ドキュメントを上部フレームと下部フレームに分割します。Row の後の値は、数値またはパーセンテージにすることができます。* は、残りのスペースを占有することを意味します。数値の数は、水平に分割されたフレームの数を表します。たとえば、Rows="210,*,10%" は、ページが上部、中央、下部の 3 つのフレームに分割されることを意味します。上部フレームは 210 ピクセルを占め、下部フレームはドキュメント全体の 10% を占め、残りのスペースは中央フレームによって占められます。 * は相対的な概念です。たとえば、Row=* は、ページ内に上下構造を持つフレームレイアウトがないことを意味します。

コル

行と同じ設定

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

フレームパラメータの設定に関しては、コードは次のようになります。

表10.4に示すように。

表10.4 フレームパラメータ

パラメータ

例示する

名前

フレームワークの名前を設定します。英語でなければなりません

ソース

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

余白幅

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

マージン高さ

フレームと上端および下端の間の距離を示します

スクロール

フレーム内にスクロールバーを表示するかどうかを設定します。「はい」は表示、「いいえ」は表示しません。「自動」はフレームページの内容がフレームのサイズを超えた場合に自動的にスクロールバーが表示されることを意味します。

フレームボーダー

フレームの境界線を表示するかどうかを設定します。0は表示しない、1は表示することを意味します。

ノーサイズ

ユーザーがフレームのサイズを変更できるかどうかを設定します。このオプションが設定されていない場合、ブラウザはフレームをドラッグしてフレームのサイズを変更できます。

フレーム間隔

フレーム間の距離を示します

境界線の色

フレームの境界線の色を設定する

10.4.4 フレームとIframeの違い

Frame と Iframe が実現できる機能は基本的に同じですが、Iframe の方が Frame よりも柔軟性があります。

フローティング フレーム タグとも呼ばれる Iframe タグは、HTML ドキュメントを HTML ドキュメント内に埋め込んで表示するために使用できます。 Frame タグとの最大の違いは、Web ページに埋め込まれた <Iframe></Iframe> に含まれるコンテンツはページ全体の不可欠な部分であるのに対し、<Frame></Frame> に含まれるコンテンツは独立した個体であり、独立して表示できることです。さらに、Iframe を適用すると、コンテンツのコードを繰り返さずに、同じコンテンツを同じページに複数回表示することもできます。

図 10.21 に示すページでは、ページの上部と下部にページ区切りリンクを作成するために Iframe を使用しています。コードは同じです。コードを繰り返さずに、同じファイルを Web ページに埋め込むだけです。このケースの実際の効果については、付属のブック CD のケース /frame/iframe/see_infomore_iframe.htm を参照してください。

10.4.5 Iframeを透明に設定する

Iframe のもう 1 つの大きな利点は、フレームを透明に設定して、フレーム内の背景をメイン ページの背景と同じにできることです。上記の例では、注意深い読者はこの問題に気付くでしょう。以下は、Iframe を透明に設定する方法の詳細な説明です。具体的な手順は次のとおりです。

(1)CD-ROM内のサンプルファイル/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 高さ="30" 列スパン="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">

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

透明度を許可="true"

(6)Iframeを挿入するためのセルコードは次のとおりです。

<td 高さ="30" 列スパン="4" >

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

(7)page.htmとsee_infomore_iframe1.htmの2つのページを保存し、ブラウザで結果を参照します。

<<:  JavaScript配列の一般的なメソッドの概要

>>:  CSS スティッキーフッターのいくつかの実装

推薦する

JSONオブジェクトのキーを置き換える最良の方法

JSON (JavaScript Object Notation、JS Object Notatio...

CSS3 rgb と rgba (透明色) の使い方の詳しい説明

誰もが色にとても敏感だと思います。私たちの目が見るところにはどこにでも色があります。では、CSS で...

CSS3で実装されたテキストポップアップ効果

成果を達成する実装コードhtml <div>123WORDPRESS.COM</d...

MySQL の文字セット utf8 を utf8mb4 に変更する方法

MySQL 5.5 の場合、文字セットが設定されていない場合、MySQL のデフォルトの文字セットは...

MySQL5.6.31 winx64.zip インストールと設定のチュートリアル

#1. ダウンロード # #2. ローカルに解凍し、必要な構成のmy*.iniを変更します。 #3....

CSSの2つの特別な値は、カスケードの継承と初期メソッドを制御するために使用されます。

カスケードを制御するために CSS の任意のプロパティに割り当てることができる特別な値が 2 つあり...

MySQLデッドロック問題の詳細な分析

序文私たちのビジネスがまだ初期段階にあり、同時実行の度合いが比較的低い場合、数年間はデッドロックの問...

InnoDB タイプの MySql によるテーブル構造とデータの復元

前提条件: データベースを復元するために必要な .frm ファイルと .ibd ファイルを保存します...

Linux suse11でルートパスワードを忘れた場合に変更する方法の簡単な分析

SUSE Linuxでルートパスワードを忘れた場合の解決方法SUSE (Linux オペレーティング...

MySQL スケジュールタスクの実装と使用例

この記事では、例を使用して、MySQL スケジュール タスクの実装と使用方法を説明します。ご参考まで...

Navicat で MySQL データベースのパスワードを変更する複数の方法

方法1: SET PASSWORDコマンドを使用するまずMySQLにログインします。フォーマット: ...

Linux のファイル権限とグループ変更コマンドの詳細な説明

Linux では、すべてがファイルであり (ディレクトリもファイルです)、各ファイルにはユーザーに対...

Docker を使用して Spring Boot をデプロイする方法

Docker テクノロジの開発により、マイクロサービスの実装にさらに便利な環境が提供されます。Doc...

SQL 面接の質問: 時間差の合計を求める (重複は無視)

ある会社の BI 職の面接を受けたとき、面接で SQL に関する質問がありました。一見すると非常に簡...

HTML でのテキストエリアの使用と一般的な問題およびケース分析

textarea タグはよく使われる HTML タグです。主に長いテキストを入力するときに改行するた...