質問編集履歴

3

コードを修正しました

2017/06/28 06:34

投稿

r110
r110

スコア16

test CHANGED
File without changes
test CHANGED
@@ -20,215 +20,211 @@
20
20
 
21
21
  <div class="shozaichi">
22
22
 
23
-
24
-
25
- <h3>所在地</h3>
23
+ <h3>所在地</h3>
24
+
25
+ <div class="cal">
26
+
27
+ <p><span class="calname">会社1</p>
28
+
29
+ <div class="map1">
30
+
31
+ <p>MAP</p>
32
+
33
+ </div>
34
+
35
+ </div>
36
+
37
+ <div class="chf">
38
+
39
+ <p><span class="chfname">会社2</p>
40
+
41
+ <div class="map2">
42
+
43
+ <p>MAP</p>
44
+
45
+ </div>
46
+
47
+ </div>
48
+
49
+ </div>
50
+
51
+
52
+
53
+
54
+
55
+ <div id="map">
56
+
57
+ <p>拠点・MAP</p>
58
+
59
+ <div id="cal_map">
60
+
61
+ <!--<p class="mapinfo">会社1</p>-->
62
+
63
+ <div id="map_canvas_01"></div>
26
64
 
27
65
 
28
66
 
29
- <div class="calneco">
67
+ <div class="access_01">
30
-
68
+
31
- <p><span class="calname">■カルネコ株式会社</span>〒100-0005 東京都千代田区丸の内1-8-3丸の内トラストタワー本館22階<br />
69
+ <p class="com">会社1</p>
32
-
70
+
33
- <span class="calname"></span> tel: 03-5220-6234(代表) fax: 03-5220-6264</p>
71
+ <p class="add">住所</p><br /><br />
34
-
72
+
35
- <div class="map1"><p>MAP</p>
73
+ <p class="text">【アクセス】</p>
36
-
37
- </div>
38
-
39
- </div>
40
-
41
- <div class="chf">
42
-
43
- <p><span class="chfname">■カルネコ飯能ファクトリー(CHF)</span>〒357-0063埼玉県飯能市飯能260 </p>
44
-
45
- <div class="map2">
46
-
47
- <p>MAP</p>
48
74
 
49
75
  </div>
50
76
 
51
- </div>
52
-
53
77
  </div>
54
78
 
55
- <hr>
56
-
57
-
58
-
59
- <div id="map">
60
-
61
- <p>拠点・MAP</p>
62
-
63
- <div id="cal_map">
64
-
65
- <!--<p class="mapinfo">会社</p>-->
79
+ <!--<p class="mapinfo">会社</p>-->
80
+
66
-
81
+ <div id="chf_map">
82
+
67
- <div id="map_canvas_01"></div>
83
+ <div id="map_canvas_02"></div>
68
84
 
69
85
 
70
86
 
71
- <div class="access_01">
87
+ <div class="access_02">
72
-
88
+
73
- <p class="com">会社1</p>
89
+ <p class="com">会社</p>
74
-
90
+
75
- <p class="add">住所</p><br /><br />
91
+ <p class="add">住所</p> <br /> <br />
76
-
92
+
77
- <p class="text">【アクセス】</p>
93
+ <p class="text">【アクセス】</p>
78
94
 
79
95
  </div>
80
96
 
81
97
  </div>
82
98
 
