＃今更感があるけれども。
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">ページ１</a>
<li><a href="page2.html" target="main">ページ２</a>
</ul>
</body>
</html>page1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
</head>
<body>
<h1>ページ１</h1>
</body>
</html>page2.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
</head>
<body>
<h1>ページ２</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">ページ１</a>
<li><a href="page2.html" target="_top">ページ２</a>
</ul>
</body>
</html>page1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページ１</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>ページ１</h1>
</div>
</div>
</body>
</html>page2.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページ２</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>ページ２</h1>
</div>
</div>
</body>
</html>
動作確認
ちなみに、このHTML5版の仕組みを使って、勤務時間取得ツールのヘルプを作り直しました。