質問編集履歴

6

画像の変更

2021/07/20 01:18

投稿

mayugee228
mayugee228

スコア2

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,4 @@
1
- ![![イメージ説明](14d51583c8021d55fff4171d9637fd7d.png)](efef4c683e6df62fed60a2148e554b94.png)`画像を表示させたいのですが、表示出来ません。
1
+ 画像を表示させたいのですが、表示出来ません。
2
2
 
3
3
  画像のURLが間違っているのでしょうか?
4
4
 
@@ -892,8 +892,4 @@
892
892
 
893
893
 
894
894
 
895
- ```
896
-
897
- ``
898
-
899
- ![![![イメージ説明](e86f9e4d8ec4820d861a4eaf63e25611.png)](07df20d0d0d13e9cd6abb6d664e649cc.png)](0e25e04cd3d173e3f65ad3c8bc0756ef.png)
895
+ ```![イメージ説明](e6f3412f506374c24227aa389b82f1eb.png)

5

画像の追加

2021/07/20 01:17

投稿

mayugee228
mayugee228

スコア2

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,4 @@
1
- `画像を表示させたいのですが、表示出来ません。
1
+ ![![イメージ説明](14d51583c8021d55fff4171d9637fd7d.png)](efef4c683e6df62fed60a2148e554b94.png)`画像を表示させたいのですが、表示出来ません。
2
2
 
3
3
  画像のURLが間違っているのでしょうか?
4
4
 

4

CSSコードの修正

2021/07/20 01:11

投稿

mayugee228
mayugee228

スコア2

test CHANGED
File without changes
test CHANGED
@@ -282,14 +282,618 @@
282
282
 
283
283
  ```
284
284
 