99
+
100
+
83
- <!--<p class="mapinfo">会社2</p>-->
101
+ </div><!--#map-->
84
-
102
+
103
+
104
+
105
+
106
+
107
+
108
+
85
- <div id="chf_map">
109
+ <script type="text/javascript">
110
+
86
-
111
+ (function(){
112
+
113
+ var latlng = new google.maps.LatLng(35.682139, 139.768782);
114
+
115
+ var myOptions = {
116
+
117
+ zoom: 15
118
+
119
+ , center: latlng
120
+
121
+ , mapTypeId: google.maps.MapTypeId.ROADMAP
122
+
123
+ };
124
+
125
+ var map_01 = new google.maps.Map(
126
+
127
+ document.getElementById("map_canvas_01")
128
+
129
+ , myOptions
130
+
131
+ );
132
+
133
+ var marker = new google.maps.Marker({
134
+
135
+ position: latlng,
136
+
137
+ map: map_01
138
+
139
+ });
140
+
141
+
142
+
143
+
144
+
145
+ var latlng = new google.maps.LatLng(35.857416, 139.309805);
146
+
147
+ var myOptions = {
148
+
149
+ zoom: 15
150
+
151
+ , center: latlng
152
+
153
+ , mapTypeId: google.maps.MapTypeId.ROADMAP
154
+
155
+ };
156
+
157
+ var map_02 = new google.maps.Map(
158
+
87
- <div id="map_canvas_02"></div>
159
+ document.getElementById("map_canvas_02")
160
+
161
+ , myOptions
162
+
163
+ );
164
+
165
+ var marker = new google.maps.Marker({
166
+
167
+ position: latlng,
168
+
169
+ map: map_02
170
+
171
+ });
172
+
173
+
174
+
175
+ }());
176
+
177
+ </script>
88
178
 
89
179
 
90
180
 
