太古にframesetありき。
非常に使い易かったのだが、諸々の事情で廃止となった。
そこで、「html css 画面分割」等のキーワードでネタをさがし、
OsadaSoftさんの方法がイメージに近いと思い、お手本にさせてもらった。
https://www.osadasoft.com/frameset%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%9F%E3%82%A6%E3%82%A3%E3%83%B3%E3%83%89%E3%82%A6%E3%81%AE%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E5%88%86%E5%89%B2%E3%82%92%E3%82%84%E3%82%81/
【した事】
・画面を左右分割し、
・左画面にメニューが見えて、クリックすると、
・右画面にコンテンツが表示される。
・左右ともコンテンツがオバーフローしたら、スクロールバーが現れる。
【したいのにできなかった事】
・左画面のメニューをクリックすると、左画面もフレッシュされるので、表示が一番上になる。(このプログラムでは当然)
・.baseFrameのwidthをcalc(100% - 1px);とした為？最大表示にすると下側が空白になる。
・境目のバーは移動出来ても良いが、width初期値は200pxが良い。
【皆さんどうされているのでしょうか？】
JavaScriptでしょうか？
画面分割のサンプルがあっても、メニューで選択した内容を右画面に表示する部分の説明がなくて…
iframeですか?(TT)
menu.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>メニュー</h1>
456<BR>
456<BR>
456<BR>
456<BR>
456<BR>
456<BR>
456<BR>
456<BR>
456<BR>
456<BR>
456<BR>
456<BR>
456<BR>
456<BR>
456<BR>
456<BR>
456<BR>
456<BR>
456<BR>
456<BR>
456<BR>
456<BR>
456<BR>
456<BR>
<ul>
<li><a href="page1.html" target="_top">ページ１</a>
<li><a href="page2.html" target="_top">ページ２</a>
</ul>
456<BR>
456<BR>
456<BR>
456<BR>
456<BR>
456<BR>
456<BR>
456<BR>
456<BR>
456<BR>
456<BR>
456<BR>
</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>
1234567891237891237891237891237891237891237891<br> <!-- 幅オーバーフロー用 -->
789<br>
789<br>
789<br>
789<br>
789<br>
789<br>
789<br>
789<br>
789<br>
789<br>
789<br>
789<br>
789<br>
789<br>
789<br>
789<br> <!-- 縦オーバーフロー用 -->
</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>
23789123789123789123789123789123789123789123789123123456789<br> <!-- 幅オーバーフロー用 -->
789<br>
789<br>
789<br>
789<br>
789<br>
789<br>
789<br>
789<br>
789<br>
789<br>
789<br>
789<br>
789<br>
789<br>
789<br>
789<br>
789<br>
789<br>
789<br>
789<br>
789<br>
789<br>
789<br>
789<br>
789<br>
789<br>
789<br>
789<br>
789<br>
789<br>
789<br>
789<br>
789<br>
789<br>
789<br>
789<br>
789<br>
789<br>
789<br>
789<br>
789<br>
789<br>
789<br>
789<br>
789<br>
789<br>
789<br>
789<br>
789<br>
789<br>
789<br>
789<br> <!-- 縦オーバーフロー用 -->
</div>
</div>
</body>
</html>
style.css
.baseFrame {
display: flex;
flex-direction: row;
width: calc(100% - 1px);
height: 95vh;
background-color: blueviolet; /*下地が見えないことを確認する為*/
}
.leftFrame {
width:200px; /*幅固定*/
border: solid 1px;
margin: 0px;
background-color: orange; /*確認様色付け*/
}
.rightFrame {
margin: 0px;
padding: 0px;
border: solid 1px;
overflow: auto;
background-color: greenyellow; /*確認様色付け*/
flex: 1; /*残りの幅すべて!!!⇒ flex-grow、flex-shrink、flex-basisの3つのプロパティのショートハンド*/
}