質問編集履歴

3

質問を修正いたしました。

2017/03/05 03:16

投稿

MASAMI-O
MASAMI-O

スコア15

test CHANGED
@@ -1 +1 @@
1
- コンテンツの幅を画面に合わせ変えるとともに中央揃えす。
1
+ PC画面に対し横幅が余ってす。
test CHANGED
@@ -2,11 +2,13 @@
2
2
 
3
3
 
4
4
 
5
- 現在、サイト画像を表示させたのですが、画像が左寄りに来ると同時に画面サイズによって画像の幅が変わってしまいます。
5
+ 現在、以下のよう記述してすが、ブラウザーで表示して
6
-
6
+
7
- そこで、画像の幅を画面合わせて変えるととも画面の幅に対して中央揃えしたいです。しかし、その方法イマイチ分かっていせん。よろしくお願いいたします。
7
+ スクロールすると右側余白残ります。
8
+
8
-
9
+ その消し方を教えていただきたいです。
10
+
9
-
11
+ よろしくお願いいたします。
10
12
 
11
13
 
12
14
 
@@ -16,7 +18,95 @@
16
18
 
17
19
  ここにご自身が実行したソースコードを書いてください
18
20
 
21
+ ```
22
+
23
+ <section>
24
+
25
+ <header class="header">
26
+
27
+ <div class="header-menu">
28
+
29
+ <div class="page-title">
30
+
31
+ <a href="correct-observe.html"><img src="image/logo.png"></a>
32
+
33
+ <h1><a href="correct-observe.html">CORRECT OBSERVE</a></h1>
34
+
35
+ </div>
36
+
37
+ <ul class="dropmenu" id="left-to-right">
38
+
39
+ <li><a href="#news">NEWS</a>
40
+
41
+ </li>
42
+
43
+ <li><a href="#division">DIVISION</a>
44
+
45
+ <ul>
46
+
47
+ <li><a href="#">WEB MEDIA</a></li>
48
+
49
+ <li><a href="#">PRODUCTION</a></li>
50
+
51
+ <li><a href="#">PUBLISHING</a></li>
52
+
53
+ <li><a href="#">FUNDING</a></li>
54
+
55
+ </ul>
56
+
57
+ </li>
58
+
59
+ <li><a href="#about">ABOUT US</a>
60
+
61
+ <ul>
62
+
63
+ <li><a href="#">COMPANY</a></li>
64
+
65
+ <li><a href="#">HISTORY</a></li>
66
+
67
+ <li><a href="#">PROFILE</a></li>
68
+
69
+ <li><a href="#">PRIVACY POLICY</a></li>
70
+
71
+ </ul>
72
+
73
+ </li>
74
+
75
+ <li><a href="#">CONTACT</a>
76
+
77
+ <ul>
78
+
79
+ <li><a href="#">MAIL</a></li>
80
+
81
+ <li><a href="#">PHONE</a></li>
82
+
83
+ </ul>
84
+
85
+ </li>
86
+
87
+ </ul>
88
+
89
+ </div>
90
+
91
+ </header>
92
+
93
+ <div class="main-image">
94
+
95
+ <h1>Observe & Create the Benefits</h1>
96
+
97
+ </div>
98
+
99
+ </section>
100
+
101
+ <article class="main-part">
102
+
103
+ <div class="news" id="news">
104
+
105
+
106
+
107
+ </div>
108
+
19
- ```<div class="contents">
109
+ <div class="contents">
20
110
 
21
111
  <div class="contents-division">
22
112
 
@@ -92,12 +182,452 @@
92
182
 
93
183
  </li>
94
184
 
185
+ </ul>
186
+
95
187
  </div>
96
188
 