285
+
286
+
287
+ ```CSS
288
+
289
+ /*
290
+
291
+ html5doctor.com Reset Stylesheet
292
+
293
+ v1.6.1
294
+
295
+ Last Updated: 2010-09-17
296
+
297
+ Author: Richard Clark - http://richclarkdesign.com
298
+
299
+ Twitter: @rich_clark
300
+
301
+ */
302
+
303
+
304
+
305
+ html, body, div, span, object, iframe,
306
+
307
+ h1, h2, h3, h4, h5, h6, p, blockquote, pre,
308
+
309
+ abbr, address, cite, code,
310
+
311
+ del, dfn, em, img, ins, kbd, q, samp,
312
+
313
+ small, strong, sub, sup, var,
314
+
315
+ b, i,
316
+
317
+ dl, dt, dd, ol, ul, li,
318
+
319
+ fieldset, form, label, legend,
320
+
321
+ table, caption, tbody, tfoot, thead, tr, th, td,
322
+
323
+ article, aside, canvas, details, figcaption, figure,
324
+
325
+ footer, header, hgroup, menu, nav, section, summary,
326
+
327
+ time, mark, audio, video {
328
+
329
+ margin:0;
330
+
331
+ padding:0;
332
+
333
+ border:0;
334
+
335
+ outline:0;
336
+
337
+ font-size:100%;
338
+
339
+ vertical-align:baseline;
340
+
341
+ background:transparent;
342
+
343
+ }
344
+
345
+
346
+
347
+ body {
348
+
349
+ line-height:1;
350
+
351
+ }
352
+
353
+
354
+
355
+ article,aside,details,figcaption,figure,
356
+
357
+ footer,header,hgroup,menu,nav,section {
358
+
359
+ display:block;
360
+
361
+ }
362
+
363
+
364
+
365
+ nav ul {
366
+
367
+ list-style:none;
368
+
369
+ }
370
+
371
+
372
+
373
+ blockquote, q {
374
+
375
+ quotes:none;
376
+
377
+ }
378
+
379
+
380
+
381
+ blockquote:before, blockquote:after,
382
+
383
+ q:before, q:after {
384
+
385
+ content:'';
386
+
387
+ content:none;
388
+
389
+ }
390
+
391
+
392
+
393
+ a {
394
+
395
+ margin:0;
396
+
397
+ padding:0;
398
+
399
+ font-size:100%;
400
+
401
+ vertical-align:baseline;
402
+
403
+ background:transparent;
404
+
405
+ }
406
+
407
+
408
+
409
+ /* change colours to suit your needs */
410
+
411
+ ins {
412
+
413
+ background-color:#ff9;
414
+
415
+ color:#000;
416
+
417
+ text-decoration:none;
418
+
419
+ }
420
+
421
+
422
+
423
+ /* change colours to suit your needs */
424
+
425
+ mark {
426
+
427
+ background-color:#ff9;
428
+
429
+ color:#000;
430
+
431
+ font-style:italic;
432
+
433
+ font-weight:bold;
434
+
435
+ }
436
+
437
+
438
+
439
+ del {
440
+
441
+ text-decoration: line-through;
442
+
443
+ }
444
+
445
+
446
+
447
+ abbr[title], dfn[title] {
448
+
449
+ border-bottom:1px dotted;
450
+
451
+ cursor:help;
452
+
453
+ }
454
+
455
+
456
+
457
+ table {
458
+
459
+ border-collapse:collapse;
460
+
461
+ border-spacing:0;
462
+
463
+ }
464
+
465
+
466
+
467
+ /* change border colour to suit your needs */
468
+
469
+ hr {
470
+
471
+ display:block;
472
+
473
+ height:1px;
474
+
475
+ border:0;
476
+
477
+ border-top:1px solid #cccccc;
478
+
479
+ margin:1em 0;
480
+
481
+ padding:0;
482
+
483
+ }
484
+
485
+
486
+
487
+ input, select {
488
+
489
+ vertical-align:middle;
490
+
491
+ }
492
+
493
+
494
+
495
+ body {
496
+
497
+ text-size-adjust: 100%;
498
+
499
+ overflow-x: hidden;
500
+
501
+ color: rgb(255, 255, 255);
502
+
503
+ font: 300 14px / 1.9 "Noto Sans JP", Arial, Verdana, 游ゴシック, YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
504
+
505
+ background: rgb(0, 0, 0);
506
+
507
+ }
508
+
509
+
510
+
511
+ a {
512
+
513
+ color: white;
514
+
515
+ text-decoration: none;
516
+
517
+ }
518
+
519
+
520
+
521
+ li {
522
+
523
+ list-style: none;
524
+
525
+
526
+
527
+ }
528
+
529
+
530
+
531
+ img {
532
+
533
+ vertical-align: bottom;
534
+
535
+ }
536
+
537
+
538
+
539
+ .sidebar {
540
+
541
+ background-color: pink;
542
+
543
+ width: 20%;
544
+
545
+ position: fixed;
546
+
547
+ right: 0;
548
+
549
+ height: 100%;
550
+
551
+ }
552
+
553
+
554
+
555
+ .side-logo {
556
+
557
+ height: 22.42px;
558
+
559
+ width: 87px;
560
+
561
+ padding: 25px 0 40px 0;
562
+
563
+
564
+
565
+ }
566
+
567
+
568
+
569
+ .side-contents {
570
+
571
+ padding-left: 16%;
572
+
573
+ }
574
+
575
+
576
+
577
+ .side-menu li a {
578
+
579
+ color: #fff;
580
+
581
+ font-family: 'Modern Antiqua', 'Noto Sans JP',serif;
582
+
583
+ font-size: 14px;
584
+
585
+ }
586
+
587
+
588
+
589
+ .side-menu li a:hover {
590
+
591
+ text-decoration: underline;
592
+
593
+ }
594
+
595
+
596
+
597
+ .side-menu li {
598
+
599
+ padding-bottom: 25px;
600
+
601
+ }
602
+
603
+
604
+
605
+ .side-icon .fab {
606
+
607
+ padding: 45px 10px 0 0;
608
+
609
+ }
610
+
611
+
612
+
613
+ .side-icon .fab:hover {
614
+
615
+ opacity: 0 0;
616
+
617
+ }
618
+
619
+
620
+
621
+ .contents {
622
+
623
+ width: 80%;
624
+
625
+ }
626
+
627
+
628
+
629
+ .top-images {
630
+
631
+ width: 100%;
632
+
633
+
634
+
635
+ }
636
+
637
+
638
+
639
+ .message-wrapper {
640
+
641
+ width: 70%;
642
+
643
+ margin: 0 auto;
644
+
645
+ text-align: center;
646
+
647
+ }
648
+
649
+
650
+
651
+ .heading {
652
+
653
+ font-family: 'Modern Antiqua', 'Noto Sans JP',serif;
654
+
655
+ font-size: 22px;
656
+
657
+ padding: 80px 0 20px 0;
658
+
659
+ margin-bottom: 50px ;
660
+
661
+ border-bottom: 3px solid white;
662
+
663
+ display: inline-block;
664
+
665
+ }
666
+
667
+
668
+
669
+ .textarea {
670
+
671
+ width: 85%;
672
+
673
+ margin: 0 auto;
674
+
675
+ text-align: left;
676
+
677
+ padding-bottom: 80px;
678
+
679
+ }
680
+
681
+
682
+
683
+ .photo-wrapper img {
684
+
685
+ width: 33.3333333%;
686
+
687
+ }
688
+
689
+
690
+
691
+ .span .big-photo {
692
+
693
+ width: 100%;
694
+
695
+ }
696
+
697
+
698
+
699
+ .brand-wrapper {
700
+
701
+ width: 80%;
702
+
703
+ margin: 0 auto;
704
+
705
+ text-align: center;
706
+
707
+ }
708
+
709
+
710
+
711
+ .brand-contents {
712
+
713
+ display: flex;
714
+
715
+ padding-bottom: 50px;
716
+
717
+ border-bottom: 1px solid white;
718
+
719
+ }
720
+
721
+
722
+
723
+ .contents-item {
724
+
725
+ width: 25%;
726
+
727
+ padding: 0 25px;
728
+
729
+ padding-bottom: 10px;
730
+
731
+ text-align: left;
732
+
733
+ }
734
+
735
+
736
+
737
+ .contents-item img {
738
+
739
+ width: 100%;
740
+
741
+ }
742
+
743
+
744
+
745
+ .contents-item p {
746
+
747
+ width: 90%;
748
+
749
+ }
750
+
751
+
752
+
753
+ .project-wrapper {
754
+
755
+ width: 80%;
756
+
757
+ margin: 0 auto;
758
+
759
+ text-align: center;
760
+
761
+ padding-bottom: 120px;
762
+
763
+ border-bottom: 1px solid white;
764
+
765
+ }
766
+
767
+
768
+
769
+ .project-item {
770
+
771
+ display: flex;
772
+
773
+ padding-bottom: 70px;
774
+
775
+ }
776
+
777
+
778
+
779
+ .project-item img {
780
+
781
+ width: 375px;
782
+
783
+ height: 225px;
784
+
785
+ padding-right: 20px;
786
+
787
+ }
788
+
789
+
790
+
791
+ .project-item p {
792
+
793
+ text-align: left;
794
+
795
+ }
796
+
797
+
798
+
799
+
800
+
801
+ .company-wrapper {
802
+
803
+ width: 80%;
804
+
805
+ margin: 0 auto;
806
+
807
+ text-align: center;
808
+
809
+ }
810
+
811
+
812
+
813
+ .company-contents {
814
+
815
+ display: flex;
816
+
817
+ padding-top: 30px;
818
+
819
+ padding-bottom: 200px;
820
+
821
+ }
822
+
823
+
824
+
825
+ .address {
826
+
827
+ text-align: left;
828
+
829
+ margin-right: 12%
830
+
831
+ }
832
+
833
+
834
+
835
+ .ggmap {
836
+
837
+ background-color: pink;
838
+
839
+ width: 60%;
840
+
841
+ position: relative;
842
+
843
+ padding-bottom: 25%;
844
+
845
+ }
846
+
847
+
848
+
849
+ iframe {
850
+
851
+ position: absolute;
852
+
853
+ top: 0;
854
+
855
+ left: 0;
856
+
857
+ width: 100%;
858
+
859
+ height: 100%;
860
+
861
+
862
+
863
+ }
864
+
865
+
866
+
867
+ footer {
868
+
869
+ width: 80%;
870
+
871
+ text-align: center;
872
+
873
+ }
874
+
875
+
876
+
877
+ footer p {
878
+
879
+ padding-bottom: 60px;
880
+
881
+ font-size: 12px;
882
+
883
+ }
884
+
885
+
886
+
887
+ footer a {
888
+
889
+ color: blue;
890
+
891
+ }
892
+
893
+
894
+
285
895
  ```
