質問編集履歴

2

情報の修正

2018/06/01 13:36

投稿

kaitotokai
kaitotokai

スコア59

test CHANGED
File without changes
test CHANGED
@@ -3,9 +3,3 @@
3
3
 
4
4
 
5
5
  Grid Layout で要素が指定した位置に配置されない。
6
-
7
-
8
-
9
- ### 結果
10
-
11
- すみません、ただのタイポでした・・・

1

情報の修正

2018/06/01 13:36

投稿

kaitotokai
kaitotokai

スコア59

test CHANGED
File without changes
test CHANGED
@@ -6,188 +6,6 @@
6
6
 
7
7
 
8
8
 
9
- ### 発生している問題・エラーメッセージ
9
+ ### 結果
10
10
 
11
-
12
-
13
- idで"center"に指定したものが中央に、idで"right"に指定したものが右側に来るはずなのに、
14
-
15
- "center"が右側に来ていて"right"が中央に来ている。
16
-
17
-
18
-
19
- ### 該当のソースコード
20
-
21
-
22
-
23
- ```ここに言語名を入力
24
-
25
- <main>
26
-
27
- <section id="left">
28
-
29
- <img id="logo" src="chara.jpeg">
30
-
31
- </section>
32
-
33
-
34
-
35
- <section id="center">
36
-
37
-
38
-
39
- <div id="now">
40
-
41
- <form action="" method="POST">
42
-
43
- <div class="box">
44
-
45
- <div class="left">
46
-
47
- <p>AAA</p>
48
-
49
- </div>
50
-
51
- <div class="right">
52
-
53
- <p>BBB</p>
54
-
55
- </div>
56
-
57
- <div class="right">
58
-
59
- <p>CCC</p>
60
-
61
- </div>
62
-
63
- <input type="checkbox" name="delete_ids" value="1" />
64
-
65
- </div>
66
-
67
- <button class="btn btn-lg btn-block pnkbtn" type="submit">完了</button>
68
-
69
- </form>
11
+ すみません、ただのタイポでした・・・
70
-
71
- </div>
72
-
73
-
74
-
75
- </section>
76
-
77
-
78
-
79
- <section id="right">
80
-
81
-
82
-
83
-
84
-
85
- <form action="" method="POST">
86
-
87
- <button type="submit">登録</button>
88
-
89
- </form>
90
-
91
- </section>
92
-
93
-
94
-
95
- </main>
96
-
97
- ```
98
-
99
- とhtmlに書いて、
100
-
101
- ```ここに言語を入力
102
-
103
- main{
104
-
105
- display: grid;
106
-
107
- grid-template-columns: 100px 100px 100px;
108
-
109
- grid-template-areas: "LEFT CANTER RIGHT";
110
-
111
- height: 100%;
112
-
113
- }
114
-
115
-
116
-
117
-
118
-
119
- #left{
120
-
121
- grid-area: LEFT;
122
-
123
- float: left;
124
-
125
-
126
-
127
- }
128
-
129
-
130
-
131
- #center {
132
-
133
- grid-area: CENTER;
134
-
135
- display: flex;
136
-
137
- flex-direction: column;
138
-
139
- float: right;
140
-
141
- }
142
-
143
-
144
-
145
-
146
-
147
- #center #now .box {
148
-
149
- background-color: black;
150
-
151
- }
152
-
153
-
154
-
155
- #center #now .box:hover {
156
-
157
- background-color: black;
158
-
159
- }
160
-
161
-
162
-
163
- #right{
164
-
165
- grid-area: RIGHT;
166
-
167
- height: 100%;
168
-
169
- float: right;
170
-
171
- }
172
-
173
-
174
-
175
- ```
176
-
177
- とcssに書いた。
178
-
179
-
180
-
181
- なぜ、
182
-
183
-
184
-
185
- ```ここに言語を入力
186
-
187
- grid-template-columns: 100px 100px 100px;
188
-
189
- grid-template-areas: "LEFT CANTER RIGHT";
190
-
191
- ```
192
-
193
- と書いたのにその通りにならないのか。