＃今更感があるけれども。
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版の仕組みを使って、勤務時間取得ツールのヘルプを作り直しました。
