teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

3

サンプル2を追加

2021/04/27 10:11

投稿

Lhankor_Mhy
Lhankor_Mhy

スコア37488

answer CHANGED
@@ -27,4 +27,11 @@
27
27
  overflow: hidden;
28
28
  }
29
29
 
30
- ```
30
+ ```
31
+
32
+ ---
33
+
34
+ Chrome ならそれっぽく見えるかなあ……
35
+
36
+
37
+ [サンプル2](https://jsfiddle.net/Lhankor_Mhy/qrt2gdpf/1/)

2

サンプルを追記

2021/04/27 10:11

投稿

Lhankor_Mhy
Lhankor_Mhy

スコア37488

answer CHANGED
@@ -2,4 +2,29 @@
2
2
 
3
3
  「スプリットペイン」とかでしょうか? ピュアCSSでは難しいと思います。
4
4
 
5
- [jQueryでスプリットペイン - JoTech](https://hiroki-sawano.hatenablog.com/entry/jquery-split-pane)
5
+ [jQueryでスプリットペイン - JoTech](https://hiroki-sawano.hatenablog.com/entry/jquery-split-pane)
6
+
7
+ ---
8
+
9
+ とりあえず、CSSで頑張ってみましたが、リサイズをするマーカー?が右端にしか出せないかもです。
10
+ やはり、JavaScriptが必須かもしれません。
11
+
12
+ [サンプル](https://jsfiddle.net/Lhankor_Mhy/qrt2gdpf/)
13
+
14
+ ```css
15
+ .container{
16
+ height: 200px;
17
+ display: flex;
18
+ flex-direction: column;
19
+ }
20
+ .item{
21
+ overflow: hidden;
22
+ flex: 1 1 auto;
23
+ }
24
+ .item:first-child{
25
+ flex: 0 1 auto;
26
+ resize: vertical;
27
+ overflow: hidden;
28
+ }
29
+
30
+ ```

1

書式の改善

2021/04/27 09:45

投稿

Lhankor_Mhy
Lhankor_Mhy

スコア37488

answer CHANGED
@@ -1,3 +1,5 @@
1
+ >__この様なレイアウトは「通称」などありますでしょうか?__
2
+
1
3
  「スプリットペイン」とかでしょうか? ピュアCSSでは難しいと思います。
2
4
 
3
5
  [jQueryでスプリットペイン - JoTech](https://hiroki-sawano.hatenablog.com/entry/jquery-split-pane)