HTML/フレーム
フレームとは、複数個に分割した画面に、それぞれ別のページを表示する機能。
本来はページ分割が主な用途だったのかもしれないが、現在ではフレームの用途としては、あるHTMLファイルで書かれたwebページ内において、別のHTMLファイルの内容を表示することにフレーム機能が流用されている。
HTML4まではframeset要素が使われてきたが、HTML5ではインラインフレーム iframe 以外のフレーム関係要素が廃止された。
よってHTML5ではコンテンツの分割は iframe 要素や CSS を用いて実現する。
作成方法

フレームには、最低3つのHTMLファイルが必要になる。説明の単純化のため、画面をフレームで2分割した場合を例に述べる。
作成方法

フレーム構成ファイルによって分割の縦横とサイズを設定し、参照者にはこのファイルを参照させる。
作成方法

のこり二つのファイルは、メニューやメインコンテンツ表示に利用される。「フレームに表示するファイル」はリンクターゲットなどの一部を除いて通常のページと同一である。ここではフレームの構成を行うファイルについて説明する。
基本的なノウハウ

DTDはStrictやTransitionalではなくFramesetを利用。フレームの設定を行うHTMLファイルは、body要素の変わりにframeset要素を使っているため、html要素直下にbody要素をおくことができない。ただしnoframes要素直下にbody要素の記述が必須とされている。
基本的なノウハウ

frameset要素によってフレーム集合を作成することを宣言し、どのようにフレーム集合を配置するか設定できる。フレーム集合の要素のレイアウトの設定には以下の属性を使用することが可能となっている。
framesetのCSS対応への改修コード例

概ね2015年以降にリリースされたブラウザはすべて Flexbox 機能をサポートしており、IFRAME要素と組み合わせることでフレームセットをよくイミュレート出来る。
framesetのCSS対応への改修コード例

ウィンドウ幅を縮小しても、それにあわせてインラインフレームも等比で縮小される。
framesetのCSS対応への改修コード例

現在サポートされていないほど古いブラウザも対応しており。また2018年11月にリリース候補が、W3Cより発行された。
framesetのCSS対応への改修コード例

width属性に20%と75%で合計95%であり100%よりも小さいが、これはCSSを無視された場合のフォールバックで Flexbox に対応したウェブブラウザであれば CSS によりレイアウトが上書きされ、レンダリングには影響しない。
framesetのCSS対応への改修コード例

CSS grid はページのレイアウトをCSS側で2次元的に配置位置を決める方法の一種である。
framesetのCSS対応への改修コード例

下記のようなコードになる。
framesetのCSS対応への改修コード例

コード例
framesetのCSS対応への改修コード例

「grid-template-columns: 1fr 4fr;」とあるが、これは ページの分割の比率が、ヨコ方向に、比率 1:4 ということ。つまり 左から順番に 20% と 80% である。
framesetのCSS対応への改修コード例

iframe 側のwidth属性及びheight属性はCSSに対応していないウェブブラウザのためのフォールバックで、100%より小さい寸法を height と width の両方に入れることになる。100%ぴったりに指定してもはみ出してしまうのでスクロールボタンが出現してしてしまい見苦しいので95%に減らしてある。CSSに対応したブラウザでは grid-template-columns: 1fr 4fr;がカラム方向のレイアウトを司る。
framesetのCSS対応への改修コード例

なお、下記のように、classを追加して、iframeのサイズ設定をクラスにマトメることもできる。
framesetのCSS対応への改修コード例

別のコード例
framesetのCSS対応への改修コード例

このほか、
framesetのCSS対応への改修コード例

みたいな指定でも、boxクラス内で使われる iframe すべてに同じ適用をする事ができるが、しかし可読性が悪いし、もし例外的にこの設定を使いたくない場合が生じた時には不便なので、この方式(.box iframe みたいな方式)については説明を省略する。
framesetのCSS対応への改修コード例

※ IFRAME要素のwidth属性はピクセル指定のみ。
framesetのCSS対応への改修コード例

スタイルシートのCSSで、あるまとまりのプロパティ設定で position: fixed; に指定する事で、レイアウトの表示位置を固定する方法があるので、片方のフレームが小さい場合には、フレームをCSSの position: fixed; に置き換えることにより、同様フレームの代替に使える。(具体的な方法については wikibooks『CSS/背景』を参照せよ。)
HTML4まで

frame要素では各フレームに表示するHTMLファイルを指定する。frame要素ひとつにつきひとつのフレームの設定を行うことが出来る。設定可能な数に限度はないが、余りたくさんのフレームを指定すれば当然ながらブラウザの読み込み量が不必要に増大したり可読性を下げることもある。以下は使用可能な属性。
HTML4まで

noframes要素はフレーム対応環境だと無視され、<noframes>〜</noframes>の内容はフレーム未対応環境でのみその内容が表示される。しばし<frameset>〜</frameset>の外に記述されることがあるがこれは誤りであり、<frameset>〜</frameset>の間に記述しなければならない。
HTML4まで

noframes要素の直下にはbody要素を置き(必須)、そこから通常と同じ形式でページを作成する。特に決まった内容形式は存在しないがフレームを使用した場合の代替となるコンテンツを用意すべきであり、「フレーム対応のブラウザで閲覧してください」などと書くのは好ましくない。
HTML4まで

フレームを使用する際は必ず境界線が生じるが、framesetに以下の属性を加えることによりこの境界線をカスタマイズすることができる。
HTML4まで

この場合、境界線は設置され、サイズは5ピクセル、色は赤で表示される。
HTML4まで

frameset要素とframe要素をうまく組み合わせることで、上下左右を織り交ぜた複雑な構成も利用可能である。例えば単純に同じ方向へ三分割したい場合はframeset要素内でframe要素を三つ使うことも出来るが、frameset要素をframe要素を入れることで二分割と三分割を切り替えられるようにすることも出来る。また、異なる方向への分割や、十字に区切らない形式での四分割を行う場合もframeset要素内にframeset要素を入れ子にし、既存のフレームをさらに分割するという方法が用いられる。
インラインフレーム

インラインフレームとは、HTML文書の中にフレームを埋め込む方法で、iframe要素を利用する。
インラインフレーム

最低限必要な属性は以下の3つである。
インラインフレーム

<iframe>〜</iframe>の間にある内容はインラインフレーム対応環境だと無視され、未対応環境でのみ表示される。frameset要素のときに使われるnoframes要素同様、可能な範囲で代替的な内容を記述することが好ましい。
インラインフレーム

属性として以下を設定できる。太字がデフォルトの値である。