HTML/フレーム

出典: フリー教科書『ウィキブックス（Wikibooks）』
ナビゲーションに移動 検索に移動
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 lang="ja">
   <head>
      <meta http-equiv="content-type" content="​text/html; charset=UTF-8">
      <title>フレーム</title>
   </head>
   <frameset cols="200,*">
      <frame src="menu.html" id="left">
      <frame src="main.html" id="right">
      <noframes>
         <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対応への改修コード例[編集]

flexbox[編集]

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

ウィンドウ幅を縮小しても、それにあわせてインラインフレームも等比で縮小される。 

<!DOCTYPE html>
<html lang="ja">
   <head>
      <meta charset="utf-8">
      <title>ページ左右分割のコード例</title>
      <style>
         body {
             margin: 0;
             border: 0;
         }
         .box {
             display: flex;
     　　    margin: 0;
         　　border: 0;
             flex-direction: row;
             height: 100%;/*100vhに対応していないウェブブラウザ用のフォールバック*/
             height: 100vh;
             margin: 0;
         }
        iframe {
             margin: 0;
             border: 0;
             height: 100%;
         }
         left-side {
             width: 20vw;
             flex-grow: 2;
         }
         right-side {
             width: 80vw;
             flex-grow: 8;
         }
      </style>
   </head>
   <body>
      <div class="box">
         <iframe src="ここにリンク先のページAのURL" id="left-side" name="left-side"  width="20%"></iframe>
         <iframe src="ここにリンク先のページBのURL" id="right-side" name="right-side" width="75%"></iframe>
      </div>
   </body>
</html>

現在サポートされていないほど古いブラウザ[1]も対応しており[2]。また2018年11月にリリース候補が、W3C[3]より発行された[4]。

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

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" id="left-side" name="left-side" height="95%" width="95%"></iframe>
		<iframe src="ここにリンク先のページBのURL" id="right-side" name="right-side" height="95%" width="95%"></iframe>
	</div>
</body>

</html>


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

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

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

別のコード例 

<!DOCTYPE html>
<html lang="ja">
   <head>
      <meta charset="utf-8">
      <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" id="left-side" name="left-side" class="framesize"></iframe>
         <iframe src="ここにリンク先のページBのURL" id="right-side" name="right-side" class="framesize"></iframe>
      </div>
   </body>
</html>

このほか、 

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

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

float[編集]

<!DOCTYPE html>
<html lang="ja">
   <head>
      <meta charset="utf-8">
      <title>ページ左右分割のコード例</title>
      <style>
         .left {
         float: left;
         height: 500px;
         width: 30%;
         }
         .right {
         float: right;
         width: 60%;
         }
      </style>
   </head>
   <body>
      <div class="left">
         <iframe src="left-side.html" id="left-side" name="left-side" width="300" height="600"></iframe>
      </div>
      <div class="right">
         <iframe src="right-side.html" id="right-side" name="right-side" width="300" height="600"></iframe>
      </div>
   </body>
</html>

※ IFRAME要素のwidth属性はピクセル指定のみ。

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

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

HTML4まで[編集]

frame要素[編集]

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

src
フレームとして初期状態で表示するファイル名を入力する。
id
フレームに名前を付けるもので、記述は任意。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" id="top">
		<frameset rows="20%,80%">
			<frame src="menu.html" id="left">
				<frame src="main.html" id="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宣言やブラウザの種類によって変化する。

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

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

id
インラインフレームの名前であり、使い方はフレームの場合と同様である。
align
値はleft center right。インラインフレームの表示位置を左揃え・中央揃え・右揃えから設定する。
scrolling
値はauto yes no。スクロールバーを表示/非表示を設定する。autoはブラウザがファイルの長さに応じて判断する。
frameborder
値は1 0。フレームの境界線の有無を設定する。
marginwidth
値はピクセル単位の数値。フレームの左右の余白を設定する。
marginheight
値はピクセル単位の数値。フレームの上下の余白を設定する。
noresize
属性名は省略できる。フレームのリサイズを禁止する。
このページ「HTML/フレーム」は、まだ書きかけです。加筆・訂正など、協力いただける皆様の編集を心からお待ちしております。また、ご意見などがありましたら、お気軽にトークページへどうぞ。
  1. ^ 例えば、Chomium版でないEdgeHTML版の Microsoft Edge（2015年リリース；2020年サポート終了）でも Flexboxに対応している。
  2. ^ https://caniuse.com/flexbox によると2021年6月12日現在対応しているブラウザのグローベルシェアは 99.55%。またIE11のサポート終了は2022年6月。
  3. ^ W3CはXHTML2の標準化を断念、HTMLとDOMの規格制定の主体の座ををWHATWGに譲っている。See: Web標準
  4. ^ https://www.w3.org/TR/css-flexbox-1/ CSS Flexible Box Layout Module Level 1 W3C Candidate Recommendation, 19 November 2018
"https://ja.wikibooks.org/w/index.php?title=HTML/フレーム&oldid=186216" より作成