質問編集履歴

1

css追加

2021/03/11 08:54

投稿

YuusukeArtRoom
YuusukeArtRoom

スコア23

test CHANGED
File without changes
test CHANGED
@@ -6,54 +6,38 @@
6
6
 
7
7
  <head>
8
8
 
9
- <!-- Required meta tags -->
10
-
11
9
  <meta charset="utf-8">
12
10
 
13
11
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
14
12
 
15
13
 
16
14
 
17
- <!-- CSS -->
18
-
19
- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> 
20
-
21
- <link rel="stylesheet" href="css/reset.css">
22
-
23
- <link rel="stylesheet" href="css/stylesheet2.css">
24
-
25
- <link rel="stylesheet" href="css/megam.css">
26
-
27
- <!--<link rel="stylesheet" href="css/acordion.css"> -->
28
-
29
- <link rel="preconnect" href="https://fonts.gstatic.com">
15
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
16
+
17
+ <link rel="stylesheet" href="/css/mmenu.css">
18
+
19
+
30
20
 
31
21
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
32
22
 
33
23
  <link href="https://fonts.googleapis.com/css2?family=Anton&family=M+PLUS+1p&display=swap" rel="stylesheet">
34
24
 
35
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
36
-
37
- <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
38
-
39
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
25
+ <link href="https://fonts.googleapis.com/css?family=M+PLUS+1p" rel="stylesheet">
40
26
 
41
27
  <title></title>
42
28
 
43
-
44
-
45
-
46
-
47
29
  </head>
48
30
 
49
31
  <body>
50
32
 
51
33
 
52
34
 
53
-
54
-
55
35
  <div class="navbar">
56
36
 
37
+ <a href="#home">Home</a>
38
+
39
+ <a href="#news">News</a>
40
+
57
41
  <div class="dropdown">
58
42
 
59
43
  <button class="dropbtn">Dropdown
@@ -116,23 +100,13 @@
116
100
 
117
101
  </div>
118
102
 
119
- </header>
120
-
121
-
122
-
123
-
124
-
125
-
126
-
127
-
128
-
129
- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
130
-
131
- <script src="/js/dropdown.js"></script>
132
-
133
- <script src="/js/acordion.js"></script>
134
-
135
- <script src="/js/contact.js"></script>
103
+
104
+
105
+ <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
106
+
107
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
108
+
109
+ <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
136
110
 
137
111
  </body>
138
112
 
@@ -146,7 +120,7 @@
146
120
 
147
121
 
148
122
 
149
- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> 
123
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> 
150
124
 
151
125
 
152
126
 
@@ -155,3 +129,181 @@
155
129
 
156
130
 
157
131
  よろしくお願いします。
132
+
133
+
134
+
135
+ ```ここに言語を入力
136
+
137
+ @charset "UTF-8";
138
+
139
+
140
+
141
+ .navbar {
142
+
143
+ margin-top: 100px;
144
+
145
+ overflow: hidden;
146
+
147
+ background-color: rgb(0, 0, 0);
148
+
149
+ font-family: Arial, Helvetica, sans-serif;
150
+
151
+ }
152
+
153
+
154
+
155
+ .navbar a {
156
+
157
+ float: left;
158
+
159
+ font-size: 16px;
160
+
161
+ color: white;
162
+
163
+ text-align: center;
164
+
165
+ padding: 14px 16px;
166
+
167
+ text-decoration: none;
168
+
169
+ }
170
+
171
+
172
+
173
+ .dropdown {
174
+
175
+ float: left;
176
+
177
+ overflow: hidden;
178
+
179
+ }
180
+
181
+
182
+
183
+ .dropdown .dropbtn {
184
+
185
+ font-size: 16px;
186
+
187
+ border: none;
188
+
189
+ outline: none;
190
+
191
+ color: white;
192
+
193
+ padding: 14px 16px;
194
+
195
+ background-color: inherit;
196
+
197
+ font: inherit;
198
+
199
+ margin: 0;
200
+
201
+ }
202
+
203
+
204
+
205
+ .navbar a:hover, .dropdown:hover .dropbtn {
206
+
207
+ background-color: red;
208
+
209
+ }
210
+
211
+
212
+
213
+ .dropdown-content {
214
+
215
+ display: none;
216
+
217
+ position: absolute;
218
+
219
+ background-color: #f9f9f9;
220
+
221
+ width: 100%;
222
+
223
+ left: 0;
224
+
225
+ box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
226
+
227
+ z-index: 1;
228
+
229
+ }
230
+
231
+
232
+
233
+ .dropdown-content .header {
234
+
235
+ background: red;
236
+
237
+ padding: 16px;
238
+
239
+ color: white;
240
+
241
+ }
242
+
243
+
244
+
245
+ .dropdown:hover .dropdown-content {
246
+
247
+ display: block;
248
+
249
+ }
250
+
251
+
252
+
253
+ /* Create three equal columns that floats next to each other */
254
+
255
+ .column {
256
+
257
+ float: left;
258
+
259
+ width: 33.33%;
260
+
261
+ padding: 10px;
262
+
263
+ background-color: #ccc;
264
+
265
+ height: 250px;
266
+
267
+ }
268
+
269
+
270
+
271
+ .column a {
272
+
273
+ float: none;
274
+
275
+ color: black;
276
+
277
+ padding: 16px;
278
+
279
+ text-decoration: none;
280
+
281
+ display: block;
282
+
283
+ text-align: left;
284
+
285
+ }
286
+
287
+
288
+
289
+ .column a:hover {
290
+
291
+ background-color: #ddd;
292
+
293
+ }
294
+
295
+
296
+
297
+ /* Clear floats after the columns */
298
+
299
+ .row:after {
300
+
301
+ content: "";
302
+
303
+ display: table;
304
+
305
+ clear: both;
306
+
307
+ }
308
+
309
+ ```