286
896
 
287
-
288
-
289
- ```
290
-
291
-
292
-
293
897
  ``
294
898
 
295
899
  ![![![イメージ説明](e86f9e4d8ec4820d861a4eaf63e25611.png)](07df20d0d0d13e9cd6abb6d664e649cc.png)](0e25e04cd3d173e3f65ad3c8bc0756ef.png)

3

コードの修正

2021/07/20 01:07

投稿

mayugee228
mayugee228

スコア2

test CHANGED
File without changes
test CHANGED
@@ -14,9 +14,9 @@
14
14
 
15
15
 
16
16
 
17
+
18
+
17
- ```ここに言語を入力
19
+ ```HTML
18
-
19
- ```ここに言語を入力
20
20
 
21
21
  <!DOCTYPE html>
22
22
 
@@ -282,12 +282,14 @@
282
282
 
283
283
  ```
284
284
 
285
-
286
-
287
285
  ```
288
286
 
289
287
 
290
288
 
289
+ ```
290
+
291
+
292
+
291
293
  ``
292
294
 
293
295
  ![![![イメージ説明](e86f9e4d8ec4820d861a4eaf63e25611.png)](07df20d0d0d13e9cd6abb6d664e649cc.png)](0e25e04cd3d173e3f65ad3c8bc0756ef.png)

2

コード記入の修正

2021/07/20 01:06

投稿

mayugee228
mayugee228

スコア2

test CHANGED
File without changes
test CHANGED
@@ -14,13 +14,9 @@
14
14
 
15
15
 
16
16
 
17
-
18
-
19
-
20
-
21
- ``HTMLコード↓
17
+ ```ここに言語を入力
18
+
22
-
19
+ ```ここに言語を入力
23
-
24
20
 
25
21
  <!DOCTYPE html>
26
22
 
@@ -56,7 +52,7 @@
56
52
 
57
53
  <div class="side-contents">
58
54
 
59
- <image class="side-logo" src="./image/logo.jpg">
55
+ <img class="side-logo" src="image/logo.png" alt="ロゴ写真">
60
56
 
61
57
  <ul class="side-menu">
62
58
 
@@ -284,9 +280,11 @@
284
280
 
285
281
  </html>
286
282
 
287
-
283
+ ```
284
+
285
+
286
+
288
-
287
+ ```
289
-
290
288
 
291
289
 
292
290
 

1

コード追加とタイトルの変更

2021/07/20 01:05

投稿

mayugee228
mayugee228

スコア2

test CHANGED
@@ -1 +1 @@
1
- 画像を表示したいが表示されない。
1
+ HTMLで画像を表示したいが表示されない。
test CHANGED
@@ -1,4 +1,4 @@
1
- 画像を表示させたいのですが、表示出来ません。
1
+ `画像を表示させたいのですが、表示出来ません。
2
2
 
