HTML/フレーム

HTML > HTML/フレーム

フレームとは、複数個に分割した画面に、それぞれ別のページを表示する機能。

本来はページ分割が主な用途だったのかもしれないが、現在ではフレームの用途としては、あるHTMLファイルで書かれたwebページ内において、別のHTMLファイルの内容を表示することにフレーム機能が流用されている。

従来まではframesetが頻繁に使われてきたが、html5ではインラインフレーム iframe 以外のフレーム関係タグが廃止された。

html5では、分割サイズの指定は、主にCSS側で指定するのが普通になっている。

作成方法[編集]

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

フレームの構成（組み込みの設定）を行うファイル。
一つ目のフレームに表示するファイル一つめ。
二つ目のフレームに表示するファイル二つめ。

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

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

基本的なノウハウ[編集]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>

<head>
	<title>フレーム</title>

	<frameset cols="200,*">
		<frame src="menu.html" name="left">
			<frame src="main.html" name="right">
				<noframes>
</head>

<body>
	<a href="info.html">インフォメーション</a><br>
	<a href="howto.html">たこ焼きの作り方</a><br>
	<a href="bbs.cgi">掲示板</a>
</body>
</noframes>
</frameset>

</html>

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

frameset要素によってフレームを作成することを宣言し、どのようにフレームを配置するか設定することが出来る。フレームの設定には以下の要素を使用することが可能となっている。

cols: 左右の分割比を設定。上記事例の場合200ピクセルを左ページにとり、残りを右ページに取るという意味である。; 分割比の取り方を20%,*とした場合、画面の20%を左ページに取り、残りを右ページに取る。3つ組み合わせて20%,*,5%とすることも出来る。
rows: 上下の分割比を設定する。分割形式はcols属性と同様。単体で利用されることが多いがcols属性との併用が不可能と言うわけではなく、cols属性と同時に利用することで十字に四分割したフレームを構成することも可能となっている。

framesetのCSS対応への改修コード例[編集]

結論から言うと、2020年現在ではまだ、framsesetで書かれたファイルはそのままにしておいたほうが良い。

なぜなら、本来なら代替技術であるべきHTML新規格の flexbox や CSS grid がまだ、win7初期あたりの古いブラウザでは読み取れない可能性が高いからである。（win7はサポート停止したが、世間のパソコンでは、まだ使用され続けているのが現状。）

しかし、今後、windows8.1などがサポート停止するころ（2023年）には、flexbox や CSS grid などに置き換えるのも良いかもしれない。

CSSの float 機能は、資料が不足していたり、flexboxよりも記述が長くなることもあり、メンテナンス性も悪いので、単に図画を横一列に並べる程度の用途なら、あまり float は使わないほうがイイ。

さて、2020年以降の今後もページを左右に分割したい場合にフレーム(iframe)を使う機会が多いだろう。かつてframesetタグで、ページを左右にフレーム分割するコードが、よくあった。（なお、2020年現在のwebブラウザ（Firefoxなど）でもframesetはサポートしている。）

W3Cが規格からframeset廃止を決めても、ブラウザ側が従っていないようである。

もしhtml5のiframeに移植するなら、似たような機能をもつhtml5コード例は、下記のようになる。なお、完全にframesetと同じ機能を持つのは、下記コードでは無理である。（このような事情もあってか、ブラウザ側がW3Cの勧告に従ってないのだろう）

flexbox[編集]

最近のブラウザは flexbox というのをサポートしているので、コレを使うと簡単に書ける。また、%表示にも、よく対応している。FirefoxもGoogle Chrome も既に対応している。

ウィンドウを小さくしても、それに合わせてフレーム（のようなもの）の表示欄も小さくなる。CSS 3 にも規定されている。

<html>

<head>
	<title>ページ左右分割のコード例</title>

	<style type="text/css">
		.box {
			display: flex;
			flex-direction: row;
			height: 100%;
			margin: 0;
		}
	</style>
</head>

<body style="margin:0">
	<div class="box">
		<iframe src="ここにリンク先のページAのURL" name="hidari" width="20%"></iframe>
		<iframe src="ここにリンク先のページBのURL" name="migi" width="75%"></iframe>
	</div>
</body>

</html>

ただし、比較的に新しい技術なので、古いブラウザは対応していない。まだW3Cには正式採用されていない、候補技術の規格の段階である。