189
+ <div class="contents-about">
190
+
191
+ <h1 id="about">ABOUT US</h1>
192
+
193
+ <ul>
194
+
195
+ <li>
196
+
197
+ <div class="about-images">
198
+
199
+ <img src="image/office.png">
200
+
201
+ <a href="#"><div class="mask">
202
+
203
+ <div class="caption">COMPANY</div>
204
+
205
+ </div></a>
206
+
207
+ </div>
208
+
209
+ </li>
210
+
211
+ <li>
212
+
213
+ <div class="about-images">
214
+
215
+ <img src="image/history.png" />
216
+
217
+ <a href="#"><div class="mask">
218
+
219
+ <div class="caption">HISTORY</div>
220
+
221
+ </div></a>
222
+
223
+ </div>
224
+
225
+ </li>
226
+
227
+ <li>
228
+
229
+ <div class="about-images">
230
+
231
+ <img src="image/profile.png"/>
232
+
233
+ <a href="#"><div class="mask">
234
+
235
+ <div class="caption">PLOFILE</div>
236
+
237
+ </div></a>
238
+
239
+ </div>
240
+
241
+ </li>
242
+
243
+ <li>
244
+
245
+ <div class="about-images">
246
+
247
+ <img src="image/privacy.png"/>
248
+
249
+ <a href="#"><div class="mask">
250
+
251
+ <div class="caption">PRIVACY POLICY</div>
252
+
253
+ </div></a>
254
+
255
+ </div>
256
+
257
+ </li>
258
+
259
+ </ul>
260
+
261
+ </div>
262
+
263
+ </div>
264
+
265
+ </article>
266
+
267
+
268
+
97
269
  ```
98
270
 
99
271
  ```CSS
100
272
 