91
- <div class="access_02">
181
+
92
-
93
- <p class="com">会社2 </p>
182
+
94
-
95
- <p class="add">住所</p> <br /> <br />
96
-
97
- <p class="text">【アクセス】</p>
98
-
99
- </div>
100
-
101
- </div>
102
-
103
-
104
-
105
- </div><!--#map-->
106
-
107
-
108
-
109
-
110
-
111
-
112
-
113
- <script type="text/javascript">
183
+ <script type="text/javascript">
114
-
184
+
115
- (function(){
185
+ $(function() {
116
-
117
- var latlng = new google.maps.LatLng(35.682139, 139.768782);
186
+
118
-
119
- var myOptions = {
120
-
121
- zoom: 15
122
-
123
- , center: latlng
124
-
125
- , mapTypeId: google.maps.MapTypeId.ROADMAP
126
-
127
- };
128
-
129
- var map_01 = new google.maps.Map(
130
-
131
- document.getElementById("map_canvas_01")
132
-
133
- , myOptions
134
-
135
- );
136
-
137
- var marker = new google.maps.Marker({
187
+ $('.map1').click(function(){
138
-
188
+
139
- position: latlng,
189
+ $('#cal_map').show();
140
-
190
+
141
- map: map_01
191
+ $('#chf_map').hide();
192
+
193
+
142
194
 
143
195
  });
144
196
 
145
-
146
-
147
-
148
-
149
- var latlng = new google.maps.LatLng(35.857416, 139.309805);
150
-
151
- var myOptions = {
152
-
153
- zoom: 15
154
-
155
- , center: latlng
156
-
157
- , mapTypeId: google.maps.MapTypeId.ROADMAP
197
+ google.maps.event.trigger( map, "resize" ) ;
158
-
198
+
159
- };
199
+ });
160
-
161
- var map_02 = new google.maps.Map(
200
+
162
-
163
- document.getElementById("map_canvas_02")
201
+
164
-
202
+
203
+
204
+
165
- , myOptions
205
+ $(function() {
166
-
167
- );
206
+
168
-
169
- var marker = new google.maps.Marker({
207
+ $('.map2').click(function(){
208
+
170
-
209
+ $('#chf_map').show();
210
+
171
- position: latlng,
211
+ $('#cal_map').hide();
172
-
173
- map: map_02
212
+
213
+
174
214
 
175
215
  });
176
216
 
177
-
178
-
179
- }());
180
-
181
- </script>
182
-
183
-
184
-
185
-
186
-
187
- <script type="text/javascript">
188
-
189
- $(function() {
190
-
191
- $('.map1').click(function(){
192
-
193
- $('#cal_map').show();
194
-
195
- $('#chf_map').hide();
196
-
197
-
198
-
199
- });
200
-
201
217
  google.maps.event.trigger( map, "resize" ) ;
202
218
 
203
219
  });
204
220
 
205
-
206
-
207
-
208
-
209
- $(function() {
210
-
211
- $('.map2').click(function(){
212
-
213
- $('#chf_map').show();
214
-
215
- $('#cal_map').hide();
216
-
217
-
218
-
219
- });
220
-
221
- google.maps.event.trigger( map, "resize" ) ;
222
-
223
- });
224
-
225
221
  </script>
226
222
 
227
223
 
228
224
 
229
225
  <!--css-->
230
226
 
231
- #wrapper #container .gaiyo_waku .access h2{
227
+ .access h2{
232
228
 
233
229
  clear: both;
234
230
 
@@ -244,7 +240,7 @@
244
240
 
245
241
  }
246
242
 
247
- #wrapper #container .gaiyo_waku .shozaichi{
243
+ .shozaichi{
248
244
 
249
245
  height:200px;
250
246
 
@@ -254,7 +250,7 @@
254
250
 
255
251
  }
256
252
 
257
- #wrapper #container .gaiyo_waku .shozaichi h3{
253
+ .shozaichi h3{
258
254
 
259
255
  font-size:20px;
260
256
 
@@ -266,7 +262,7 @@
266
262
 
267
263
  }
268
264
 
269
- #wrapper #container .gaiyo_waku .shozaichi .calneco{
265
+ .shozaichi .cal{
270
266
 
271
267
  height:45px;
272
268
 
@@ -284,7 +280,7 @@
284
280
 
285
281
  }
286
282
 
287
- #wrapper #container .gaiyo_waku .shozaichi .calneco .calname{
283
+ .shozaichi .cal .calname{
288
284
 
289
285
  display: inline-block;
290
286
 
@@ -292,7 +288,7 @@
292
288
 
293
289
  }
294
290
 
295
- #wrapper #container .gaiyo_waku .shozaichi .calneco .map1{
291
+ .shozaichi .cal .map1{
296
292
 
297
293
  line-height:16px;
298
294
 
@@ -324,7 +320,7 @@
324
320
 
325
321
 
326
322
 
327
- #wrapper #container .gaiyo_waku .shozaichi .chf{
323
+ .shozaichi .chf{
328
324
 
329
325
  height:45px;
330
326
 
@@ -342,7 +338,7 @@
342
338
 
343
339
  }
344
340
 
345
- #wrapper #container .gaiyo_waku .shozaichi .chf .chfname{
341
+ .shozaichi .chf .chfname{
346
342
 
347
343
  display: inline-block;
348
344
 
@@ -352,7 +348,7 @@
352
348
 
353
349
 
354
350
 
355
- #wrapper #container .gaiyo_waku .shozaichi .chf .map2{
351
+ .shozaichi .chf .map2{
356
352
 
357
353
  line-height:16px;
358
354
 
@@ -384,7 +380,7 @@
384
380
 
385
381
 
386
382
 
387
- #wrapper #container .gaiyo_waku #map{
383
+ #map{
388
384
 
389
385
  text-align:center;
390
386
 
@@ -394,7 +390,7 @@
394
390
 
395
391
  }
396
392
 
397
- #wrapper #container .gaiyo_waku #map #map_canvas_01{
393
+ #map #map_canvas_01{
398
394
 
399
395
  position:absolute;
400
396
 
@@ -412,7 +408,7 @@
412
408
 
413
409
  }
414
410
 
415
- #wrapper #container .gaiyo_waku #map .access_01{
411
+ #map .access_01{
416
412
 
417
413
  position:absolute;
418
414
 
@@ -436,7 +432,7 @@
436
432
 
437
433
  }
438
434
 
439
- #wrapper #container .gaiyo_waku #map .access_01 .com{
435
+ #map .access_01 .com{
440
436
 
441
437
  font-size:16px;
442
438
 
@@ -446,7 +442,7 @@
446
442
 
447
443
  }
448
444
 
449
- #wrapper #container .gaiyo_waku #map .access_01 .add{
445
+ #map .access_01 .add{
450
446
 
451
447
  font-size:14px;
452
448
 
@@ -458,7 +454,7 @@
458
454
 
459
455
  }
460
456
 
461
- #wrapper #container .gaiyo_waku #map .access_01 .text{
457
+ #map .access_01 .text{
462
458
 
463
459
  font-size:14px;
464
460
 
@@ -472,7 +468,7 @@
472
468
 
473
469
 
474
470
 
475
- #wrapper #container .gaiyo_waku #map #chf_map{
471
+ #map #chf_map{
476
472
 
477
473
  display:none;
478
474
 
@@ -480,7 +476,7 @@
480
476
 
481
477
 
482
478
 
483
- #wrapper #container .gaiyo_waku #map #map_canvas_02{
479
+ #map #map_canvas_02{
484
480
 
485
481
  position:absolute;
486
482
 
@@ -498,7 +494,7 @@
498
494
 
499
495
  }
500
496
 
501
- #wrapper #container .gaiyo_waku .access_02{
497
+ .access_02{
502
498
 
503
499
  position:absolute;
504
500
 
@@ -524,7 +520,7 @@
524
520
 
525
521
  }
526
522
 
527
- #wrapper #container .gaiyo_waku #map .access_02 .com{
523
+ #map .access_02 .com{
528
524
 
529
525
  font-size:16px;
530
526
 
@@ -534,7 +530,7 @@
534
530
 
535
531
  }
536
532
 
537
- #wrapper #container .gaiyo_waku #map .access_02 .add{
533
+ #map .access_02 .add{
538
534
 
539
535
  font-size:14px;
540
536
 
@@ -546,7 +542,7 @@
546
542
 
547
543
  }
548
544
 
549
- #wrapper #container .gaiyo_waku #map .access_02 .text{
545
+ #map .access_02 .text{
550
546
 
551
547
  font-size:14px;
552
548
 
@@ -566,38 +562,6 @@
566
562
 
567
563
 
568
564
 
569
- #wrapper #container .gaiyo_waku #map p{
570
-
571
- line-height:120px;
572
-
573
- font-size:20px;
574
-
575
- font-weight:bold;
576
-
577
- letter-spacing:2px;
578
-
579
-
580
-
581
- }
582
-
583
-
584
-
585
- #wrapper #container .gaiyo_waku #map .mapinfo{
586
-
587
- line-height: 40px;
588
-
589
- width:840px;
590
-
591
- margin:auto;
592
-
593
- text-align: left;
594
-
595
- font-weight: bold;
596
-
597
- font-size: 14px;
598
-
599
- }
600
-
601
565
 