20%と75%で合計95%であり、100%よりも小さいが、これは余白の計算をラクにするためである。

iframeを使うとき、余白のぶんだけ指定した数値などよりも大きく表示される場合があり、その場合、複数コンテンツの幅の合計幅が100%を超えると、超えた分は改行されて下段に表示されてしまう。

いちおう margin: 0; で周囲の余白を0に出来るハズなのだが、念のため、100%よりも小さい数字になるようにしている。

flexbox は、ウィキペディアでいう garely タグに機能が似ており、複数個もある対象物を、表示欄のハジッコにいくまで対象物を並べることができ、表示欄のハジまで行ったら、次の対象物は改行されるなどして、次の段に並ぶ。

このため、何個目で改行するかは指定できない。

もし、何個目で改行したいかを指定したい場合、flexbox ではなく、後述の CSS grid による配置にすべきである。

余談だが、本ページで紹介している手法でもある flexbox または後述の CSS grid にインラインフレームを組み合わせ手法は、けっして当wikibooks独自の手法ではなく、市販の書籍でも紹介されている手法であり、例えば『1冊ですべて身につくHTML & CSS と Webデザイン入門講座』（出版: SBクリエイティブ、著者: Mana）でも、類似の手法が使われている^[1]。

name 属性とは[編集]

さて、name という属性が上記コード例や以降のコード例などにあるが、name とはフレームに名前をつける機能である。では、なんの目的のために使うかと言うと、リンク先htmlなどでソースの内容を、左右どちらのフレームに表示するかを target 属性などで指定する機能があるので、その際に呼び出し元ファイルで、各ファイルに name が必要になる。

なお、ツイッターなどいくつかのwebサイトではフレーム内でのサイト呼び出しを認めてないので（リンクをクリックしてもフレーム内に空白ページが表示されるだけ）、その場合の解決策としては、

target="_top"

とリンク時にタグ属性で指定すると、リンクのクリック時にフレーム解除されてページ全体表示になるので、ツイッターなどにもリンクできるようになる（現在のタブに表示する）。

なお、

target="_blank"

だと、新しいタブに表示する。

iframe だけ関わらず、後述の frameset でも、name や target の機能は同様である。

CSS grid[編集]

CSS grid はページのレイアウトをCSS側で2次元的に配置位置を決める方法の一種である。

下記のようなコードになる。

コード例

<html>

<head>
	<title>ページ左右分割のコード例</title>

	<style type="text/css">
		.box {
			display: grid;
			grid-template-columns: 1fr 4fr;
			height: 95%;
			margin: 0;
		}
	</style>
</head>

<body style="margin:0">
	<div class="box">
		<iframe src="ここにリンク先のページAのURL" name="hidari" height="95%" width="95%"></iframe>
		<iframe src="ここにリンク先のページBのURL" name="migi" height="95%" width="95%"></iframe>
	</div>
</body>

</html>

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

iframe 側の%は、この CSS grid を基準にした大きさなので、100%ちかい数字を height と width の両方に入れることになる。もし 100%ぴったりに指定しても、少々はみ出してしまうのでスクロールボタンが出現してしてしまい見苦しいので、95%に減らしてある。

別のコード例

なお、下記のように、classを追加して、iframeのサイズ設定をクラスにマトメることもできる。

<html>

<head>
	<title>ページ左右分割のコード例</title>

	<style type="text/css">
		.box {
			display: grid;
			grid-template-columns: 1fr 4fr;
			height: 95%;
			margin: 0;
		}

		.framesize {
			height: 95%;
			width: 95%;
		}
	</style>
</head>

<body style="margin:0">
	<div class="box">
		<iframe src="ここにリンク先のページAのURL" name="hidari" class="framesize"></iframe>
		<iframe src="ここにリンク先のページBのURL" name="migi" class="framesize"></iframe>
	</div>
</body>

</html>

このほか、

.box iframe{
  height: 95%;
  width: 95%;
}

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

float[編集]

<html>

<head>
	<title>ページ左右分割のコード例</title>

	<style type="text/css">
		.left {
			float: left;
			height: 500px;
			width: 30%;
		}

		.right {
			float: right;
			width: 60%;
		}
	</style>
</head>

