質問編集履歴
2
コードの修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -4,67 +4,76 @@
|
|
|
4
4
|
|
|
5
5
|
### 発生している問題・エラーメッセージ
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
該当のソースコードについて、
|
|
8
|
-
|
|
8
|
+
「.A」は、「.inner」の33%
|
|
9
|
+
「.B」は、「.inner」の66%
|
|
10
|
+
という幅にしたい。
|
|
9
11
|
|
|
12
|
+
|
|
10
13
|
### 該当のソースコード
|
|
11
14
|
該当のソースコードのサンプル
|
|
12
|
-
https://
|
|
15
|
+
[https://jsfiddle.net/byxms2e6/](https://jsfiddle.net/byxms2e6/)
|
|
13
16
|
|
|
14
17
|
該当のソースコード
|
|
15
18
|
```html
|
|
16
19
|
<main>
|
|
17
20
|
|
|
18
21
|
<section id="left">
|
|
19
|
-
<p>
|
|
22
|
+
<p>100px固定</p>
|
|
20
23
|
</section>
|
|
21
24
|
|
|
22
25
|
<section id="right">
|
|
26
|
+
<div class="inner">
|
|
23
|
-
|
|
27
|
+
<div class="A">
|
|
24
|
-
|
|
28
|
+
<p>「.inner」の33%</p>
|
|
25
|
-
|
|
29
|
+
</div>
|
|
26
|
-
|
|
30
|
+
<div class="B">
|
|
27
|
-
|
|
31
|
+
<p>「.inner」の66%</p>
|
|
28
|
-
|
|
32
|
+
<p>「.inner」の66%</p>
|
|
29
|
-
|
|
33
|
+
<p>「.inner」の66%</p>
|
|
30
|
-
|
|
34
|
+
<p>「.inner」の66%</p>
|
|
31
|
-
|
|
35
|
+
<p>「.inner」の66%</p>
|
|
32
|
-
|
|
36
|
+
<p>「.inner」の66%</p>
|
|
33
|
-
|
|
37
|
+
<p>「.inner」の66%</p>
|
|
34
|
-
|
|
38
|
+
<p>「.inner」の66%</p>
|
|
35
|
-
|
|
39
|
+
<p>「.inner」の66%</p>
|
|
36
|
-
|
|
40
|
+
<p>「.inner」の66%</p>
|
|
37
|
-
|
|
41
|
+
</div>
|
|
42
|
+
</div>
|
|
38
43
|
</section>
|
|
39
44
|
|
|
40
45
|
</main>
|
|
41
46
|
|
|
42
47
|
<style type="text/css">
|
|
43
48
|
main {
|
|
44
|
-
width: 100%;
|
|
49
|
+
width: 100%;
|
|
45
50
|
}
|
|
46
51
|
#left {
|
|
47
52
|
position: fixed;
|
|
48
53
|
background: skyblue;
|
|
49
54
|
height: 100vh;
|
|
50
|
-
width: 100px;
|
|
55
|
+
width: 100px; /* 固定100px */
|
|
51
56
|
}
|
|
52
57
|
#right {
|
|
53
58
|
margin: 0 0 0 100px;
|
|
54
|
-
width: 100%;
|
|
59
|
+
width: 100%; /* 「main幅 － #leftの100px」という意味での100%*/
|
|
55
60
|
position: relative;
|
|
56
61
|
}
|
|
62
|
+
.inner {
|
|
63
|
+
margin: 0 auto;
|
|
64
|
+
max-width: 500px;
|
|
65
|
+
}
|
|
57
66
|
.A {
|
|
58
67
|
position: fixed;
|
|
59
68
|
background: khaki;
|
|
60
69
|
color: red;
|
|
61
|
-
width: 33%;
|
|
70
|
+
width: 33%; /* 「.inner」の33%にしたい */
|
|
62
71
|
z-index: 1;
|
|
63
72
|
}
|
|
64
73
|
.B {
|
|
65
74
|
position: relative;
|
|
66
75
|
background: palegreen;
|
|
67
|
-
width: 66%;
|
|
76
|
+
width: 66%; /* 「.inner」の66%にしたい */
|
|
68
77
|
margin: 0 0 0 33%;
|
|
69
78
|
}
|
|
70
79
|
.B p {
|
1
CSSを main{width: 500px} から main{width: 100%} に修正致しました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
|
|
42
42
|
<style type="text/css">
|
|
43
43
|
main {
|
|
44
|
-
width:
|
|
44
|
+
width: 100%; /*編集・追記依頼を受けて修正致しました。*/
|
|
45
45
|
}
|
|
46
46
|
#left {
|
|
47
47
|
position: fixed;
|