602
566
 
603
567
 

2

コードを修正しました

2017/06/28 06:34

投稿

r110
r110

スコア16

test CHANGED
File without changes
test CHANGED
@@ -8,26 +8,52 @@
8
8
 
9
9
  <!--html-->
10
10
 
11
+ <div class="access">
12
+
13
+ <h2>所在・MAP</h2>
14
+
15
+ </div>
16
+
17
+ <hr>
18
+
11
19
 
12
20
 
13
21
  <div class="shozaichi">
14
22
 
23
+
24
+
15
25
  <h3>所在地</h3>
16
26
 
27
+
28
+
17
- <div class="c">
29
+ <div class="calneco">
30
+
18
-
31
+ <p><span class="calname">■カルネコ株式会社</span>〒100-0005 東京都千代田区丸の内1-8-3丸の内トラストタワー本館22階<br />
32
+
33
+ <span class="calname"></span> tel: 03-5220-6234(代表) fax: 03-5220-6264</p>
34
+
19
- <div class="map1"><p>MAPボタン</p></div>
35
+ <div class="map1"><p>MAP</p>
20
36
 
21
37
  </div>
22
38
 
39
+ </div>
40
+
23
- <div class="ch">
41
+ <div class="chf">
24
-
42
+
25
- <div class="map2"><p>MAPボタン</p></div>
43
+ <p><span class="chfname">■カルネコ飯能ファクトリー(CHF)</span>〒357-0063埼玉県飯能市飯能260 </p>
44
+
45
+ <div class="map2">
46
+
47
+ <p>MAP</p>
26
48
 
27
49
  </div>
28
50
 
51
+ </div>
52
+
29
53
  </div>
30
54
 
55
+ <hr>
56
+
31
57
 
32
58
 
33
59
  <div id="map">
@@ -36,20 +62,40 @@
36
62
 
37
63
  <div id="cal_map">
38
64
 
65
+ <!--<p class="mapinfo">会社1</p>-->
66
+
39
- <div id="map_canvas_01"></div>
67
+ <div id="map_canvas_01"></div>
68
+
69
+
70
+
40
-
71
+ <div class="access_01">
72
+
41
-
73
+ <p class="com">会社1</p>
74
+
75
+ <p class="add">住所</p><br /><br />
76
+
77
+ <p class="text">【アクセス】</p>
42
78
 
