<frameset>を使用したウィンドウのフレーム分割をやめてHTML5向けに対応してみる

#今更感があるけれども。

Webページで縦、横など画面分割したい場合、<frameset>を使うと簡単に実現することができる。

だけど、この<frameset>はHTML4用で、HTML5の定義としては破棄されている。
現時点の最新ブラウザでも問題なく分割表示はできるけど、いつか表示できなくなる可能性もある。

ということで、重い腰を上げHTML5版に修正してみた。

 

HTML4版 HTML5版


 
 
画面分割のセパレータをマウスで調整することはできないけど、それ以外はほぼほぼHTML5に移植できたので、サンプルHTMLソースを載せておきます。
 
 

HTML4版

こちら移植前の<frameset>使用版。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>タイトル</title>
<frameset COLS="20%,*">
	<frame src="menu.html" >
	<frame src="page1.html"l name="main">
</frameset>
</head>
</html>
menu.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
</head>
<body>
	<h1>メニュー</h1>
	<ul>
		<li><a href="page1.html" target="main">ページ1</a>
		<li><a href="page2.html" target="main">ページ2</a>
	</ul>
</body>
</html>
page1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
</head>
<body>
	<h1>ページ1</h1>
</body>
</html>
page2.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
</head>
<body>
	<h1>ページ2</h1>
</body>
</html>

 
 

HTML5版

<frameset>を使用せず、スタイルシートを使用してHTML5対応。

style.css
.baseFrame {
	display: flex;
	flex-direction: row;
	width: 99vw;
	height: 97vh;
}
.leftFrame {
	width: 20%;
	border: solid 1px;
}
.rightFrame {
	width: 80%;
	margin: 0 1px;
	padding: 10px;
	border: solid 1px;
	overflow: auto;
}
menu.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
	<h1>メニュー</h1>
	<ul>
		<li><a href="page1.html" target="_top">ページ1</a>
		<li><a href="page2.html" target="_top">ページ2</a>
	</ul>
</body>
</html>
page1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページ1</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="baseFrame">
	<div class="leftFrame"><iframe src="menu.html" frameborder="0" width="100%" height="100%"></iframe></div>
	<div class="rightFrame" width="100%" height="100%">

		<h1>ページ1</h1>

	</div>
</div>
</body>
</html>
page2.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページ2</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="baseFrame">
	<div class="leftFrame"><iframe src="menu.html" frameborder="0" width="100%" height="100%"></iframe></div>
	<div class="rightFrame" width="100%" height="100%">

		<h1>ページ2</h1>

	</div>
</div>
</body>
</html>

 
 

動作確認

 
 

ちなみに、このHTML5版の仕組みを使って、勤務時間取得ツールのヘルプを作り直しました。

 
 

コメント

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA


*