回答編集履歴

3

サンプル2を追加

2021/04/27 10:11

投稿

Lhankor_Mhy
Lhankor_Mhy

スコア36960

test CHANGED
@@ -57,3 +57,17 @@
57
57
 
58
58
 
59
59
  ```
60
+
61
+
62
+
63
+ ---
64
+
65
+
66
+
67
+ Chrome ならそれっぽく見えるかなあ……
68
+
69
+
70
+
71
+
72
+
73
+ [サンプル2](https://jsfiddle.net/Lhankor_Mhy/qrt2gdpf/1/)

2

サンプルを追記

2021/04/27 10:11

投稿

Lhankor_Mhy
Lhankor_Mhy

スコア36960

test CHANGED
@@ -7,3 +7,53 @@
7
7
 
8
8
 
9
9
  [jQueryでスプリットペイン - JoTech](https://hiroki-sawano.hatenablog.com/entry/jquery-split-pane)
10
+
11
+
12
+
13
+ ---
14
+
15
+
16
+
17
+ とりあえず、CSSで頑張ってみましたが、リサイズをするマーカー?が右端にしか出せないかもです。
18
+
19
+ やはり、JavaScriptが必須かもしれません。
20
+
21
+
22
+
23
+ [サンプル](https://jsfiddle.net/Lhankor_Mhy/qrt2gdpf/)
24
+
25
+
26
+
27
+ ```css
28
+
29
+ .container{
30
+
31
+ height: 200px;
32
+
33
+ display: flex;
34
+
35
+ flex-direction: column;
36
+
37
+ }
38
+
39
+ .item{
40
+
41
+ overflow: hidden;
42
+
43
+ flex: 1 1 auto;
44
+
45
+ }
46
+
47
+ .item:first-child{
48
+
49
+ flex: 0 1 auto;
50
+
51
+ resize: vertical;
52
+
53
+ overflow: hidden;
54
+
55
+ }
56
+
57
+
58
+
59
+ ```

1

書式の改善

2021/04/27 09:45

投稿

Lhankor_Mhy
Lhankor_Mhy

スコア36960

test CHANGED
@@ -1,3 +1,7 @@
1
+ >__この様なレイアウトは「通称」などありますでしょうか?__
2
+
3
+
4
+
1
5
  「スプリットペイン」とかでしょうか? ピュアCSSでは難しいと思います。
2
6
 
3
7