43
79
  </div>
44
80
 
45
81
  </div>
46
82
 
83
+ <!--<p class="mapinfo">会社2</p>-->
84
+
47
85
  <div id="chf_map">
48
86
 
49
87
  <div id="map_canvas_02"></div>
50
88
 
51
89
 
52
90
 
91
+ <div class="access_02">
92
+
93
+ <p class="com">会社2 </p>
94
+
95
+ <p class="add">住所</p> <br /> <br />
96
+
97
+ <p class="text">【アクセス】</p>
98
+
53
99
  </div>
54
100
 
55
101
  </div>
@@ -60,6 +106,10 @@
60
106
 
61
107
 
62
108
 
109
+
110
+
111
+
112
+
63
113
  <script type="text/javascript">
64
114
 
65
115
  (function(){
@@ -128,61 +178,121 @@
128
178
 
129
179
  }());
130
180
 
181
+ </script>
182
+
183
+
184
+
185
+
186
+
187
+ <script type="text/javascript">
188
+
189
+ $(function() {
190
+
191
+ $('.map1').click(function(){
192
+
193
+ $('#cal_map').show();
194
+
195
+ $('#chf_map').hide();
196
+
197
+
198
+
199
+ });
200
+
201
+ google.maps.event.trigger( map, "resize" ) ;
202
+
203
+ });
204
+
205
+
206
+
207
+
208
+
209
+ $(function() {
210
+
211
+ $('.map2').click(function(){
212
+
213
+ $('#chf_map').show();
214
+
215
+ $('#cal_map').hide();
216
+
217
+
218
+
219
+ });
220
+
221
+ google.maps.event.trigger( map, "resize" ) ;
222
+
223
+ });
224
+
131
225
  </script>
132
226
 
133
-
134
-
135
-
136
-
137
- <script type="text/javascript">
138
-
139
- $(function() {
140
-
141
- $('.map1').click(function(){
142
-
143
- $('#cal_map').show();
144
-
145
- $('#chf_map').hide();
146
-
147
-
148
-
149
- });
150
-
151
- google.maps.event.trigger( map, "resize" ) ;
152
-
153
- });
154
-
155
-
156
-
157
-
158
-
159
- $(function() {
160
-
161
- $('.map2').click(function(){
162
-
163
- $('#chf_map').show();
164
-
165
- $('#cal_map').hide();
166
-
167
-
168
-
169
- });
170
-
171
- google.maps.event.trigger( map, "resize" ) ;
172
-
173
- });
174
-
175
- </script>
176
-
177
-
178
-
179
- <!--ここまで!!!!!!!!!!-->
180
-
181
227
 
182
228
 
183
229
  <!--css-->
184
230
 
231
+ #wrapper #container .gaiyo_waku .access h2{
232
+
233
+ clear: both;
234
+
185
- .shozaichi .c .map1{
235
+ line-height: 120px;
236
+
237
+ font-size: 24px;
238
+
239
+ font-weight: bold;
240
+
241
+ text-align: center;
242
+
243
+ letter-spacing: 4px;
244
+
245
+ }
246
+
247
+ #wrapper #container .gaiyo_waku .shozaichi{
248
+
249
+ height:200px;
250
+
251
+ text-align:center;
252
+
253
+ margin-bottom:50px;
254
+
255
+ }
256
+
257
+ #wrapper #container .gaiyo_waku .shozaichi h3{
258
+
259
+ font-size:20px;
260
+
261
+
262
+
263
+ font-weight:bold;
264
+
265
+ letter-spacing:2px;
266
+
267
+ }
268
+
269
+ #wrapper #container .gaiyo_waku .shozaichi .calneco{
270
+
271
+ height:45px;
272
+
273
+ display:flex;
274
+
275
+ text-align:left;
276
+
277
+ font-size:16px;
278
+
279
+ line-height:27px;
280
+
281
+ position:relative;
282
+
283
+ margin-bottom:30px;
284
+
285
+ }
286
+
287
+ #wrapper #container .gaiyo_waku .shozaichi .calneco .calname{
288
+
289
+ display: inline-block;
290
+
291
+ width: 18em;
292
+
293
+ }
294
+
295
+ #wrapper #container .gaiyo_waku .shozaichi .calneco .map1{
186
296
 
