質問編集履歴
2
コードの修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -10,9 +10,15 @@
|
|
|
10
10
|
|
|
11
11
|
|
|
12
12
|
|
|
13
|
-
|
|
13
|
+
該当のソースコードについて、
|
|
14
14
|
|
|
15
|
-
|
|
15
|
+
「.A」は、「.inner」の33%
|
|
16
|
+
|
|
17
|
+
「.B」は、「.inner」の66%
|
|
18
|
+
|
|
19
|
+
という幅にしたい。
|
|
20
|
+
|
|
21
|
+
|
|
16
22
|
|
|
17
23
|
|
|
18
24
|
|
|
@@ -20,7 +26,7 @@
|
|
|
20
26
|
|
|
21
27
|
該当のソースコードのサンプル
|
|
22
28
|
|
|
23
|
-
https://
|
|
29
|
+
[https://jsfiddle.net/byxms2e6/](https://jsfiddle.net/byxms2e6/)
|
|
24
30
|
|
|
25
31
|
|
|
26
32
|
|
|
@@ -34,7 +40,7 @@
|
|
|
34
40
|
|
|
35
41
|
<section id="left">
|
|
36
42
|
|
|
37
|
-
<p>
|
|
43
|
+
<p>100px固定</p>
|
|
38
44
|
|
|
39
45
|
</section>
|
|
40
46
|
|
|
@@ -42,35 +48,39 @@
|
|
|
42
48
|
|
|
43
49
|
<section id="right">
|
|
44
50
|
|
|
45
|
-
<div class="
|
|
51
|
+
<div class="inner">
|
|
46
52
|
|
|
47
|
-
<
|
|
53
|
+
<div class="A">
|
|
48
54
|
|
|
49
|
-
</
|
|
55
|
+
<p>「.inner」の33%</p>
|
|
50
56
|
|
|
51
|
-
<div
|
|
57
|
+
</div>
|
|
52
58
|
|
|
53
|
-
<
|
|
59
|
+
<div class="B">
|
|
54
60
|
|
|
55
|
-
<p>「
|
|
61
|
+
<p>「.inner」の66%</p>
|
|
56
62
|
|
|
57
|
-
<p>「
|
|
63
|
+
<p>「.inner」の66%</p>
|
|
58
64
|
|
|
59
|
-
<p>「
|
|
65
|
+
<p>「.inner」の66%</p>
|
|
60
66
|
|
|
61
|
-
<p>「
|
|
67
|
+
<p>「.inner」の66%</p>
|
|
62
68
|
|
|
63
|
-
<p>「
|
|
69
|
+
<p>「.inner」の66%</p>
|
|
64
70
|
|
|
65
|
-
<p>「
|
|
71
|
+
<p>「.inner」の66%</p>
|
|
66
72
|
|
|
67
|
-
<p>「
|
|
73
|
+
<p>「.inner」の66%</p>
|
|
68
74
|
|
|
69
|
-
<p>「
|
|
75
|
+
<p>「.inner」の66%</p>
|
|
70
76
|
|
|
71
|
-
<p>「
|
|
77
|
+
<p>「.inner」の66%</p>
|
|
72
78
|
|
|
79
|
+
<p>「.inner」の66%</p>
|
|
80
|
+
|
|
73
|
-
</div>
|
|
81
|
+
</div>
|
|
82
|
+
|
|
83
|
+
</div>
|
|
74
84
|
|
|
75
85
|
</section>
|
|
76
86
|
|
|
@@ -84,7 +94,7 @@
|
|
|
84
94
|
|
|
85
95
|
main {
|
|
86
96
|
|
|
87
|
-
width: 100%;
|
|
97
|
+
width: 100%;
|
|
88
98
|
|
|
89
99
|
}
|
|
90
100
|
|
|
@@ -96,7 +106,7 @@
|
|
|
96
106
|
|
|
97
107
|
height: 100vh;
|
|
98
108
|
|
|
99
|
-
width: 100px;
|
|
109
|
+
width: 100px; /* 固定100px */
|
|
100
110
|
|
|
101
111
|
}
|
|
102
112
|
|
|
@@ -104,9 +114,17 @@
|
|
|
104
114
|
|
|
105
115
|
margin: 0 0 0 100px;
|
|
106
116
|
|
|
107
|
-
width: 100%;
|
|
117
|
+
width: 100%; /* 「main幅 － #leftの100px」という意味での100%*/
|
|
108
118
|
|
|
109
119
|
position: relative;
|
|
120
|
+
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.inner {
|
|
124
|
+
|
|
125
|
+
margin: 0 auto;
|
|
126
|
+
|
|
127
|
+
max-width: 500px;
|
|
110
128
|
|
|
111
129
|
}
|
|
112
130
|
|
|
@@ -118,7 +136,7 @@
|
|
|
118
136
|
|
|
119
137
|
color: red;
|
|
120
138
|
|
|
121
|
-
width: 33%;
|
|
139
|
+
width: 33%; /* 「.inner」の33%にしたい */
|
|
122
140
|
|
|
123
141
|
z-index: 1;
|
|
124
142
|
|
|
@@ -130,7 +148,7 @@
|
|
|
130
148
|
|
|
131
149
|
background: palegreen;
|
|
132
150
|
|
|
133
|
-
width: 66%;
|
|
151
|
+
width: 66%; /* 「.inner」の66%にしたい */
|
|
134
152
|
|
|
135
153
|
margin: 0 0 0 33%;
|
|
136
154
|
|
1
CSSを main{width: 500px} から main{width: 100%} に修正致しました。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -84,7 +84,7 @@
|
|
|
84
84
|
|
|
85
85
|
main {
|
|
86
86
|
|
|
87
|
-
width:
|
|
87
|
+
width: 100%; /*編集・追記依頼を受けて修正致しました。*/
|
|
88
88
|
|
|
89
89
|
}
|
|
90
90
|
|