質問編集履歴

4

一部修正

2016/06/17 08:50

投稿

KandM
KandM

スコア25

test CHANGED
File without changes
test CHANGED
@@ -576,6 +576,10 @@
576
576
 
577
577
  ```
578
578
 
579
+ 以下HTML5
580
+
581
+ ```
582
+
579
583
  <body>
580
584
 
581
585
 

3

CSS修正

2016/06/17 08:50

投稿

KandM
KandM

スコア25

test CHANGED
File without changes
test CHANGED
@@ -16,7 +16,91 @@
16
16
 
17
17
  ```ここに言語を入力
18
18
 
19
+ body,
20
+
21
+ ul,
22
+
23
+ li {
24
+
25
+ margin: 0;
26
+
27
+ padding: 0;
28
+
29
+ }
30
+
31
+
32
+
33
+ .wrapper {
34
+
35
+ box-sizing: border-box;
36
+
37
+ padding: 0 15px;
38
+
39
+ margin-top: 56px;
40
+
41
+
42
+
43
+ }
44
+
45
+
46
+
47
+ img {
48
+
49
+ max-width: 100%;
50
+
51
+ height: 300px;
52
+
53
+ }
54
+
55
+ /*ヘッダー全体の色、サイズ変更*/
56
+
57
+ header {
58
+
59
+ background: #F0F8FF;
60
+
61
+ color: #ccc;
62
+
63
+ padding: 25px;
64
+
65
+ top: 0;
66
+
67
+
68
+
69
+ }
70
+
71
+
72
+
73
+ footer {
74
+
75
+ background: #ccc;
76
+
77
+ padding: 1rem;
78
+
79
+ position:center;
80
+
81
+ }
82
+
83
+
84
+
19
- /*Hamburger nav*/
85
+ /*nabi開閉部分*/
86
+
87
+ .nav-wrap{
88
+
89
+ box-sizing: border-box;
90
+
91
+ position: fixed;
92
+
93
+ top: 0;
94
+
95
+ width: 100%;
96
+
97
+ height:34px;
98
+
99
+ padding:0;
100
+
101
+
102
+
103
+ }
20
104
 
21
105
  .gnav {
22
106
 
@@ -28,11 +112,291 @@
28
112
 
29
113
  z-index: 99;
30
114
 
115
+ position:fixed;
116
+
31
- }
117
+ }
118
+
119
+
120
+
32
-
121
+ .gnav li {
122
+
33
-
123
+ border-bottom: 1px solid #333;
124
+
34
-
125
+ }
126
+
127
+
128
+
35
-
129
+ .gnav li a {
130
+
131
+ display: block;
132
+
133
+ text-decoration: none;
134
+
135
+ /* (44-16)/2=14px */
136
+
137
+ padding: .875rem 1rem;
138
+
139
+ }
140
+
141
+
142
+
143
+ /*header_title*/
144
+
145
+ #header_title{
146
+
147
+ top:0;
148
+
149
+ position:fixed;
150
+
151
+ coolor:#FF00FF;
152
+
153
+ left:50%;
154
+
155
+ right:50%;
156
+
157
+
158
+
159
+ }
160
+
161
+
162
+
163
+
164
+
165
+ /*ハンバーガーボタン*/
166
+
167
+
168
+
169
+ .icon-animation {
170
+
171
+ width: 44px;
172
+
173
+ height: 44px;
174
+
175
+ display: block;
176
+
177
+ cursor: pointer;
178
+
179
+ float: right;
180
+
181
+ position: absolute;
182
+
183
+ right: .5rem;
184
+
185
+ text-align: center;
186
+
187
+ top: .3rem;
188
+
189
+ }
190
+
191
+
192
+
193
+ .icon-animation span {
194
+
195
+ width: 39px;
196
+
197
+ height: 5px;/*ヘッダーメニューアイコンの線の太さ変更*/
198
+
199
+ border-radius:27%;
200
+
201
+ display: block;
202
+
203
+ background: #00ffff;
204
+
205
+ position: absolute;
206
+
207
+ left: 50%;
208
+
209
+ top: 50%;
210
+
211
+ margin-left: -25px;
212
+
213
+ -webkit-transition: all 0.3s;
214
+
215
+ transition: all 0.3s;
216
+
217
+ -webkit-transform: rotate(0deg);
218
+
219
+ -ms-transform: rotate(0deg);
220
+
221
+ transform: rotate(0deg);
222
+
223
+ }
224
+
225
+
226
+
227
+ .icon-animation .top {
228
+
229
+ -webkit-transform: translateY(-13px);
230
+
231
+ -ms-transform: translateY(-13px);
232
+
233
+ transform: translateY(-13px);
234
+
235
+ }
236
+
237
+
238
+
239
+ .icon-animation .bottom {
240
+
241
+ -webkit-transform: translateY(13px);
242
+
243
+ -ms-transform: translateY(13px);
244
+
245
+ transform: translateY(13px);
246
+
247
+ }
248
+
249
+
250
+
251
+ .is-open .middle {
252
+
253
+ background: rgba(51, 51, 51, 0);
254
+
255
+ }
256
+
257
+
258
+
259
+ .is-open .top {
260
+
261
+ -webkit-transform: rotate(-45deg) translateY(0px);
262
+
263
+ -ms-transform: rotate(-45deg) translateY(0px);
264
+
265
+ transform: rotate(-45deg) translateY(0px);
266
+
267
+ }
268
+
269
+
270
+
271
+ .is-open .bottom {
272
+
273
+ -webkit-transform: rotate(45deg) translateY(0px);
274
+
275
+ -ms-transform: rotate(45deg) translateY(0px);
276
+
277
+ transform: rotate(45deg) translateY(0px);
278
+
279
+ }
280
+
281
+
282
+
283
+ #top_content{
284
+
285
+ img{
286
+
287
+ width: 100% ;
288
+
289
+ max-height:319px;
290
+
291
+ }
292
+
293
+ }
294
+
295
+ Title{
296
+
297
+ width:200px;
298
+
299
+ height:100px;
300
+
301
+ background: blue;
302
+
303
+ text-align:center;
304
+
305
+ line-height: 100px;
306
+
307
+ }
308
+
309
+
310
+
311
+
312
+
313
+
314
+
315
+ /*以下、片手操作用*/
316
+
317
+ #menu ul {
318
+
319
+ margin: 0;
320
+
321
+ padding: 0;
322
+
323
+ list-style: none;
324
+
325
+ width: 240px;
326
+
327
+ height: 240px;
328
+
329
+ border-radius: 126px;
330
+
331
+ border: 6px solid #0000CD;
332
+
333
+ background: #F8F8FF;
334
+
335
+ margin-left:auto;
336
+
337
+ margin-right: 0px;
338
+
339
+ box-shadow: 0 0 10px rgba(0,0,0,0.4);
340
+
341
+ -moz-transform: rotate(180deg);
342
+
343
+ -moz-transition: -moz-transform 0.5s ease-out;
344
+
345
+ -webkit-transform: rotate(180deg);
346
+
347
+ -webkit-transition: -webkit-transform 0.5s ease-out;
348
+
349
+ transform: rotate(180deg);
350
+
351
+ transition: transform 0.5s ease-out;
352
+
353
+ }
354
+
355
+ #menu ul li {
356
+
357
+ width: 40px;
358
+
359
+ height: 40px;
360
+
361
+ border-radius: 22px;
362
+
363
+ border: 2px solid #0000CD;
364
+
365
+ background: #252925;
366
+
367
+ overflow: hidden;
368
+
369
+ margin-left:auto;
370
+
371
+ margin-right:0px;
372
+
373
+ box-shadow: 0 0 10px rgba(0,0,0,0.4);
374
+
375
+ position:relative;
376
+
377
+ }
378
+
379
+
380
+
381
+ #menu ul li:nth-child(1) {
382
+
383
+ top: -25px;
384
+
385
+ right: 110px;
386
+
387
+ }
388
+
389
+
390
+
391
+ #menu ul li:nth-child(2) {
392
+
393
+ top: -30px;
394
+
395
+ right: 185px;
396
+
397
+ }
398
+
399
+
36
400
 
37
401
  #menu ul li:nth-child(3) {/*SNSボタン部分*/
38
402
 
@@ -48,6 +412,94 @@
48
412
 
49
413
  }
50
414
 
415
+
416
+
417
+ #menu ul li#openMenu {
418
+
419
+ top: 50px;
420
+
421
+ right: 10px;
422
+
423
+ cursor: pointer;
424
+
425
+ }
426
+
427
+ #menu ul li#closeMenu {
428
+
429
+ width: 200px;
430
+
431
+ height: 200px;
432
+
433
+ border-radius: 100px;
434
+
435
+ top: -140px;
436
+
437
+ margin-right: 0px;
438
+
439
+ border: none;
440
+
441
+ background-color: transparent;
442
+
443
+ box-shadow: none;
444
+
445
+ text-align: center;
446
+
447
+ color: #252925;
448
+
449
+ }
450
+
451
+ #menu ul.active {
452
+
453
+ -moz-transform: rotate(0deg);
454
+
455
+ -webkit-transform: rotate(0deg);
456
+
457
+ transform: rotate(0deg);
458
+
459
+ -moz-transition: -moz-transform 0.5s ease-out;
460
+
461
+ -webkit-transition: -webkit-transform 0.5s ease-out;
462
+
463
+ transition: transform 0.5s ease-out;
464
+
465
+ }
466
+
467
+ #menu {
468
+
469
+ position: fixed;
470
+
471
+ margin: 0;
472
+
473
+ padding: 0;
474
+
475
+ right: -180px;
476
+
477
+ bottom: -180px;
478
+
479
+ -moz-transition: right 0.5s ease-out, bottom 0.5s ease-out;
480
+
481
+ -webkit-transition: right 0.5s ease-out, bottom 0.5s ease-out;
482
+
483
+ transition: right 0.5s ease-out, bottom 0.5s ease-out;
484
+
485
+ }
486
+
487
+ div.active {
488
+
489
+ right: -100px !important;
490
+
491
+ bottom: -100px !important;
492
+
493
+ -moz-transition: right 0.5s ease-out, bottom 0.5s ease-out;
494
+
495
+ -webkit-transition: right 0.5s ease-out, bottom 0.5s ease-out;
496
+
497
+ transition: right 0.5s ease-out, bottom 0.5s ease-out;
498
+
499
+ }
500
+
501
+
502
+
51
503
  /*
52
504
 
53
505
  SNSボタン部分
@@ -120,10 +572,10 @@
120
572
 
121
573
  }
122
574
 
575
+
576
+
123
577
  ```