187
297
  line-height:16px;
188
298
 
@@ -214,7 +324,35 @@
214
324
 
215
325
 
216
326
 
327
+ #wrapper #container .gaiyo_waku .shozaichi .chf{
328
+
329
+ height:45px;
330
+
331
+ display:flex;
332
+
333
+ text-align:left;
334
+
335
+ font-size:16px;
336
+
337
+ line-height:27px;
338
+
339
+ position:relative;
340
+
341
+ margin-bottom:30px;
342
+
343
+ }
344
+
345
+ #wrapper #container .gaiyo_waku .shozaichi .chf .chfname{
346
+
347
+ display: inline-block;
348
+
349
+ width: 18em;
350
+
351
+ }
352
+
353
+
354
+
217
- .shozaichi .ch .map2{
355
+ #wrapper #container .gaiyo_waku .shozaichi .chf .map2{
218
356
 
219
357
  line-height:16px;
220
358
 
@@ -246,7 +384,7 @@
246
384
 
247
385
 
248
386
 
249
- #map{
387
+ #wrapper #container .gaiyo_waku #map{
250
388
 
251
389
  text-align:center;
252
390
 
@@ -256,7 +394,7 @@
256
394
 
257
395
  }
258
396
 
259
- #map #map_canvas_01{
397
+ #wrapper #container .gaiyo_waku #map #map_canvas_01{
260
398
 
261
399
  position:absolute;
262
400
 
@@ -274,9 +412,67 @@
274
412
 
275
413
  }
276
414
 
277
-
415
+ #wrapper #container .gaiyo_waku #map .access_01{
416
+
278
-
417
+ position:absolute;
418
+
419
+ top:590px;
420
+
421
+ left:50px;
422
+
423
+ width:760px;
424
+
425
+ height:220px;
426
+
427
+ margin:0px auto 50px;
428
+
429
+ background-color:#fff;
430
+
431
+ text-align:left;
432
+
433
+ padding:30px 40px;
434
+
435
+
436
+
437
+ }
438
+
439
+ #wrapper #container .gaiyo_waku #map .access_01 .com{
440
+
279
- #map #chf_map{
441
+ font-size:16px;
442
+
443
+ line-height:27px;
444
+
445
+ font-weight:bold;
446
+
447
+ }
448
+
449
+ #wrapper #container .gaiyo_waku #map .access_01 .add{
450
+
451
+ font-size:14px;
452
+
453
+ line-height:27px;
454
+
455
+ font-weight:normal;
456
+
457
+
458
+
459
+ }
460
+
461
+ #wrapper #container .gaiyo_waku #map .access_01 .text{
462
+
463
+ font-size:14px;
464
+
465
+ line-height:27px;
466
+
467
+ font-weight:normal;
468
+
469
+
470
+
471
+ }
472
+
473
+
474
+
475
+ #wrapper #container .gaiyo_waku #map #chf_map{
280
476
 
281
477
  display:none;
282
478
 
@@ -284,7 +480,7 @@
284
480
 
285
481
 
286
482
 
287
- #map #map_canvas_02{
483
+ #wrapper #container .gaiyo_waku #map #map_canvas_02{
288
484
 
289
485
  position:absolute;
290
486
 
@@ -302,6 +498,108 @@
302
498
 
303
499
  }
304
500
 