<body>
	<div class="left">
		<iframe src="hidari.html" name="hidari" width=95% height="600"></iframe>
	</div>
	<div class="right">
		<iframe src="migi.html" name="migi" width=95% height="600"></iframe>
	</div>
</body>

</html>

解説

「.left」や「.right」は、単なるクラス名なので、別に他の名前でも良い。

しかし、「float: left;」はそういうコマンド名なので、このまま使う。

position: fixed; による代替[編集]

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

JavaScriptによるウィンドウ幅の取得[編集]

JavaScript には document.getElementById というウィンドウの幅を取得できる関数がある。もし、なんらかのトラブルで%表示がうまくいかない場合、原理的にはコレを用いて、上述のフレームなどの幅を、ウィンドウ幅に合わせて調節することもできる。

もし、そのようなトラブルの場合、 document.getElementById で取得した幅の変数値を、innerHTML というHTML代入（数値などをHTMLに代入して置換表示する. ソース書き換えはしない）のための関数をつかって、CSSに代入すればいい。

HTML4まで[編集]

frame要素[編集]

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

src: フレームとして初期状態で表示するファイル名を入力する。
name: フレームに名前を付けるもので、記述は任意。a要素でリンクを張る際に表示先のフレームを指定する際に使用する。詳しくはHTML/ハイパーリンク#リンクターゲットを参照されたい。

noframes要素[編集]

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

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

フレームの装飾[編集]

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

frameborder: 値は1か0、またはyesかno。境界線を表示する/表示しないを設定できる。
borderとframespacing: 値は数値。境界線サイズをピクセル単位で指定する。ブラウザによって対応がまちまちなため、両方とも同じように設定すると良い。
bordercolor: 値は色。

<FRAMESET cols="200,*" frameborder="1" border="5" framespacing="5" bordercolor="#ff0000">

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

三分割以上のフレーム[編集]

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>

<head>
	<title>フレーム</title>
</head>
<frameset cols="200,*">
	<frame src="head.html" name="top">
		<frameset rows="20%,80%">
			<frame src="menu.html" name="left">
				<frame src="main.html" name="right">
					<noframes>

						<body>
							<a href="info.html">インフォメーション</a><br>
							<a href="howto.html">たこ焼きの作り方</a><br>
							<a href="bbs.cgi">掲示板</a>
						</body>
					</noframes>
		</frameset>
</frameset>

</html>

インラインフレーム[編集]

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
	<title>インラインフレーム</title>
</head>

<body>
	<iframe src="test.html" width="300" height="200">
		未対応環境用の内容
	</iframe>
</body>

</html>

最低限必要な属性は以下の3つである。

src: インラインフレームの中に表示するファイル名を指定する。
width: 横幅を指定する。 %単位で指定を行うことによりウインドウ幅に合わせた設定が可能である。ただし小さ目の数値（割合）を指定した場合、ウインドウサイズやスクリーンサイズの小さい環境で極端に幅が狭くなり可読性を損なうことがあるので注意したい。
height: 高さを指定する。%単位で指定を行うことが出来るが、親要素の値がauto（height無指定）だった場合、フレームの高さが画面全体に広がるかどうかはDOCTYPE宣言やブラウザの種類によって変化する。

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

name: インラインフレームの名前であり、使い方はフレームの場合と同様である。
align: 値はleft center right。インラインフレームの表示位置を左揃え・中央揃え・右揃えから設定する。
scrolling: 値はauto yes no。スクロールバーを表示/非表示を設定する。autoはブラウザがファイルの長さに応じて判断する。
frameborder: 値は1 0。フレームの境界線の有無を設定する。
marginwidth: 値はピクセル単位の数値。フレームの左右の余白を設定する。
marginheight: 値はピクセル単位の数値。フレームの上下の余白を設定する。
noresize: 属性名は省略できる。フレームのリサイズを禁止する。

このページ「HTML/フレーム」は、まだ書きかけです。加筆・訂正など、協力いただける皆様の編集を心からお待ちしております。また、ご意見などがありましたら、お気軽にトークページへどうぞ。

^ MAna『1冊ですべて身につくHTML & CSS と Webデザイン入門講座』、 SBクリエイティブ、2019年11月29日初版第6刷発行、259ページ

[1] MAna『1冊ですべて身につくHTML & CSS と Webデザイン入門講座』、 SBクリエイティブ、2019年11月29日初版第6刷発行、259ページ

[1]