124
578
 
125
- ```ここに言語を入力
126
-
127
579
  <body>
128
580
 
129
581
 
@@ -262,6 +714,4 @@
262
714
 
263
715
  </body>
264
716
 
265
-
266
-
267
717
  ```

2

一部不要部分を消去

2016/06/17 08:48

投稿

KandM
KandM

スコア25

test CHANGED
File without changes
test CHANGED
@@ -32,7 +32,7 @@
32
32
 
33
33
 
34
34
 
35
- x
35
+
36
36
 
37
37
  #menu ul li:nth-child(3) {/*SNSボタン部分*/
38
38
 
@@ -44,8 +44,6 @@
44
44
 
45
45
  background-color: #f00;
46
46
 
47
- z-index: 0;
48
-
49
47
  transition: .3s ease;
50
48
 
51
49
  }

1

HTMLの追加

2016/06/17 08:31

投稿

KandM
KandM

スコア25

test CHANGED
File without changes
test CHANGED
@@ -14,6 +14,8 @@
14
14
 
15
15
 
16
16
 
17
+ ```ここに言語を入力
18
+
17
19
  /*Hamburger nav*/
18
20
 
19
21
  .gnav {
@@ -119,3 +121,149 @@
119
121
  color: #f00 ;
120
122
 
121
123
  }
124
+
125
+ ```
126
+
127
+ ```ここに言語を入力
128
+
129
+ <body>
130
+
131
+
132
+
133
+ <d iv class="nav-wrap">
134
+
135
+ <header>
136
+
137
+ <div id="header_title" >
138
+
139
+ <a href="./"><h2>BDM</h2></a>
140
+
141
+ </div>
142
+
143
+ <div class="gnav-btn">
144
+
145
+ <div class="icon-animation">
146
+
147
+ <span class="top"></span>
148
+
149
+ <span class="middle"></span>
150
+
151
+ <span class="bottom"></span>
152
+
153
+ </div>
154
+
155
+ </div>
156
+
157
+ </header>
158
+
159
+ <nav>
160
+
161
+ <ul class="gnav">
162
+
163
+ <li><a href=""></a></li>
164
+
165
+ <li><a href=""></a></li>
166
+
167
+ <li><a href="">カテゴリーリスト</a></li>
168
+
169
+ <li><a href="">#TagList</a></li>
170
+
171
+ <li><a href=""></a></li>
172
+
173
+ </ul>
174
+
175
+ </nav>
176
+
177
+ </div>
178
+
179
+ <div class="wrapper">
180
+
181
+ <h1>sample</h1>
182
+
183
+ <section id="top_content">
184
+
185
+ <div class="top_pic">
186
+
187
+ <img src="http://lorempixel.com/400/200" alt="トップ画像">
188
+
189
+ </div>
190
+
191
+ <div>
192
+
193
+ <p id="title">
194
+
195
+ <Titile><h3>kokonutitle</h3></Titile>
196
+
197
+ </p>
198
+
199
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt autem doloremque, ab iusto quos consequuntur architecto molestiae quibusdam rerum sit eum sint itaque fuga exercitationem, aspernatur velit. Veritatis, cum, deserunt.</p>
200
+
201
+ </div>
202
+
203
+ </section>
204
+
205
+
206
+
207
+ </div>
208
+
209
+
210
+
211
+ <!--以下、片手メニュー-->
212
+
213
+ <div id="menu">
214
+
215
+ <ul>
216
+
217
+ <li><a href="./"><img src="" alt="ホーム" /></a></li>
218
+
219
+ <li><a href="./"><img src="" alt="検索" /></a></li>
220
+
221
+ <!--以下SNS拡散フォーム-->
222
+
223
+ <li>
224
+
225
+
226
+
227
+ <p><a id="modal-open" class="button-link">クリックするとモーダルウィンドウを開きます。</a></p>
228
+
229
+
230
+
231
+ </li>
232
+
233
+ <!--ここまでSNS拡散-->
234
+
235
+ <li id="openMenu"><img src="" alt="メニューを開く" /></li>
236
+
237
+ <li id="closeMenu">メニューを閉じる</li>
238
+
239
+ </ul>
240
+
241
+ </div>
242
+
243
+
244
+
245
+
246
+
247
+ <footer>Footer</footer>
248
+
249
+ <div id="modal-content">
250
+
251
+ <!-- モーダルウィンドウのコンテンツ開始 -->
252
+
253
+ <p>モーダルウィンドウのコンテンツをHTMLで自由に編集することができます。画像や、動画埋め込みなど、お好きなものを入れて下さい。</p>
254
+
255
+ <p>「閉じる」か「背景」をクリックするとモーダルウィンドウを終了します。</p>
256
+
257
+ <p><a id="modal-close" class="button-link">閉じる</a></p>
258
+
259
+ <!-- モーダルウィンドウのコンテンツ終了 -->
260
+
261
+ </div>
262
+
263
+
264
+
265
+ </body>
266
+
267
+
268
+
269
+ ```