質問編集履歴

3

修正いたしました。

2018/01/03 09:10

投稿

aazzkk
aazzkk

スコア15

test CHANGED
File without changes
test CHANGED
@@ -1,19 +1,19 @@
1
+ html・css勉強中の超初心者です。
2
+
3
+ 以下のタグを使用しても画像の枠に反映されません。
4
+
5
+ id指定の仕方がそもそも間違っているのでしょうか?
6
+
7
+ どなたか教えて下さると嬉しいです。
8
+
9
+ よろしくお願いします。
10
+
11
+
12
+
13
+ ●html●
14
+
1
15
  ```ここに言語を入力
2
16
 
3
- html・css勉強中の超初心者です。
4
-
5
- 以下のタグを使用しても画像の枠に反映されません。
6
-
7
- id指定の仕方がそもそも間違っているのでしょうか?
8
-
9
- どなたか教えて下さると嬉しいです。
10
-
11
- よろしくお願いします。
12
-
13
-
14
-
15
- ●html●
16
-
17
17
  <!DOCTYPE html>
18
18
 
19
19
  <html lang="ja">
@@ -62,10 +62,14 @@
62
62
 
63
63
 
64
64
 
65
+ ```
66
+
65
67
  ●css●
66
68
 
67
69
 
68
70
 
71
+ ```ここに言語を入力
72
+
69
73
  @charset "utf-8";
70
74
 
71
75
 
@@ -664,4 +668,6 @@
664
668
 
665
669
  }
666
670
 
671
+
672
+
667
673
  ```

2

html、css全文掲載いたしました。動くサンプルは確認させていただいております。よろしくお願いします。

2018/01/03 09:10

投稿

aazzkk
aazzkk

スコア15

test CHANGED
File without changes
test CHANGED
@@ -14,38 +14,408 @@
14
14
 
15
15
  ●html●
16
16
 
17
+ <!DOCTYPE html>
18
+
19
+ <html lang="ja">
20
+
21
+ <head>
22
+
23
+ <meta charset="UTF-8">
24
+
25
+ <link rel="stylesheet"href="style.css">
26
+
27
+ <title>title</title>
28
+
29
+ </head>
30
+
31
+ <body>
32
+
17
- <body id="material-menu">
33
+ <div id="material-menu">
18
-
34
+
19
- <p>
35
+ <p>
20
-
36
+
21
- <img src="../item/illust/flower1-1.jpg">
37
+ <img src="../item/illust/flower1-1.jpg">
22
-
38
+
23
- <img src="../item/illust/flower1-2.jpg">
39
+ <img src="../item/illust/flower1-2.jpg">
24
-
40
+
25
- <img src="../item/illust/flower1-3.jpg">
41
+ <img src="../item/illust/flower1-3.jpg">
26
-
42
+
27
- <img src="../item/illust/flower1-4.jpg">
43
+ <img src="../item/illust/flower1-4.jpg">
28
-
44
+
29
- <img src="../item/illust/flower1-5.jpg">
45
+ <img src="../item/illust/flower1-5.jpg">
30
-
46
+
31
- <img src="../item/illust/flower1-6.jpg">
47
+ <img src="../item/illust/flower1-6.jpg">
32
-
48
+
33
- <img src="../item/illust/flower1-7.jpg">
49
+ <img src="../item/illust/flower1-7.jpg">
34
-
50
+
35
- <img src="../item/illust/flower1-8.jpg">
51
+ <img src="../item/illust/flower1-8.jpg">
36
-
52
+
37
- <img src="../item/illust/flower1-9.jpg">
53
+ <img src="../item/illust/flower1-9.jpg">
38
-
54
+
39
- </p>
55
+ </p>
56
+
57
+ </div>
40
58
 
41
59
  </body>
42
60
 
61
+ </html>
62
+
43
63
 
44
64
 
45
65
  ●css●
46
66
 
47
67
 
48
68
 
