質問編集履歴

1

HTML CSS 追加しました。

2017/12/18 01:15

投稿

wcourage
wcourage

スコア5

test CHANGED
File without changes
test CHANGED
@@ -105,3 +105,381 @@
105
105
  できればこの2つのスクリプトをきちんと動作させて、さらに一つにまとめたり出来ないものでしょうか?
106
106
 
107
107
  どうかよろしくお願いいたします。
108
+
109
+
110
+
111
+ 追記です。
112
+
113
+ HTMLとCSSを追加します。
114
+
115
+
116
+
117
+ ```HTML
118
+
119
+ <!doctype html>
120
+
121
+ <html lang="ja">
122
+
123
+ <head>
124
+
125
+ <meta charset="UTF-8">
126
+
127
+ <title>タイトル</title>
128
+
129
+ <meta name="viewport" content="width=device-width">
130
+
131
+ <link rel="stylesheet" href="css/normalize.css">
132
+
133
+ <link rel="stylesheet" href="css/style.css">
134
+
135
+ <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
136
+
137
+ <script>
138
+
139
+   var today = function(){
140
+
141
+ var now = new Date();
142
+
143
+ var month = now.getMonth();
144
+
145
+ var date = now.getDate();
146
+
147
+ var today = '#' + (month + 1) + date;
148
+
149
+ var link = document.getElementById('btn');
150
+
151
+ link.href = "/" + today;
152
+
153
+ return false;
154
+
155
+ };
156
+
157
+ </script>
158
+
159
+
160
+
161
+ <script>
162
+
163
+ $(function(){
164
+
165
+ $('a[href^=#]').click(function() {
166
+
167
+ var href= $(this).attr("href");
168
+
169
+ var target = $(href == "#" || href == "" ? 'html' : href);
170
+
171
+ var headerHeight = 65; //固定ヘッダーの高さ
172
+
173
+ var position = target.offset().top - headerHeight; //ターゲットの座標からヘッダの高さ分引く
174
+
175
+ $('body,html').animate({scrollTop:position}, 550, 'swing');
176
+
177
+ return false;
178
+
179
+ });
180
+
181
+ });
182
+
183
+ </script>
184
+
185
+ </head>
186
+
187
+
188
+
189
+ <body>
190
+
191
+ <header id="header">
192
+
193
+ <div class="top">
194
+
195
+ <div class="title">
196
+
197
+ <img class="logo" src="img/logo.svg">
198
+
199
+ </div>
200
+
201
+ <div class="subtitle">
202
+
203
+ <h1>Oita Live Event</h1>
204
+
205
+ </div>
206
+
207
+ </div>
208
+
209
+ <div id="sns"><a href="http://www.twitter.com"><img class="twitter" src="img/twitter.svg"></a></div>
210
+
211
+ </header>
212
+
213
+
214
+
215
+
216
+
217
+ <section class="main">
218
+
219
+ <a id="btn" onclick="today()" href=""><img class="today" src="img/today.svg"></a>
220
+
221
+
222
+
223
+ <div class="wrap"><p class="date" id="1201">
224
+
225
+ 12/1 Fri
226
+
227
+ </p></div>
228
+
229
+ <div class="event">
230
+
231
+
232
+
233
+     </div>
234
+
235
+
236
+
237
+ <div class="wrap"><p class="date" id="1202">
238
+
239
+ 12/2 Sat
240
+
241
+ </p></div>
242
+
243
+ <div class="event">
244
+
245
+
246
+
247
+ </div>
248
+
249
+
250
+
251
+ <div class="wrap"><p class="date" id="1203">
252
+
253
+ 12/3 Sun
254
+
255
+ </p></div>
256
+
257
+ 以下繰り返し
258
+
259
+ </section>
260
+
261
+ </body>
262
+
263
+ </html>
264
+
265
+ ```
266
+
267
+
268
+
269
+ ```CSS
270
+
271
+ @charset "UTF-8";
272
+
273
+ /* CSS Document */
274
+
275
+
276
+
277
+ html {
278
+
279
+ font-size: 62.5%;
280
+
281
+ }
282
+
283
+
284
+
285
+ *, *::before, *::after {
286
+
287
+ box-sizing: border-box;
288
+
289
+ }
290
+
291
+ a {
292
+
293
+ text-decoration: none;
294
+
295
+ color: #000000;
296
+
297
+ }
298
+
299
+
300
+
301
+ body {
302
+
303
+ font-family:sans-serif;
304
+
305
+ max-width: 100%;
306
+
307
+ margin: 20px auto 0;
308
+
309
+ }
310
+
311
+
312
+
313
+ #header {
314
+
315
+ display: flex;
316
+
317
+ position: fixed;
318
+
319
+ width: 100%;
320
+
321
+ height: 65px;
322
+
323
+ border-bottom: 3px solid #000;
324
+
325
+ }
326
+
327
+ .logo {
328
+
329
+ margin: 0 20px;
330
+
331
+ height: 80px;
332
+
333
+ }
334
+
335
+ .subtitle h1 {
336
+
337
+ font-size: 3.2rem;
338
+
339
+ padding-left: 0;
340
+
341
+ }
342
+
343
+ .top {
344
+
345
+ margin: 0 auto;
346
+
347
+ display: flex;
348
+
349
+ }
350
+
351
+ #sns {
352
+
353
+ display: block;
354
+
355
+ position: absolute;
356
+
357
+ right: 10px;
358
+
359
+ top: 50px;
360
+
361
+ }
362
+
363
+
364
+
365
+ .twitter {
366
+
367
+ width: 25px;
368
+
369
+ }
370
+
371
+
372
+
373
+ .main {
374
+
375
+ margin: 0 auto;
376
+
377
+ padding-top: 110px;
378
+
379
+ max-width: 900px;
380
+
381
+ width: 70%;
382
+
383
+ }
384
+
385
+
386
+
387
+ .today {
388
+
389
+ display: block;
390
+
391
+ width: 120px;
392
+
393
+ margin: 55px auto;
394
+
395
+ transition: 0.3s;
396
+
397
+ }
398
+
399
+
400
+
401
+ #btn{
402
+
403
+ display: block;
404
+
405
+ text-decoration: none;
406
+
407
+ background-color: #ff0000;
408
+
409
+ color: #FFF;
410
+
411
+ width: 150px;
412
+
413
+ height: 150px;
414
+
415
+ line-height: 120px;
416
+
417
+ border-radius: 50%;
418
+
419
+ overflow: hidden;
420
+
421
+ box-shadow: 0px 7px 2px rgba(0, 0, 0, 0.29);
422
+
423
+ border-bottom: solid 6px #ee0000;
424
+
425
+ transition: .4s;
426
+
427
+ margin: 0 auto;
428
+
429
+ }
430
+
431
+
432
+
433
+ #btn:active{
434
+
435
+ -ms-transform: translateY(2px);
436
+
437
+ -webkit-transform: translateY(2px);
438
+
439
+ transform: translateY(2px);
440
+
441
+ box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
442
+
443
+ border-bottom: none;
444
+
445
+ }
446
+
447
+
448
+
449
+ .date {
450
+
451
+ display: inline-block;
452
+
453
+ border: 2px solid #000000;
454
+
455
+ padding: 5px;
456
+
457
+ font-size: 2rem;
458
+
459
+ font-weight: bold;
460
+
461
+ margin-top: 30px;
462
+
463
+ }
464
+
465
+
466
+
467
+ .event {
468
+
469
+ border: 2px solid #000000;
470
+
471
+ padding: 10px 30px;
472
+
473
+ margin: 0 20px 20px;
474
+
475
+ }
476
+
477
+ ```
478
+
479
+
480
+
481
+ こういった感じです。
482
+
483
+ ちなみに#1217等のリンクへ飛ぶスクリプトとスクロールしてヘッダー分高さをずらすスクリプト、
484
+
485
+ それぞれ片方だけなら動作します。