501
+ #wrapper #container .gaiyo_waku .access_02{
502
+
503
+ position:absolute;
504
+
505
+ top:590px;
506
+
507
+ left:50px;
508
+
509
+ width:760px;
510
+
511
+ height:220px;
512
+
513
+ margin:0px auto 50px;
514
+
515
+ background-color:#fff;
516
+
517
+ text-align:left;
518
+
519
+ padding:30px 40px;
520
+
521
+
522
+
523
+
524
+
525
+ }
526
+
527
+ #wrapper #container .gaiyo_waku #map .access_02 .com{
528
+
529
+ font-size:16px;
530
+
531
+ line-height:27px;
532
+
533
+ font-weight:bold;
534
+
535
+ }
536
+
537
+ #wrapper #container .gaiyo_waku #map .access_02 .add{
538
+
539
+ font-size:14px;
540
+
541
+ line-height:27px;
542
+
543
+ font-weight:normal;
544
+
545
+
546
+
547
+ }
548
+
549
+ #wrapper #container .gaiyo_waku #map .access_02 .text{
550
+
551
+ font-size:14px;
552
+
553
+ line-height:27px;
554
+
555
+ font-weight:normal;
556
+
557
+
558
+
559
+ }
560
+
561
+
562
+
563
+
564
+
565
+
566
+
567
+
568
+
569
+ #wrapper #container .gaiyo_waku #map p{
570
+
571
+ line-height:120px;
572
+
573
+ font-size:20px;
574
+
575
+ font-weight:bold;
576
+
577
+ letter-spacing:2px;
578
+
579
+
580
+
581
+ }
582
+
583
+
584
+
585
+ #wrapper #container .gaiyo_waku #map .mapinfo{
586
+
587
+ line-height: 40px;
588
+
589
+ width:840px;
590
+
591
+ margin:auto;
592
+
593
+ text-align: left;
594
+
595
+ font-weight: bold;
596
+
597
+ font-size: 14px;
598
+
599
+ }
600
+
601
+
602
+
305
603
 
306
604
 
307
605
 

1

コードを修正しました

2017/06/28 06:26

投稿

r110
r110

スコア16

test CHANGED
File without changes
test CHANGED
@@ -8,18 +8,24 @@
8
8
 
9
9
  <!--html-->
10
10
 
11
+
12
+
13
+ <div class="shozaichi">
14
+
15
+ <h3>所在地</h3>
16
+
11
- <div>
17
+ <div class="c">
12
-
18
+
13
- <div class="map1btn"><p>MAPボタン</p></div>
19
+ <div class="map1"><p>MAPボタン</p></div>
20
+
21
+ </div>
22
+
23
+ <div class="ch">
24
+
25
+ <div class="map2"><p>MAPボタン</p></div>
14
26
 
15
27
  </div>
16
28
 
17
- <div>
18
-
19
- <div class="map2btn"><p>MAPボタン2</p></div>
20
-
21
- </div>
22
-
23
29
  </div>
24
30
 
25
31
 
@@ -28,57 +34,219 @@
28
34
 
29
35
  <p>拠点・MAP</p>
30
36
 
31
- <div id="map1">
37
+ <div id="cal_map">
32
38
 
33
39
  <div id="map_canvas_01"></div>
34
40
 
41
+
42
+
43
+ </div>
44
+
35
45
  </div>
36
46
 
37
- <div id="map">
47
+ <div id="chf_map">
38
48
 
39
49
  <div id="map_canvas_02"></div>
40
50
 
51
+
52
+
41
- </div>
53
+ </div>
42
54
 
43
55
  </div>
44
56
 
45
57
 
46
58
 
59
+ </div><!--#map-->
60
+
61
+
62
+
63
+ <script type="text/javascript">
64
+
65
+ (function(){
66
+
67
+ var latlng = new google.maps.LatLng(35.682139, 139.768782);
68
+
69
+ var myOptions = {
70
+
71
+ zoom: 15
72
+
73
+ , center: latlng
74
+
75
+ , mapTypeId: google.maps.MapTypeId.ROADMAP
76
+
77
+ };
78
+
79
+ var map_01 = new google.maps.Map(
80
+
81
+ document.getElementById("map_canvas_01")
82
+
83
+ , myOptions
84
+
85
+ );
86
+
87
+ var marker = new google.maps.Marker({
88
+
89
+ position: latlng,
90
+
91
+ map: map_01
92
+
93
+ });
94
+
95
+
96
+
97
+
98
+
99
+ var latlng = new google.maps.LatLng(35.857416, 139.309805);
100
+
101
+ var myOptions = {
102
+
103
+ zoom: 15
104
+
105
+ , center: latlng
106
+
107
+ , mapTypeId: google.maps.MapTypeId.ROADMAP
108
+
109
+ };
110
+
111
+ var map_02 = new google.maps.Map(
112
+
113
+ document.getElementById("map_canvas_02")
114
+
115
+ , myOptions
116
+
117
+ );
118
+
119
+ var marker = new google.maps.Marker({
120
+
121
+ position: latlng,
122
+
123
+ map: map_02
124
+
125
+ });
126
+
127
+
128
+
129
+ }());
130
+
47
- <!--javascript-->
131
+ </script>
132
+
133
+
134
+
135
+
48
136
 