273
+ @charset "UTF-8";
274
+
275
+
276
+
277
+ body{
278
+
279
+ font-family:"futura", sans-serif;
280
+
281
+ text-decoration: none;
282
+
283
+ }
284
+
285
+
286
+
287
+ a{
288
+
289
+ text-decoration: none;
290
+
291
+ }
292
+
293
+
294
+
295
+ a:link{
296
+
297
+ color:#ffffff;
298
+
299
+ }
300
+
301
+
302
+
303
+ li {
304
+
305
+ list-style: none;
306
+
307
+ }
308
+
309
+
310
+
311
+ .header a:visited{
312
+
313
+ color:#ffffff;
314
+
315
+ }
316
+
317
+
318
+
319
+ .main-part a:visited{
320
+
321
+ color:#ffffff;
322
+
323
+ }
324
+
325
+
326
+
327
+ .footer a:visited{
328
+
329
+ color:#ffffff;
330
+
331
+ }
332
+
333
+
334
+
335
+ section {
336
+
337
+ background-image: url("image/main-image.png");
338
+
339
+ background-size:cover;
340
+
341
+ height:700px;
342
+
343
+ }
344
+
345
+
346
+
347
+ .header{
348
+
349
+ background-color: #16244b;
350
+
351
+ }
352
+
353
+
354
+
355
+ .header-menu{
356
+
357
+ padding-top:5px;
358
+
359
+ }
360
+
361
+
362
+
363
+ .page-title img{
364
+
365
+ padding-top:4px;
366
+
367
+ padding-left:60px;
368
+
369
+ padding-right:10px;
370
+
371
+ width:40px;
372
+
373
+ height:40px;
374
+
375
+ float:left;
376
+
377
+ }
378
+
379
+
380
+
381
+ .page-title h1{
382
+
383
+ font-size:36px;
384
+
385
+ font-weight:normal;
386
+
387
+ color:#ffffff;
388
+
389
+ }
390
+
391
+
392
+
393
+ .dropmenu{
394
+
395
+ *zoom: 1;
396
+
397
+ list-style-type: none;
398
+
399
+ width:100%;
400
+
401
+ margin:0 auto;
402
+
403
+ padding-left:10%;
404
+
405
+ padding-right:10%;
406
+
407
+
408
+
409
+ }
410
+
411
+
412
+
413
+ .dropmenu:before, .dropmenu:after{
414
+
415
+ content: "";
416
+
417
+ display: table;
418
+
419
+ }
420
+
421
+
422
+
423
+ .dropmenu:after{
424
+
425
+ clear: both;
426
+
427
+ }
428
+
429
+ .dropmenu li{
430
+
431
+ position: relative;
432
+
433
+ float: left;
434
+
435
+ margin: 0;
436
+
437
+ text-align: center;
438
+
439
+ width:20%;
440
+
441
+ display: inline-block;
442
+
443
+ }
444
+
445
+
446
+
447
+ .dropmenu li a{
448
+
449
+ display: block;
450
+
451
+ margin: 0;
452
+
453
+ padding: 15px 0 ;
454
+
455
+ background: #16244b;
456
+
457
+ color: #ffffff;
458
+
459
+ font-size: 24px;
460
+
461
+ line-height: 1;
462
+
463
+ text-decoration: none;
464
+
465
+ }
466
+
467
+
468
+
469
+ .dropmenu li ul{
470
+
471
+ list-style: none;
472
+
473
+ position: absolute;
474
+
475
+ z-index: 9999;
476
+
477
+ top: 100%;
478
+
479
+ left: 0;
480
+
481
+ margin: 0;
482
+
483
+ padding: 0;
484
+
485
+ }
486
+
487
+
488
+
489
+ .dropmenu li ul li{
490
+
491
+ padding: 0;
492
+
493
+ width:100%
494
+
495
+ }
496
+
497
+
498
+
499
+ .dropmenu li ul li a{
500
+
501
+ padding-top: 13px;
502
+
503
+ padding-bottom:13px;
504
+
505
+ padding-left:13px;
506
+
507
+ border-top: 1px solid #a91f27;
508
+
509
+ background: #16244b;
510
+
511
+ text-align: left;
512
+
513
+ font-size: 18px;
514
+
515
+ display: block;
516
+
517
+ }
518
+
519
+ .dropmenu li:hover > a{
520
+
521
+ background: #a91f27;
522
+
523
+ }
524
+
525
+
526
+
527
+ .dropmenu li:active > a{
528
+
529
+ background: #a91f27;
530
+
531
+ }
532
+
533
+
534
+
535
+ .dropmenu li a:hover{
536
+
537
+ background: #a91f27;
538
+
539
+ }
540
+
541
+
542
+
543
+ .dropmenu li a:active{
544
+
545
+ background: #a91f27;
546
+
547
+ }
548
+
549
+
550
+
551
+ #left-to-right ul{
552
+
553
+ overflow: hidden;
554
+
555
+ width: 0;
556
+
557
+ transition: .5s;
558
+
559
+ }
560
+
561
+
562
+
563
+ #left-to-right li:hover ul{
564
+
565
+ width: 100%;
566
+
567
+ }
568
+
569
+
570
+
571
+ #left-to-right li:active ul{
572
+
573
+ width: 100%;
574
+
575
+ }
576
+
577
+
578
+
579
+ #left-to-right li:hover ul li a{
580
+
581
+ white-space: nowrap;
582
+
583
+ }
584
+
585
+
586
+
587
+ #left-to-right li:active ul li a{
588
+
589
+ white-space: nowrap;
590
+
591
+ }
592
+
593
+
594
+
595
+ .main-image h1{
596
+
597
+ color:#ffffff;
598
+
599
+ text-align:center;
600
+
601
+ padding-top:140px;
602
+
603
+ font-size:78px;
604
+
605
+ }
606
+
607
+
608
+
609
+ .contents h1{
610
+
611
+ color: #16244b;
612
+
613
+ font-size: 50px;
614
+
615
+ text-align: center;
616
+
617
+ }
618
+
619
+ .contents-division ul{
620
+
621
+ margin-left: 5%;
622
+
623
+ margin-right:5%;
624
+
625
+
626
+
627
+ }
628
+
629
+
630
+
101
631
  .contents-division li{
102
632
 
103
633
  display: table-cell;
@@ -108,7 +638,7 @@
108
638
 
109
639
  .division-images {
110
640
 
111
- widows: 600px;
641
+ width: 600px;
112
642
 
113
643
  height: 300px;
114
644
 
@@ -120,6 +650,8 @@
120
650
 
121
651
  padding: 0;
122
652
 
653
+
654
+
123
655
  }
124
656
 
125
657
 
@@ -220,18 +752,142 @@
220
752
 
221
753
 
222
754
 
755
+ .contents-about ul{
756
+
757
+ margin-left: 5%;
758
+
759
+ margin-right:5%;
760
+
761
+ }
762
+
763
+
764
+
765
+ .contents-about li{
766
+
767
+ display: table-cell;
768
+
769
+ text-align: center;
770
+
771
+ }
772
+
773
+
774
+
775
+ .about-images {
776
+
777
+ width: 300px;
778
+
779
+ height: 150px;
780
+
781
+ overflow: hidden;
782
+
783
+ position: relative;
784
+
785
+ margin-bottom: 40px;
786
+
787
+ }
788
+
789
+
790
+
791
+ .about-images img{
792
+
793
+ width: 50%;
794
+
795
+ height: 100%;
796
+
797
+ }
798
+
799
+
800
+
801
+ .about-images .caption {
802
+
803
+ font-size: 18px;
804
+
805
+ color: #ffffff;
806
+
807
+ text-align: center;
808
+
809
+ padding-top: 43%;
810
+
811
+
812
+
813
+ }
814
+
815
+
816
+
817
+ .about-images .mask {
818
+
819
+ width: 50%;
820
+
821
+ height: 100%;
822
+
823
+ position: absolute;
824
+
825
+ top: 0;
826
+
827
+ left: 0;
828
+
829
+ margin-left: -50%;
830
+
831
+ background-color: #16244b;
832
+
833
+ -webkit-transition: all 1s ease;
834
+
835
+ transition: all 1s ease;
836
+
837
+ }
838
+
839
+ .about-images:hover .mask {
840
+
841
+ margin-left: 0px;
842
+
843
+ }
844
+
845
+
846
+
847
+ .about-images:active .mask {
848
+
849
+ margin-left: 0px;
850
+
851
+ }
852
+
853
+
854
+
855
+ .about-images img {
856
+
857
+ -webkit-transition: all 1s ease;
858
+
859
+ transition: all 1s ease;
860
+
861
+ }
862
+
863
+ .about-images:hover img {
864
+
865
+ margin-left: 50%;
866
+
867
+ }
868
+
869
+
870
+
871
+ .mask:hover {
872
+
873
+ background-color: #a91f27;
874
+
875
+ }
876
+
877
+
878
+
879
+ .mask:active {
880
+
881
+ background-color: #a91f27;
882
+
883
+ }
884
+
885
+
886
+
223
887
 
224
888
 
225
889
  ```
226
890
 
227
- ###試したこと
228
-
229
- .division-imageの所のwidthとheightを%にしてみましたが、
230
-
231
- おかしなことになってしまいます。
232
-
233
-
234
-
235
891
  ###補足情報(言語/FW/ツール等のバージョンなど)
236
892
 
237
893
  html css

2

説明文を変更しました。

2017/03/05 03:16

投稿

MASAMI-O
MASAMI-O

スコア15

test CHANGED
File without changes
test CHANGED
@@ -2,9 +2,9 @@
2
2
 
3
3
 
4
4
 
5
- 現在、サイトにコンテンツを表示させたいのですが、コンテンツが左寄りに来ると同時に、画面サイズによってコンテンツの幅が変わってしまいます。
5
+ 現在、サイトに画像を表示させたいのですが、画像が左寄りに来ると同時に、画面サイズによって画像の幅が変わってしまいます。
6
-
6
+
7
- そこで、コンテンツの幅を画面に合わせて変えるとともに画面の幅に対して中央揃えしたいです。しかし、その方法がイマイチ分かっていません。よろしくお願いいたします。
7
+ そこで、画像の幅を画面に合わせて変えるとともに画面の幅に対して中央揃えしたいです。しかし、その方法がイマイチ分かっていません。よろしくお願いいたします。
8
8
 
9
9
 
10
10
 

1

質問を変更しました。

2017/03/04 19:43

投稿

MASAMI-O
MASAMI-O

スコア15

test CHANGED
File without changes
test CHANGED
@@ -2,9 +2,11 @@
2
2
 
3
3
 
4
4
 
5
- 現在、サイトにコンテンツを表示させたいのですが、コンテンツが微妙な位置に来ると同時に、画面サイズによってコンテンツの幅が変わってしまいます。
5
+ 現在、サイトにコンテンツを表示させたいのですが、コンテンツが左寄りに来ると同時に、画面サイズによってコンテンツの幅が変わってしまいます。
6
-
6
+
7
- そこで、コンテンツの幅を画面に合わせて変えるとともに中央揃えしたいです。よろしくお願いいたします。
7
+ そこで、コンテンツの幅を画面に合わせて変えるとともに画面の幅に対して中央揃えしたいです。しかし、その方法がイマイチ分かっていません。よろしくお願いいたします。
8
+
9
+
8
10
 
9
11
 
10
12