 |
| HTML |
|---|
 |
| HTMLとそのバリエーション |
| HTML要素と属性 |
| 編集 |
| 文字エンコーディングと言語 |
| ドキュメントとブラウザモデル |
| クライアント側スクリプトとAPI |
| グラフィックスとWeb3Dテクノロジー |
| 比較 |
ウェブブラウザにおいて、フレームとはウェブページまたはブラウザウィンドウの一部であり、コンテナとは独立してコンテンツを表示し、独立してコンテンツを読み込む機能を持つものです。フレーム内の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" > <フレームなし> お使いのブラウザはフレームをサポートしていません。 フレーム 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 >歴史
![[アイコン]](/wiki/File:Wiki_letter_w_cropped.svg) | このセクションは拡張が必要です。不足している情報を追加していただければ幸いです。 （2008年1月） |
Netscape Navigator 2.0は1996年3月にフレームに使用される要素を導入しました。AppleとCyberdogなどの他のブラウザベンダーもその年の後半に追随しました。[ 2 ]当時、NetscapeはフレームをHTML 3.0標準に組み込むためにWorld Wide Web Consortium （W3C）に提案しました。 [ 3 ]
フレームは、初期のオンラインマガジンやウェブアプリ（ウェブメールサービス、ウェブチャットサイトなど）の表示とナビゲーションに使用されていました。フレームの利点は、サーバーサイドインクルードやCGIサポートといったサーバー機能を必要とせずに、サイト全体の要素を表示できることでした。これらの機能は、一般公開されていた初期のウェブサーバーでは一般的ではありませんでした。
初期のウェブサイトでは、スクロールできないバナーを表示するために、上部にフレームが使われることが多かった。これらのバナーフレームには、広告だけでなくサイトのロゴも含まれることがあった。[ 4 ]
HTML 4の後継として想定されていたXHTML 1.1では、すべてのフレームが削除されました。最終的な代替として想定されていたXFrames [ 5 ]は、フレームセットをアドレス指定するための 複合URIを提供しました。
その後のHTML5標準では、XHTMLとは異なる方法でフレームセットが削除されました。[ 6 ]この要素には、サイト間でコンテンツを共有するための「サンドボックスiframe」オプションがいくつか残っています。[ 7 ]
利点
フレームは、コンテンツを個別に読み込み、ナビゲートできるようにすることで、最初に開発されたときに使用されていたプレーン HTML に比べていくつかの利点がありました。
- ナビゲーションデータなど、すべてまたはほとんどのページで共有されるコンテンツのメンテナンスを簡素化します。[ 8 ]サイドバーナビゲーションメニューに項目を追加する必要がある場合、Webページ作成者は1つのWebページファイルのみを変更する必要がありますが、従来の非フレームセットWebサイトでは、サイドバーメニューがすべてのページに表示される場合は、各ページを個別に編集する必要があります。
- ページの変更されていない部分を再度ダウンロードしないことで、必要な帯域幅の量を削減します。
- 複数の情報を並べて表示し、各セクションを個別にスクロールできる機能。例えば、2枚の写真や動画を並べて比較したり、動画、画像、アニメーション、3D回転オブジェクトなどの横にテキストページを独立してスクロールさせるなど、2つの異なる方法で情報を把握したりすることが可能になります。
- 読者が本文でどこにいるのか分からなくなることがないように、リンクされたときに脚注や余談がページの専用セクションに表示されるようにします。
- フレームの主な利点は、ページの一部を固定したまま、他の部分をスクロールさせることができることです。これは、ナビゲーションオプションやバナー広告など、スクロールして見えなくしたくない要素に便利です。
- フレームは、別々のサーバーにあるリソースを統合します。例えば、フレームを使用して、独自の資料（およびナビゲーショングラフィック）を、生成されたスレッド化されたディスカッション資料と組み合わせることができます。
批判
HTMLコンテンツをフレーム化するという慣行は、多くの批判を招きました。そのほとんどは、ユーザビリティとアクセシビリティに関する懸念でした。具体的には、以下のような点が挙げられます。
- フレーミングは、ブラウザに表示されるコンテンツとURLの同一性を壊し、フレームセット内の特定のコンテンツ項目へのリンクやブックマークを困難にする[ 10 ]
- フレームの実装はブラウザによって異なる[ 10 ]
- コンテンツを線形にレンダリングするブラウザはフレームをうまく処理できません。[ 11 ]
- フレーミングはウェブインデックスを複雑にし、検索エンジン最適化に悪影響を及ぼす可能性があります。[ 13 ]
- フレーミングは異なるサーバー上のコンテンツ間の境界を混乱させ、[ 14 ]著作権侵害の問題を引き起こす[ 15 ]。
- 検索エンジンからアクセスした訪問者は、フレーム内に表示されるページにアクセスし、サイトの残りの部分に移動できなくなる可能性があります。[ 16 ]
- フレームは戻るボタンの動作を変更します。[ 16 ]
- ユーザーは通常、ブラウザがフレームをそのまま印刷することを期待していません。[ 15 ]
- フレームを使用するウェブページ上の外部リンクは、作成者が特に指定しない限り、リンクのデフォルトの動作として現在のフレームに読み込むため、他のページがフレームセット内に表示される可能性があります。悪質なウェブマスターは、これを悪用して、別のサイトのコンテンツが実際にはフレームセットをホストしているサイトの一部であるかのように見せかける可能性があります。
- 画面解像度やブラウザウィンドウのサイズが低すぎると、各フレームにスクロールバーが表示され、見た目が乱雑になり、限られたスペースをさらに圧迫する可能性があります。このような動作は、多くの場合、不適切なサイトデザイン（流動的なレイアウトではなく固定レイアウト）によって発生し、フレームセットのすべての機能が適切に活用されていないことが原因です。この動作は、以下の方法で軽減できます。
- 通常スクロールバーを必要としない小さなフレームのスクロールを無効にする。
- 対象ページでは固定デザインではなく流動的なデザイン特性を使用し、コンテンツによって水平スクロールバーが表示されないようにします。
安全
フレームは、同一オリジンポリシーの適用において、技術的およびユーザーインターフェース上の両方の問題を引き起こします。後者の例として、外側のページでユーザーを騙し、99%透明に設定された内側のページ（iframe要素を使用して読み込まれる）で操作を実行させてしまうことが挙げられます。
代替案
Web テクノロジが発展するにつれて、フレームが使用される目的の多くは、フレームに関連する問題を回避する方法で実現可能になりました。
- カスケードスタイルシート（CSS）を使用すると、ページの要素を独立してスクロールし
overflowたり（ プロパティを使用）、他のコンテンツがスクロールされている間も画面上に保持したり（ を使用position:fixed）できるようになりました。 - サーバーサイドインクルードにより、共有コンテンツを一度編集すると、完成したページの一部としてクライアントに自動的に配信できるようになりました。サーバーの CPU と接続速度が向上するにつれて、これをオンザフライで行うために必要な追加作業はそれほど重要ではなくなりました。
- CGIおよび Web 指向のスクリプト言語と、PHPやActive Server PagesなどのWeb 開発フレームワーク、およびWordPressなどのデータベース ベースのコンテンツ管理システムは、コンテンツの維持とナビゲーションの提供に関して、より豊富なオプションを提供しました。
- クライアントサイドスクリプティングとダイナミックHTMLにより、ページの一部をユーザーの操作に基づいて視覚的に置き換えることが可能になりました。これにより、脚注や説明などの「サイド」コンテンツを、事前に定義されたフレームを必要とせずにページ上の任意の場所に表示したり非表示にしたりできるようになり、表示の柔軟性が大幅に向上しました。
- AJAX を使用すると、ログインしたユーザーや他の場所でのイベントに基づいてサーバーから取得する必要がある場合でも、コンテンツのページ内で動的な表示が可能になります。
参照
参考文献
- ^ 「他のウェブサイトへの接続」 2013年4月2日。
フレーミングの特徴は、ユーザーをリンク先のウェブサイトに誘導するのではなく、リンク先のウェブサイトの情報が元のページにインポートされ、特別な「フレーム」内に表示されることです。技術的には、フレーム化された情報を表示しているとき、コンピューターはフレーム化を行っているサイトに接続されており、フレーム内にページが表示されているサイトには接続されていません。
- ^ 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 Wizardry . スコッツデール, AZ: 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日閲覧。
- ^ a bニールセン、ヤコブ（1996年12月）。「フレームはほとんどの場合役に立たない」。
- ^ 「フレームを使うべきか？」 HTMLコードチュートリアル。2016年8月6日時点のオリジナルよりアーカイブ。2010年4月7日閲覧。
- ^ 「GEBoydのメールで何でもできる方法 – パート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” . 2002年3月28日時点のオリジナルよりアーカイブ。
- ^ a b「フレームはなぜそれほど邪悪なのか？」。
- ^ a b「Web ページにおけるフレームの長所と短所」。
外部リンク
