framesetやframeはHTML5で廃止されてしまいましたが、業界によっては今でもframesetで構成されたwebページを利用している場合があります。そこで、framesetと同様な動作のページをframesetを使わず、iframeで作ってみました。

html4のframeset

元になるhtml4のframesetを使ったサンプルページ（frame_sample.html）です。
画面を二分割し、左側がナビゲーションでスクロール無し。右側がナビゲーションに対応した内容表示で、スクロール有りというスタイルです。

framesetを使ったサンプルページのhtmlソース

<frameset cols="210,*">
	<frame src="f_left.html" name="left">
	<frame src="f_right.html" name="right">
	<noframes>
		このページはフレームを使用しています。
	</noframes>
</frameset>

 

iframeを使ったHTML5のframeset風

iframeを使って作ったframeset風サンプルページ（frame_sample2.html）です。
html4のframesetとほぼ同様のスタイルにしています。二分割の境を分かりやすくするため2pxのボーダーを入れています。左右のiframeに入れた外部ページは、html4のframesetと同じものを使っていますので、今までの資源を無駄にせず、そのまま利用することが可能です。

iframeを使ったHTML5のframeset風サンプルページのhtmlソース

 <div id="left">
	<iframe src="f_left.html"></iframe>
 </div>
 <div id="right">
	<iframe src="f_right.html"></iframe>
 </div>

iframeを使ったHTML5のframeset風サンプルページのCSSソース

  #left {
	position: absolute;
	top: 0;
	left: 0px;
	width: 220px;
	height: 100%;
	text-align: center;
	}
  #right{
	position: absolute;
	top: 0;
	right: 0;
	left: 220px;
	height: 100%;
	border-left: 2px solid #ccc;
	}
  iframe {
	border: none;
	height: 100%;
	width: 100%;
	}