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 スティッキーフッターのいくつかの実装

推薦する

JavaScript は単一のリンクリストプロセス分析を実装します

序文:複数の要素を格納するために、配列は最も一般的に使用されるデータ構造ですが、配列には多くの欠点も...

vue router-view のネストされた表示実装

目次1. ルーティング構成2. Vueページのネスト3. ネストされた関係1. ルーティング構成 定...

フレックスレイアウトにおける画像変形の解決策の詳細な説明

フレックス レイアウトは現在よく使用されるレイアウト方法ですが、場合によっては小さな問題が発生するこ...

OpenSSL を使用した Kubernetes 証明書の生成の概要

Kubernetes は、基本認証、トークン認証、CA 認証の 3 種類の認証をサポートしています。...

データベースクエリの最適化: サブクエリの最適化

1. 事例会社のトップ以外の従業員全員を年齢別にグループ化します。 t_emp で id が存在しな...

ポップアップ効果を実現するにはjsを使用します

この記事の例では、ポップアップ効果を実現するためのjsの具体的なコードを参考までに共有しています。具...

vmware workstation12 インストール CentOS プロンプト VMware Player と Device/Credential Guard に互換性がない、理由と解決策

最新バージョンの WIN10 では、Microsoft は仮想化コンテナに基づくセキュリティ メカニ...

Portainer を使用して Docker のビジュアル インターフェースを構築する方法

ポーテナーの紹介Portainer は、ステータス表示パネル、アプリケーション テンプレートの迅速な...

MySQL実践スキル: 2つのテーブルに異なるデータがあるかどうかを比較する方法の分析

この記事では、MySQL が 2 つのテーブルを比較して、異なるデータがあるかどうかを確認する方法を...

Sublime Text - ブラウザのショートカットキーを設定するための推奨方法

コード効果を異なるブラウザで表示することはよくあることなので、異なるショートカットキーを使用して対応...

MySQL 8.0.11 MacOS 10.13 のインストールと設定方法のグラフィックチュートリアル

MacにMySQLデータベースをインストールし、環境変数を設定する手順を参考までに記録します。具体的...

Vue+Bootstrapでシンプルな学生管理システムを実現

参考までに、vueとbootstrapを使って比較的シンプルな生徒管理システムを作りました。具体的な...

Vue が値を返してフォームを動的に生成し、データを送信する仕組みの詳細な説明

目次解決された主な問題1. バックエンドから返され、バックエンドに送信されるデータは、次の形式になり...

Webフロントエンドツール、Sublime Text 2の紹介

Sublime Text 2 は、軽量でシンプル、効率的なクロスプラットフォーム エディターです。ブ...

IDEA Maven プロジェクトで Tomcat をデバッグ モードで実行する詳細なチュートリアル

1. pom.xmlに次の依存関係を追加します。 <依存関係> <groupId&...