いつも勉強させていただいております。以下の画像の様に、ブラウザで赤丸の部分を掴みながら上スクロールすると、領域Bが広がるようなレイアウトを作りたいのですが、この様なレイアウトは「通称」などありますでしょうか？ ※「ハンバーガーメニュー」とはまた違いますよね...？ ![イメージ説明](c55b7ad0e018add4652ff964d2b6d4c3.png) 作成する上で、何か参考になる情報があればと思い、質問させていただきました。何卒よろしくお願い致します。

>__この様なレイアウトは「通称」などありますでしょうか？__ 「スプリットペイン」とかでしょうか？ピュアCSSでは難しいと思います。 [jQueryでスプリットペイン - JoTech](https://hiroki-sawano.hatenablog.com/entry/jquery-split-pane) --- とりあえず、CSSで頑張ってみましたが、リサイズをするマーカー？が右端にしか出せないかもです。やはり、JavaScriptが必須かもしれません。 [サンプル](https://jsfiddle.net/Lhankor_Mhy/qrt2gdpf/) ```css .container{ height: 200px; display: flex; flex-direction: column; } .item{ overflow: hidden; flex: 1 1 auto; } .item:first-child{ flex: 0 1 auto; resize: vertical; overflow: hidden; } ``` --- Chrome ならそれっぽく見えるかなあ…… [サンプル2](https://jsfiddle.net/Lhankor_Mhy/qrt2gdpf/1/)

【HTML/CSS】2つの表示エリアを可変にする方法

いつも勉強させていただいております。

以下の画像の様に、
ブラウザで赤丸の部分を掴みながら上スクロールすると、
領域Bが広がるようなレイアウトを作りたいのですが、
この様なレイアウトは「通称」などありますでしょうか？

※「ハンバーガーメニュー」とはまた違いますよね...？

作成する上で、何か参考になる情報があればと思い、質問させていただきました。
何卒よろしくお願い致します。

K_3578

2021/04/27 08:00

領域AとB合わせて画面全体になるって事ですか？

ami613

2021/04/27 08:23

はい、仰る通りです！ 1つの画面の中に「領域A」と「領域B」があり、ユーザー側でそれぞれの表示領域を調整できる... といったイメージです。わかりにくく、すみません;

K_3578

2021/04/27 08:30 編集

レイアウト･･･というよりかはHTML5で廃止されるまであったFramesetっぽい気がする･･･。追記 https://www.conifer.jp/html5-frameset.html ↑みたいな動作だったらHTML5だと難しいかもしれないです。私が知らないだけかもしれませんが･･･。

行動規範の内容に同意します

回答1件

この様なレイアウトは「通称」などありますでしょうか？

「スプリットペイン」とかでしょうか？　ピュアCSSでは難しいと思います。

jQueryでスプリットペイン - JoTech

とりあえず、CSSで頑張ってみましたが、リサイズをするマーカー？が右端にしか出せないかもです。
やはり、JavaScriptが必須かもしれません。

サンプル

css
1.container{
2  height: 200px;
3  display: flex;
4  flex-direction: column;
5}
6.item{
7  overflow: hidden;
8  flex: 1 1 auto;
9}
10.item:first-child{
11  flex: 0 1 auto;
12  resize: vertical;
13  overflow: hidden;
14}
15