69
+ @charset "utf-8";
70
+
71
+
72
+
73
+ * {
74
+
75
+ margin: 0;
76
+
77
+ padding: 0;
78
+
79
+ font-weight : normal;
80
+
81
+ font-style : normal;
82
+
83
+ scrollbar-base-color: #fff;
84
+
85
+ scrollbar-arrow-color: #ddd;
86
+
87
+ scrollbar-track-color: #fff;
88
+
89
+ scrollbar-highlight-color: #fff;
90
+
91
+ scrollbar-shadow-color: #fff;
92
+
93
+ }
94
+
95
+
96
+
97
+ /* -------------------------------------------- */
98
+
99
+ /* 基本
100
+
101
+ /* -------------------------------------------- */
102
+
103
+
104
+
105
+ body {
106
+
107
+ font-size : 70%;
108
+
109
+ line-height : 150%;
110
+
111
+ letter-spacing : 1px;
112
+
113
+ background-color : #ffffff;
114
+
115
+ color : #666666;
116
+
117
+ text-align : center;
118
+
119
+ font-family:Verdana,Chicago,osaka,sans-serif,"MS Pゴシック";
120
+
121
+ }
122
+
123
+ img {
124
+
125
+ border : 0;
126
+
127
+ }
128
+
129
+ br {
130
+
131
+ letter-spacing : normal;
132
+
133
+ }
134
+
135
+ ul {
136
+
137
+ list-style: none;
138
+
139
+ }
140
+
141
+
142
+
143
+ /* -------------------------------------------- */
144
+
145
+ /* アンカー
146
+
147
+ /* -------------------------------------------- */
148
+
149
+
150
+
151
+ a {
152
+
153
+ color : #666666;
154
+
155
+ text-decoration : none;
156
+
157
+ }
158
+
159
+ a:hover {
160
+
161
+ color : #BF817A;
162
+
163
+ }
164
+
165
+
166
+
167
+
168
+
169
+ /* -------------------------------------------- */
170
+
171
+ /* 見出し/段落/テキスト
172
+
173
+ /* -------------------------------------------- */
174
+
175
+
176
+
177
+ h1 {
178
+
179
+ font-size : 120%;
180
+
181
+ font-family : "Century Gothic", "MS ゴシック", Osaka, sans-serif;
182
+
183
+ letter-spacing : 3px;
184
+
185
+ margin: 0;
186
+
187
+ padding: 150px 0;
188
+
189
+ text-align: center;
190
+
191
+ }
192
+
193
+
194
+
195
+ h2 {
196
+
197
+ padding: 0.25em 0.5em;
198
+
199
+ color: #666666;
200
+
201
+ background: transparent;
202
+
203
+ border-left: solid 5px #BF817A;
204
+
205
+ }
206
+
207
+
208
+
209
+ h3 {
210
+
211
+ font-size : 120%;
212
+
213
+ color: #000000;
214
+
215
+ background-color:#eeeeee;
216
+
217
+ display:inline;
218
+
219
+ margin: 0 0 5px;
220
+
221
+ }
222
+
223
+ h4 {
224
+
225
+ font-size : 100%;
226
+
227
+ margin: 0 0 5px;
228
+
229
+ }
230
+
231
+ p {
232
+
233
+ margin: 0 0 5px;
234
+
235
+ }
236
+
237
+ em{
238
+
239
+ font-weight:bold;
240
+
241
+ }
242
+
243
+ strong{
244
+
245
+ font-weight:bold;
246
+
247
+ color : #0099cc;
248
+
249
+ border-bottom : 2px solid #0099cc;
250
+
251
+ }
252
+
253
+ del{
254
+
255
+ text-decoration:line-through;
256
+
257
+ }
258
+
259
+ ins {
260
+
261
+ text-decoration: underline;
262
+
263
+ }
264
+
265
+ .text {
266
+
267
+ font-size : 100%;
268
+
269
+ margin: 10px 0 15px;
270
+
271
+ }
272
+
273
+ .text01 {
274
+
275
+ font-size : 120%;
276
+
277
+ line-height : 180%;
278
+
279
+ margin:10px 0 20px;
280
+
281
+ }
282
+
283
+
284
+
285
+ /* -------------------------------------------- */
286
+
287
+ /* 全体
288
+
289
+ /* -------------------------------------------- */
290
+
291
+
292
+
293
+ #page {
294
+
295
+ margin:0 auto;
296
+
297
+ width : 600px;
298
+
299
+ height : auto;
300
+
301
+ text-align : left;
302
+
303
+ padding:10px;
304
+
305
+ }
306
+
307
+
308
+
309
+
310
+
311
+ /* -------------------------------------------- */
312
+
313
+ /* ヘッダー
314
+
315
+ /* -------------------------------------------- */
316
+
317
+
318
+
319
+ #head {
320
+
321
+ height : 300px;
322
+
323
+ background :url(item/illust/top.png) no-repeat 0px 0px;
324
+
325
+ background-position: center;
326
+
327
+ margin:100px 0 0;
328
+
329
+ }
330
+
331
+
332
+
333
+ h1 a:{
334
+
335
+ color : #ffffff;
336
+
337
+ }
338
+
339
+
340
+
341
+ h1 a:visited {
342
+
343
+ color : #ffffff;
344
+
345
+ }
346
+
347
+
348
+
349
+ h1 a:hover {
350
+
351
+ color : #eeeeee;
352
+
353
+ }
354
+
355
+
356
+
357
+ /* -------------------------------------------- */
358
+
359
+ /* メニュー
360
+
361
+ /* -------------------------------------------- */
362
+
363
+
364
+
365
+ #menu{
366
+
367
+ font-size : 100%;
368
+
369
+ padding: 30px;
370
+
371
+ }
372
+
373
+
374
+
375
+ #menu ul{
376
+
377
+ list-style: none;
378
+
379
+ text-align : center;
380
+
381
+ }
382
+
383
+
384
+
385
+ #menu li{
386
+
387
+ display: inline-block;
388
+
389
+ }
390
+
391
+
392
+
393
+ #menu li a {
394
+
395
+ text-align: center;
396
+
397
+ width: 70px;
398
+
399
+ padding: 10px;
400
+
401
+ }
402
+
403
+
404
+
405
+ #menu a:hover {
406
+
407
+ position : relative;
408
+
409
+ background: #eee;
410
+
411
+ color : #fff;
412
+
413
+ top : 2px;
414
+
415
+ }
416
+
417
+
418
+
49
419
  #material-menu {
