Web画面の(frameset風)左右分割はどうするのか？

Last updated at 2025-02-05Posted at 2025-02-05

太古に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つのプロパティのショートハンド*/
}

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up