49
137
  <script type="text/javascript">
50
138
 
51
139
  $(function() {
52
140
 
53
- $('.map1btn').click(function(){
141
+ $('.map1').click(function(){
54
142
 
55
143
  $('#cal_map').show();
56
144
 
57
145
  $('#chf_map').hide();
58
146
 
147
+
148
+
59
149
  });
60
150
 
151
+ google.maps.event.trigger( map, "resize" ) ;
152
+
61
153
  });
62
154
 
155
+
156
+
157
+
158
+
63
159
  $(function() {
64
160
 
65
- $('.map2btn').click(function(){
161
+ $('.map2').click(function(){
66
162
 
67
163
  $('#chf_map').show();
68
164
 
69
165
  $('#cal_map').hide();
70
166
 
167
+
168
+
71
169
  });
72
170
 
171
+ google.maps.event.trigger( map, "resize" ) ;
172
+
73
173
  });
74
174
 
75
175
  </script>
76
176
 
77
177
 
78
178
 
179
+ <!--ここまで!!!!!!!!!!-->
180
+
181
+
182
+
79
183
  <!--css-->
80
184
 
185
+ .shozaichi .c .map1{
186
+
187
+ line-height:16px;
188
+
189
+ letter-spacing:1px;
190
+
191
+ font-size:12px;
192
+
193
+ display:block;
194
+
195
+ color:#fff;
196
+
197
+ background-color:#000;
198
+
199
+ padding-left:4px;
200
+
201
+ padding-right:4px;
202
+
203
+ margin-right:50px;
204
+
205
+ position:absolute;
206
+
207
+ right:0;
208
+
209
+ bottom:25px;
210
+
211
+ cursor:pointer;
212
+
213
+ }
214
+
215
+
216
+
217
+ .shozaichi .ch .map2{
218
+
219
+ line-height:16px;
220
+
221
+ letter-spacing:1px;
222
+
223
+ font-size:12px;
224
+
225
+ display:block;
226
+
227
+ color:#fff;
228
+
229
+ background-color:#000;
230
+
231
+ padding-left:4px;
232
+
233
+ padding-right:4px;
234
+
235
+ margin-right:50px;
236
+
237
+ position:absolute;
238
+
239
+ right:0;
240
+
241
+ bottom:25px;
242
+
243
+ cursor:pointer;
244
+
245
+ }
246
+
247
+
248
+
81
- #map{
249
+ #map{
82
250
 
83
251
  text-align:center;
84
252
 
@@ -88,7 +256,7 @@
88
256
 
89
257
  }
90
258
 
91
- #map #map_canvas_01{
259
+ #map #map_canvas_01{
92
260
 
93
261
  position:absolute;
94
262
 
@@ -100,27 +268,45 @@
100
268
 
101
269
  height:410px;
102
270
 
271
+ margin:0px auto 50px;
272
+
273
+
274
+
275
+ }
276
+
277
+
278
+
279
+ #map #chf_map{
280
+
281
+ display:none;
282
+
283
+ }
284
+
285
+
286
+
287
+ #map #map_canvas_02{
288
+
289
+ position:absolute;
290
+
291
+ top:180px;
292
+
293
+ left:50px;
294
+
295
+ width:840px;
296
+
297
+ height:410px;
298
+
103
299
  margin:auto;
104
300
 
105
301
 
106
302
 
107
303
  }
108
304
 
109
- #map #map_canvas_02{
305
+
110
-
111
- position:absolute;
306
+
112
-
113
- top:180px;
307
+
114
-
115
- left:50px;
308
+
116
-
117
- width:840px;
309
+
118
-
119
- height:410px;
120
-
121
- margin:auto;
122
-
123
- }
124
310
 
125
311
  ```
126
312