3
3
  画像のURLが間違っているのでしょうか?
4
4
 
@@ -12,4 +12,284 @@
12
12
 
13
13
  わかりません。
14
14
 
15
+
16
+
17
+
18
+
19
+
20
+
21
+ ``HTMLコード↓
22
+
23
+
24
+
25
+ <!DOCTYPE html>
26
+
27
+ <html lang="en" dir="ltr">
28
+
29
+ <head>
30
+
31
+ <link rel="stylesheet" href="stylesheet.css">
32
+
33
+ <link rel="stylesheet" href="resposive.css">
34
+
35
+ <meta charset="utf-8">
36
+
37
+ <script src="https://kit.fontawesome.com/54b0f8321f.js" crossorigin="anonymous"></script>
38
+
39
+ <meta name="viewport" content="width=device-width,initial-scale=1.0">
40
+
41
+
42
+
43
+
44
+
45
+ <title></title>
46
+
47
+ </head>
48
+
49
+ <body>
50
+
51
+
52
+
53
+ <div class="wrapper">
54
+
55
+ <div class="sidebar">
56
+
57
+ <div class="side-contents">
58
+
59
+ <image class="side-logo" src="./image/logo.jpg">
60
+
61
+ <ul class="side-menu">
62
+
63
+ <li><a href="#">TOP</a></li>
64
+
65
+ <li><a href="#">MESSAGE</a></li>
66
+
67
+ <li><a href="#">GALLERY</a></li>
68
+
69
+ <li><a href="#">BRAND</a></li>
70
+
71
+ <li><a href="#">PROJECT</a></li>
72
+
73
+ <li><a href="#">CO0MPANY</a></li>
74
+
75
+ </ul>
76
+
77
+ <div class="side-icon">
78
+
79
+ <a href="#"><i class="fab fa-facebook-square"></i></a>
80
+
81
+ <a href="#"><i class="fab fa-twitter-square"></i></a>
82
+
83
+ <a href="#"><i class="fab fa-instagram-square"></i></a>
84
+
85
+ <a href="#"><i class="fab fa-youtube-square"></i></a>
86
+
87
+
88
+
89
+ </div>
90
+
91
+ </div>
92
+
93
+ </div>
94
+
95
+
96
+
97
+ <div class="contents">
98
+
99
+ <img class="top-image" src="mainImg.jpg" />
100
+
101
+
102
+
103
+ <div class="message-wrapper">
104
+
105
+ <h1 class="heading">MESSAGE</h1>
106
+
107
+ <div class="textarea">
108
+
109
+ <p>ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす企業を目指します。ホームページサンプル株式会社。ホームページサンプル株式会社では最新技術と自然との調和を目な技術で世の中を動かす企業を目指します。ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす企業を目指します。</p>
110
+
111
+ </div>
112
+
113
+ </div>
114
+
115
+
116
+
117
+ <div class="photo-wrapper">
118
+
119
+ <img src="photo01.jpg" /><img src="photo02.jpg" /><img src="photo03.jpg" />
120
+
121
+ <img src="photo04.jpg" /><img src="photo05.jpg" /><img src="photo06.jpg" />
122
+
123
+ <span><img class="big-photo" src="photo07.jpg" /></span>
124
+
125
+ <img src="photo08.jpg" /><img src="photo09.jpg" /><img src="photo10.jpg" />
126
+
127
+ <img src="photo11.jpg" /><img src="photo12.jpg" /><img src="photo13.jpg" />
128
+
129
+ </div>
130
+
131
+
132
+
133
+ <div class="brand-wrapper">
134
+
135
+ <h1 class="heading">BRAND</h1>
136
+
137
+ <div class="brand-contents">
138
+
139
+ <div class="contents-item">
140
+
141
+ <img src="logo01.png" />
142
+
143
+ <p>ホームページサンプル株式会社では最動かす企業を目指します。</p>
144
+
145
+
146
+
147
+
148
+
149
+ <div class="contents-item">
150
+
151
+ <img src="logo02.png" />
152
+
153
+ <p>革新的な技術で世の中を動かす企業を目します。世の中を動かす。</p>
154
+
155
+
156
+
157
+ <div class="brand-contents">
158
+
159
+ <div class="contents-item">
160
+
161
+ <img src="logo03.png" />
162
+
163
+ <p>株式会社では最動かす企業を目指しますージン企業を目指します。</p>
164
+
165
+
166
+
167
+ <div class="brand-contents">
168
+
169
+ <div class="contents-item">
170
+
171
+ <img src="logo04.png" />
172
+
173
+ <p>株式会社では最動かす企業を指しますージサン企業を目指します。</p>
174
+
175
+ </div>
176
+
177
+ </div>
178
+
179
+ </div>
180
+
181
+
182
+
183
+ <div class="project-wrapper">
184
+
185
+ <h1 class="heading">PROJECT</h1>
186
+
187
+ <div class="project-contents">
188
+
189
+ <div class="project-item">
190
+
191
+ <img src="photo14.jpg" />
192
+
193
+ <p>ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な革新的な革新的な技術で世の中を技術で世の中を技術で世の中を動かす企業を目指します。</br></br>
194
+
195
+
196
+
197
+ ホームページサンプル株式会社。ホームページサンプル最新技術と自然との調和を目指します。革新的な技術で世の中を動かす企業を目指します。ホームページサンプル株式会社。ホームページサンプル最新技術と自然との調和を目指し調和を目指し調和を目指します。革新的な技術で世の中を動かす企業を目指します。</p>
198
+
199
+ </div>
200
+
201
+
202
+
203
+ <div class="project-item">
204
+
205
+ <img src="photo15.jpg" />
206
+
207
+ <p>ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な革新的な革新的な技術で世の中を技術で世の中を技術で世の中を動かす企業を目指します。</br></br>
208
+
209
+
210
+
211
+ ホームページサンプル株式会社。ホームページサンプル最新技術と自然との調和を目指します。革新的な技術で世の中を動かす企業を目指します。ホームページサンプル株式会社。ホームページサンプル最新技術と自然との調和を目指し調和を目指し調和を目指します。革新的な技術で世の中を動かす企業を目指します。</p>
212
+
213
+ </div>
214
+
215
+ </div>
216
+
217
+ </div>
218
+
219
+
220
+
221
+
222
+
223
+ <div class="company-wrapper">
224
+
225
+ <h1 class="heading">CO0MPANY</h1>
226
+
227
+ <div class="company-contents">
228
+
229
+ <p class="address">〒103-1234</br>
230
+
231
+ 見本県見本市仮区見本町1-3-5</br>
232
+
233
+
234
+
235
+ TEL 01234-567-8901</br>
236
+
237
+
238
+
239
+ e-Mail info@example.com</br>
240
+
241
+
242
+
243
+ 営業時間 10:00〜20:00(水曜定休)</br>
244
+
245
+
246
+
247
+ ※都合により休業する場合がございます</p>
248
+
249
+
250
+
251
+ <div class="ggmap">
252
+
253
+ <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12794.37516750043!2d136.931998!3d36.708298!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x2ade3e8e4c2801b8!2z56aP5bKh6aeF!5e0!3m2!1sja!2sus!4v1626598164630!5m2!1sja!2sus" width="550" height="200" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
254
+
255
+
256
+
257
+ </div>
258
+
259
+
260
+
261
+ </div>
262
+
263
+
264
+
265
+ </div>
266
+
267
+
268
+
269
+ </div>
270
+
271
+
272
+
273
+ </div>
274
+
275
+
276
+
277
+ <footer>
278
+
279
+ <p>Copyright(c) 2016 Sample Inc. All Rights Reserved. Design by <a href="http://f-tpl.com"></a></p>
280
+
281
+ </footer>
282
+
283
+ </body>
284
+
285
+ </html>
286
+
287
+
288
+
289
+
290
+
291
+
292
+
293
+ ``
294
+
15
295
  ![![![イメージ説明](e86f9e4d8ec4820d861a4eaf63e25611.png)](07df20d0d0d13e9cd6abb6d664e649cc.png)](0e25e04cd3d173e3f65ad3c8bc0756ef.png)