Loading article…
ウェブブラウザの文脈では、フレームはウェブページまたはブラウザウィンドウの一部であり、コンテナから独立してコンテンツを表示し、コンテンツを独立して読み込む機能を備えています。フレーム内のHTMLまたはメディア要素は、フレーム内のコンテンツを提供するサイトとは別のウェブサイトから取得される場合があります。この方法はフレーミングと呼ばれ、[1]今日では同一生成元ポリシーの違反と見なされることがよくあります。
HTMLでは、フレームセットは、Web ページやメディアを送信できる名前付きフレームのグループです。iframe は、ドキュメントの本文内にフレームを配置できるようにします。
2000 年代初頭以降、ユーザビリティとアクセシビリティへの懸念からフレームセットの使用は減少しており、HTML5標準ではフレームセットはサポートされていません。
タグと属性
HTML のフレームは、<frameset></frameset>タグ ペアを使用して作成されます。 タグ<frameset>は、フレームの作成に使用される他のすべてのタグのコンテナ タグです。タグは、フレームセット ドキュメントの タグ<frameset>を置き換えます。 タグは、ウィンドウをフレームに分割する方法を定義します。
<body><frameset>
各フレームセットは行または列のセットを定義します。rows属性を使用してフレームを定義すると、水平フレームが作成されます。 を使用してフレームを定義するとcols、垂直フレームが作成されます。
この<noframes>要素を含めると、フレームが無効になっている Web ブラウザー (またはフレームをサポートしていないブラウザー) でユーザーに何かを表示できるようになります。次に例を示します。
<フレームセット cols = "85%, 15%" >
<フレーム src = "http://www.example.com/frame_1.html" 名前= "frame_1" >
<フレーム src = "http://alt.example.com/frame_2.html" 名前= "frame_2" >
< noframes >
お使いのブラウザはフレームをサポートしていません。
フレーム 1 を表示するには、
< a href = "http://www.example.com/frame_1.html" >ここをクリック< / a >してください。フレーム 2 を表示するには、
< a href = "http://alt.example.com/frame_2.html" >ここをクリック</ a >してください。 </ noframes >
</ frameset >
フレームセットborderには属性があります。0 より大きい整数に設定すると、noresizeフレーム要素に属性が存在しない限り、ユーザーはこの境界線をドラッグしてフレームのサイズを変更できます。境界線が 0 に設定されている場合、境界線は表示されず、異なるフレームのコンテンツは区別なく互いに接します。
要素iframeは通常の HTML 本文内でインラインで使用され、frame要素と同様に初期コンテンツと名前を定義します。タグ ペア内のテキストは、<iframe></iframe>iframe タグを理解しないブラウザーに表示されます。
< iframe src = "http://www.example.com/frame_1.html" height = "480" width = "640" >
お使いのブラウザは iframe をサポートしていません。< a href = "http://www.example.com/frame_1.html" >コンテンツを表示するには、
ここ</ a >をクリックしてください。 </ iframe >
歴史
Netscape Navigator 2.0 は 1996 年 3 月にフレームに使用される要素を導入しました。Apple やCyber dogなどの他のブラウザ ベンダーもその年の後半に追随しました。[ 2]当時、Netscape はフレームをHTML 3.0 標準に含めるようWorld Wide Web Consortium (W3C) に提案しました。 [3]
フレームは、初期のオンライン マガジンや、Web メールサービスやWeb チャットサイトなどのWeb アプリケーションを表示およびナビゲートするために使用されていました。フレームの利点は、サーバー側インクルードやCGIサポートなどのサーバー機能を必要とせずに、サイト全体に要素を表示できることです。これらの機能は、一般にアクセス可能な初期の Web サーバーでは一般的ではありませんでした。
初期のウェブサイトでは、スクロールできないバナーを表示するために上部のフレームがよく使用されていました。これらのバナーフレームには、広告だけでなくサイトのロゴも含まれることがありました。[4]
HTML 4の後継として意図されていたXHTML 1.1では、すべてのフレームが削除されました。最終的な代替として意図されていたXFrames [5]は、設定されたフレームセットをアドレス指定するための複合URIを提供しました。
その後のHTML5標準では、XHTMLとは異なる方法でフレームセットが削除されました。[6]このiframe要素には、サイト間でコンテンツを共有するためのいくつかの「サンドボックス」オプションが残っています。[7]
利点
フレームは、コンテンツを個別に読み込み、ナビゲートできるようにすることで、最初に開発されたときに使用されていたプレーン HTML に比べていくつかの利点を提供しました。
- ナビゲーションデータなど、すべてのページまたはほとんどのページで共有されるコンテンツのメンテナンスを簡素化します。[8]サイドバーナビゲーションメニューにアイテムを追加する必要がある場合、Webページの作成者は1つのWebページファイルのみを変更する必要がありますが、従来の非フレームセットWebサイトでは、サイドバーメニューがすべてのページに表示される場合は、各ページを個別に編集する必要があります。
- ページの変更されていない部分を再ダウンロードしないことで、必要な帯域幅の量を削減します。
- 複数の情報を並べて表示し、各セクションを個別にスクロールできるようにします。これには、2 つの画像またはビデオを並べて比較することや、ビデオ、画像、アニメーション、3D 回転オブジェクトなどの横に独立してスクロールするテキスト ページなど、何かを理解するための 2 つの異なる方法が含まれます。
- 脚注や余談がリンクされたときにページの専用セクションに表示されるようにすることで、読者が本文でどこにいるのかを見失うことがなくなります。
- フレームの主な利点は、ページの一部を固定したまま、他の部分をスクロールできることです。これは、ナビゲーション オプションやバナー広告など、スクロールして見えなくしたくない要素に役立ちます。
- フレームは、別々のサーバーにあるリソースを統合します。たとえば、フレームを使用して、独自の資料（およびナビゲーショングラフィック）を、生成されたスレッド化されたディスカッション資料と組み合わせることができます。
[9]
批判
HTML コンテンツをフレーム化するという慣行は、多くの批判を招きましたが、そのほとんどは、ユーザビリティとアクセシビリティに関する懸念に集中していました。これには次のものが含まれます。
- フレーミングはブラウザに表示されるコンテンツとURLの同一性を壊し、フレームセット内の特定のコンテンツにリンクしたりブックマークしたりすることが困難になります[10]
- フレームの実装はブラウザによって異なる[10]
- マテリアルを線形にレンダリングするブラウザはフレームをうまく処理できません。[11]
- フレーミングはウェブインデックスを複雑にし、検索エンジン最適化に悪影響を及ぼす可能性があります。[13]
- フレーミングは異なるサーバー上のコンテンツ間の境界を混乱させ、[14]著作権侵害の問題を引き起こす[15]
- 検索エンジンからアクセスした訪問者は、フレーム内に表示することを目的としたページにアクセスし、サイトの残りの部分に移動できなくなる可能性がある[16]
- フレームは戻るボタンの動作を変更します。[16]
- ユーザーは通常、ブラウザがフレームをそのまま印刷することを期待していません。[15]
- フレームを使用する Web ページ上の外部リンクにより、他のページがフレームセット内に表示される場合があります。これは、作成者が特に指定しない限り、リンクのデフォルトの動作は現在のフレーム内に読み込まれるためです。悪意のある Web マスターは、これを利用して、別のサイトのコンテンツが実際にはフレームセットをホストしているサイトの一部であるかのように見せかける可能性があります。
- 画面解像度またはブラウザ ウィンドウのサイズが低すぎると、各フレームにスクロール バーが表示され、見た目が乱雑になり、すでに限られたスペースがさらに消費される可能性があります。このような動作は、通常、フレームセットのすべての機能が適切に使用されていない不適切なサイト デザイン (流動レイアウトではなく固定レイアウト) によって発生します。
この動作は、次の方法で軽減できます。- 通常スクロールバーを必要としない小さなフレームのスクロールを無効にする。
- 対象ページで固定デザインではなく流動的なデザイン特性を使用することで、コンテンツによって水平スクロールバーが発生しないようにします。
安全
フレームは、同一生成元ポリシーの施行において、技術的およびユーザー インターフェースの両方の難しさを生み出します。後者の例として、外部ページがユーザーを騙して、99% 透明にされた内部ページ (iframe 要素を使用して読み込まれる) でアクションを実行させる場合があります。
代替案
Web テクノロジが発展するにつれて、フレームが使用される目的の多くは、フレームに関連する問題を回避する方法で実現できるようになりました。
- カスケードスタイルシート（CSS）では、ページの要素を独立してスクロールしたり（
overflowプロパティを使用）、他のコンテンツがスクロールされている間も画面上に保持したり（ を使用position:fixed）することができました。 - サーバーサイド インクルードにより、共有コンテンツを一度編集すると、完成したページの一部としてクライアントに自動的に配信できるようになりました。サーバーの CPU と接続速度が向上するにつれて、これをオンザフライで行うために必要な余分な作業はそれほど考慮されなくなりました。
- CGIや Web 指向のスクリプト言語、PHPやActive Server PagesなどのWeb 開発フレームワーク、およびWordPressなどのデータベース ベースのコンテンツ管理システムは、コンテンツの維持とナビゲーションの提供のためのより豊富なオプションを提供しました。
- クライアント側スクリプトとダイナミック HTMLにより、ユーザーのアクションに基づいてページの一部を視覚的に置き換えることができるようになりました。これにより、脚注や説明などの「サイド」コンテンツを、事前に定義されたフレームを必要とせずにページ上の任意の場所に表示したり非表示にしたりできるようになり、より柔軟に表示できるようになりました。
- AJAX を使用すると、たとえばログインしたユーザーや他の場所でのイベントに基づいて、サーバーからコンテンツを取得する必要がある場合でも、ページ内のコンテンツを動的に表示できます。
参照
参考文献
- ^ 「他の Web サイトへの接続」。2013 年 4 月 2 日。
フレーミングが他のサイトと異なるのは、ユーザーをリンク先の Web サイトに誘導するのではなく、その Web サイトの情報が元のページにインポートされ、特別な「フレーム」内に表示される点です。技術的には、フレーム化された情報を表示しているとき、コンピューターはフレーム化を行っているサイトに接続されており、フレーム内にページが表示されるサイトには接続されていません。
- ^ Garaffa, Dave (1996 年 12 月 23 日). 「Apple からのプレゼント: Cyberdog 2.0a1」(プレス リリース). Internet.com . 2000 年 8 月 17 日時点のオリジナルよりアーカイブ。2011 年4 月 14 日閲覧。
- ^ Ladd, Eric. 「HTML 3.2、Java 1.1、CGI の使用; 第 13 章、フレーム」。2007 年 10 月 30 日時点のオリジナルよりアーカイブ。
- ^ Shafer, Dan (1996). JavaScript と Netscape の魔法。スコッツデール、アリゾナ州: Coriolis Group Books。pp. 31。ISBN 978-1-883577-86-5。
- ^ 「XFrames ワーキングドラフト」。W3C。
- ^ HTML5 と HTML4 の違い: 「次の要素は、使用するとユーザビリティが損なわれるため、HTML5 には含まれていません: frame、frameset、noframes」
- ^ HTML5 と HTML4 の違い: 「iframe 要素には、ブログのコメントなどのコンテンツのサンドボックス化を可能にする sandbox および srcdoc という新しい属性があります。」
- ^ 「フレームセット」。
- ^ Roberts, L, John. 「CSS と SEO」。2022 年1 月 28 日閲覧。
- ^ ab Nielsen, Jakob (1996 年 12 月)。「フレームはほとんどの場合役に立たない」。
- ^ 「フレームを使用するべきか?」 HTML コードチュートリアル。2016 年 8 月 6 日時点のオリジナルよりアーカイブ。2010年4 月 7 日閲覧。
- ^ 「GEBoyd の How To Do Just About Anything by email – Part 1」。GeoCities。2000年 8 月 11 日。2000 年 8 月 17 日時点のオリジナルよりアーカイブ。2010年6 月 24 日閲覧。
- ^ Moore-Eded, Piers. 「SEO の基礎 1」。Lewes SEO。2012年2 月 25 日閲覧。
- ^ 「I Hate Frames Club」.
- ^ ab 「なぜフレームはそんなに邪悪なのか？」
- ^ ab 「Web ページにおけるフレームの長所と短所」。
外部リンク
- HTML ヘルプ: フレームの何が問題なのですか?
- Dan の Web ヒント: フレーム
- コンテンツのフレーミングを防止するために設計されたスクリプト