teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問cssでボタンを2列に表示したい

編集履歴

質問編集履歴

1

2016/05/10 16:39

投稿

retoruto1257
retoruto1257

スコア7

test CHANGED
File without changes
test CHANGED
@@ -2,9 +2,255 @@
2
2
 
3
3
  プログラムのどこがおかしいのか教えてくださいお願いします。
4
4
 
5
- 以下が書いたcssのプログラムです
5
+ 以下が書いたhtmlとcssのプログラムです
6
+
6
-
7
+ html
8
+
9
+
10
+
7
-
11
+ <html> 
12
+
13
+ <head> 
14
+
15
+ <meta charset="UTF-8"> 
16
+
17
+ <script src="../jquery-1.10.2.min.js"></script>
18
+
19
+ <title> Light's three primary colors</title>
20
+
21
+ <link rel="stylesheet" href="newtest1.css"> 
22
+
23
+   <script>
24
+
25
+ $(document).ready(function(){ 
26
+
27
+  $("#btn1").click(function(){
28
+
29
+  $("#btn1").css("background","#0000FF");
30
+
31
+  $("#btn2").css("background","#E0E0E0");
32
+
33
+  $("#btn3").css("background","#E0E0E0");
34
+
35
+  $("#btn4").css("background","#0000FF");
36
+
37
+  $("#btn5").css("background","#0000FF");
38
+
39
+  $("#btn6").css("background","#E0E0E0");
40
+
41
+  $("#btn7").css("background","#0000FF");
42
+
43
+  $("#footer").text("blue");
44
+
45
+ });
46
+
47
+  $("#btn2").click(function(){
48
+
49
+  $("#btn1").css("background","#E0E0E0");
50
+
51
+  $("#btn2").css("background","#FF0000");
52
+
53
+  $("#btn3").css("background","#E0E0E0"); 
54
+
55
+  $("#btn4").css("background","#FF0000"); 
56
+
57
+  $("#btn5").css("background","#E0E0E0");
58
+
59
+  $("#btn6").css("background","#FF0000");
60
+
61
+  $("#btn7").css("background","#FF0000");
62
+
63
+  $("#footer").text("red");
64
+
65
+  }); 
66
+
67
+  $("#btn3").click(function(){
68
+
69
+  $("#btn1").css("background","#E0E0E0");
70
+
71
+  $("#btn2").css("background","#E0E0E0");
72
+
73
+  $("#btn3").css("background","#8FBC8F");
74
+
75
+  $("#btn4").css("background","#E0E0E0");
76
+
77
+  $("#btn5").css("background","#8FBC8F");
78
+
79
+  $("#btn6").css("background","#8FBC8F"); 
80
+
81
+  $("#btn7").css("background","#8FBC8F");
82
+
83
+  $("#footer").text("green");
84
+
85
+  });
86
+
87
+  $("#btn4").click(function(){
88
+
89
+  $("#btn1").css("background","#E0E0E0");
90
+
91
+  $("#btn2").css("background","#E0E0E0");
92
+
93
+  $("#btn3").css("background","#E0E0E0");
94
+
95
+  $("#btn4").css("background","#DA70D6");
96
+
97
+  $("#btn5").css("background","#E0E0E0");
98
+
99
+  $("#btn6").css("background","#E0E0E0");
100
+
101
+  $("#btn7").css("background","#E0E0E0");
102
+
103
+  $("#footer").text("blueviolet");
104
+
105
+  }); 
106
+
107
+  $("#btn5").click(function(){
108
+
109
+  $("#btn1").css("background","#E0E0E0");
110
+
111
+  $("#btn2").css("background","#E0E0E0");
112
+
113
+  $("#btn3").css("background","#E0E0E0");
114
+
115
+  $("#btn4").css("background","#E0E0E0");
116
+
117
+  $("#btn5").css("background","#87CEEB");
118
+
119
+  $("#btn6").css("background","#E0E0E0");
120
+
121
+  $("#btn7").css("background","#E0E0E0"); 
122
+
123
+ $("#footer").text("skyblue");
124
+
125
+  });
126
+
127
+  $("#btn6").click(function(){ 
128
+
129
+  $("#btn1").css("background","#E0E0E0");
130
+
131
+  $("#btn2").css("background","#E0E0E0");
132
+
133
+  $("#btn3").css("background","#E0E0E0"); 
134
+
135
+  $("#btn4").css("background","#E0E0E0");
136
+
137
+  $("#btn5").css("background","#E0E0E0");
138
+
139
+  $("#btn6").css("background","#FFFF00");
140
+
141
+  $("#btn7").css("background","#E0E0E0");
142
+
143
+  $("#footer").text("yellow");
144
+
145
+  });
146
+
147
+  $("#btn7).click(function(){ 
148
+
149
+  $("#btn1").css("background","#E0E0E0");
150
+
151
+  $("#btn2").css("background","#E0E0E0");
152
+
153
+  $("#btn3").css("background","#E0E0E0");
154
+
155
+  $("#btn4").css("background","#E0E0E0");
156
+
157
+  $("#btn5").css("background","#E0E0E0");
158
+
159
+  $("#btn6").css("background","#E0E0E0");
160
+
161
+  $("#btn7").css("background","#FFFFFF");
162
+
163
+  $("#footer").text("white");
164
+
165
+  }); 
166
+
167
+ }); 
168
+
169
+  
170
+
171
+ </script>
172
+
173
+ </head> 
174
+
175
+ <body> 
176
+
177
+   <div id="main">
178
+
179
+ <div id="header">
180
+
181
+ <p>Light's three primary colors</p>
182
+
183
+ </div> 
184
+
185
+ <div id="block1">
186
+
187
+ <p>
188
+
189
+ <input id="btn1" class="btn" type="button" value="blue"></p> 
190
+
191
+ </div>
192
+
193
+
194
+
195
+ <div id="block2"> 
196
+
197
+ <p><input id="btn2" class="btn" type="button" value="red"></p>
198
+
199
+ </div>
200
+
201
+
202
+
203
+ <div id="block3">
204
+
205
+ <p><input id="btn3" class="btn" type="button" value="green"></p>
206
+
207
+ </div>
208
+
209
+
210
+
211
+ <div id="block4">
212
+
213
+ <p><input id="btn4" class="btn" type="button" value="blueviolet"></p>
214
+
215
+ </div> 
216
+
217
+
218
+
219
+  <div id="block5"> 
220
+
221
+ <p><input id="btn5" class="btn" type="button" value="skyblue"></p>
222
+
223
+ </div>
224
+
225
+
226
+
227
+ <div id="block6"> 
228
+
229
+ <p><input id="btn6" class="btn" type="button" value="yellow"></p>
230
+
231
+ </div> 
232
+
233
+
234
+
235
+ <div id="block7"> 
236
+
237
+ <p><input id="btn7" class="btn" type="button" value="white"></p> 
238
+
239
+ </div> 
240
+
241
+   <div id="footer"></div>
242
+
243
+ </div>
244
+
245
+
246
+
247
+ </body>
248
+
249
+ </html>
250
+
251
+
252
+
253
+ 入力したcss
8
254
 
9
255
  *{
10
256