50
420
 
51
421
  margin: 0px;
@@ -60,7 +430,237 @@
60
430
 
61
431
  #material-menu,img {
62
432
 
63
-  border: 1px #000000 solid;
433
+ border: 1px #000000 solid;
434
+
435
+ }
436
+
437
+
438
+
439
+ #material-menu h3 {
440
+
441
+ line-height: 3em;
442
+
443
+ }
444
+
445
+
446
+
447
+ #material-menu p {
448
+
449
+ line-height: 1em;
450
+
451
+ }
452
+
453
+
454
+
455
+ /* -------------------------------------------- */
456
+
457
+ /* コンテンツ
458
+
459
+ /* -------------------------------------------- */
460
+
461
+
462
+
463
+ #contents {
464
+
465
+ padding :200px 0 10px;
466
+
467
+ }
468
+
469
+
470
+
471
+
472
+
473
+ /* -------------------------------------------- */
474
+
475
+ /* フッター
476
+
477
+ /* -------------------------------------------- */
478
+
479
+
480
+
481
+ #foot {
482
+
483
+ padding : 20px 0;
484
+
485
+ text-align : center;
486
+
487
+ }
488
+
489
+ #foot li{
490
+
491
+ display: inline;
492
+
493
+ padding: 0 5px;
494
+
495
+ }
496
+
497
+
498
+
499
+ /* -------------------------------------------- */
500
+
501
+ /* リンク
502
+
503
+ /* -------------------------------------------- */
504
+
505
+
506
+
507
+ ul.link01,ul.link02{
508
+
509
+ padding : 0 0 10px;
510
+
511
+ }
512
+
513
+ ul.link01 li{
514
+
515
+ display: inline;
516
+
517
+ padding : 0 10px 5px 0;
518
+
519
+ }
520
+
521
+ ul.link02 li{
522
+
523
+ display: inline;
524
+
525
+ }
526
+
527
+ dl.link03 {
528
+
529
+ clear:both;
530
+
531
+ padding : 5px 0 0 0;
532
+
533
+ }
534
+
535
+ dl.link03 dt{
536
+
537
+ float:left;
538
+
539
+ width:200px;/* 使用するバナーの横幅 */
540
+
541
+ margin:0 10px 0 0;
542
+
543
+ }
544
+
545
+
546
+
547
+
548
+
549
+ /* -------------------------------------------- */
550
+
551
+ /* 装飾ボックス
552
+
553
+ /* -------------------------------------------- */
554
+
555
+
556
+
557
+ .box{
558
+
559
+ width :90%;
560
+
561
+ padding:10px;
562
+
563
+ border : 1px solid #dddddd;
564
+
565
+ background-image : url(img/h2bag.gif);
566
+
567
+ }
568
+
569
+
570
+
571
+
572
+
573
+ /* -------------------------------------------- */
574
+
575
+ /* スクロールボックス
576
+
577
+ /* -------------------------------------------- */
578
+
579
+
580
+
581
+ .about{
582
+
583
+ overflow: auto;
584
+
585
+ height : 80px;
586
+
587
+ width : 100%;
588
+
589
+ margin: 10px 0;
590
+
591
+ }
592
+
593
+
594
+
595
+
596
+
597
+ /* -------------------------------------------- */
598
+
599
+ /* メールフォーム
600
+
601
+ /* -------------------------------------------- */
602
+
603
+
604
+
605
+ .mail textarea,.mail input{
606
+
607
+ font-size : 100%;
608
+
609
+ border : 1px solid #dddddd;
610
+
611
+ margin: 2px 0;
612
+
613
+ padding : 1px;
614
+
615
+ }
616
+
617
+
618
+
619
+ /* -------------------------------------------- */
620
+
621
+ /* 画像・テキストページメニュー
622
+
623
+ /* -------------------------------------------- */
624
+
625
+
626
+
627
+ ul.sub01{
628
+
629
+ margin: 0 0 20px;
630
+
631
+ }
632
+
633
+ ul.sub02{
634
+
635
+ margin: 0 0 10px;
636
+
637
+ }
638
+
639
+ ul.sub02 li{
640
+
641
+ display: inline;
642
+
643
+ padding : 0 3px 1px 0;
644
+
645
+ }
646
+
647
+
648
+
649
+ /* -------------------------------------------- */
650
+
651
+ /* ページトップ
652
+
653
+ /* -------------------------------------------- */
654
+
655
+
656
+
657
+ .pagetop{
658
+
659
+ text-align : right;
660
+
661
+ padding: 55px 0 0 ;
662
+
663
+ background: url("item/illust/pageup.png") no-repeat right center;
64
664
 
65
665
  }
66
666
 

1

失礼いたしました。よろしくお願いいたします。

2018/01/03 09:05

投稿

aazzkk
aazzkk

スコア15

test CHANGED
File without changes
test CHANGED
@@ -1,3 +1,5 @@
1
+ ```ここに言語を入力
2
+
1
3
  html・css勉強中の超初心者です。
2
4
 
3
5
  以下のタグを使用しても画像の枠に反映されません。
@@ -61,3 +63,5 @@
61
63
   border: 1px #000000 solid;
62
64
 
63
65
  }
66
+
67
+ ```