質問編集履歴

3

(8/21追記)完成見本を添付するのを忘れていました。引き続きお願いいたします。

2017/08/21 00:12

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -1,3 +1,7 @@
1
+ ![イメージ説明](e0fa588ce25331c2ed87b5a560d4ff1f.jpeg)
2
+
3
+ ![イメージ説明](e924756e217bc6652715e77bc785b51c.jpeg)
4
+
1
5
  初めて質問させていただきます。
2
6
 
3
7
  現在某スクールにて演習課題を進めているのですが、boxタグ内の箇条書きリストに画像を位置をずらしながら配置していきたいのですが、うまくいかず苦戦しています。。。

2

2017/08/21 00:12

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
File without changes

1

cssを誤った内容のものを載せてしまったのと、HTMLを追記致しました。

2017/08/20 06:49

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -20,6 +20,16 @@
20
20
 
21
21
 
22
22
 
23
+ 【8/20追記】cssを誤って違うものを載せてしまったため、質問を編集させていただきました。
24
+
25
+ 再度よろしくお願い致します。
26
+
27
+
28
+
29
+
30
+
31
+
32
+
23
33
 
24
34
 
25
35
  ###発生している問題・エラーメッセージ
@@ -34,121 +44,513 @@
34
44
 
35
45
 
36
46
 
37
- ###該当のソースコード
38
-
39
-
40
-
41
- #sidebar a {
42
-
43
- text-decoration: none;
44
-
45
- float: left;
46
-
47
- display: block;
48
-
49
- width: 255px;
50
-
51
- height: 60px;
52
-
53
- background-image: url(img/top-menu.jpg);
54
-
55
- background-repeat: no-repeat;
56
-
57
- background-position: 0 left bottom;
58
-
59
- }
60
-
61
- style.css:11
62
-
63
- a {
64
-
65
- text-decoration: none;
66
-
67
- display: block;
68
-
69
- text-indent: -9999px;
70
-
71
- background-image: url(img/head-menu.jpg);
72
-
73
- height: 49px;
74
-
75
- width: 100%;
76
-
77
- background-position: 0 top;
78
-
79
- }
80
-
81
- user agent stylesheet
82
-
83
- a:-webkit-any-link {
84
-
85
- color: -webkit-link;
86
-
87
- cursor: auto;
88
-
89
- text-decoration: underline;
90
-
91
- }
92
-
93
- Inherited from li.careplan
94
-
95
- user agent stylesheet
96
-
97
- li {
98
-
99
- display: list-item;
100
-
101
- text-align: -webkit-match-parent;
102
-
103
- }
104
-
105
- Inherited from ul#sidebar
106
-
107
- user agent stylesheet
108
-
109
- ul, menu, dir {
110
-
111
- display: block;
112
-
113
- list-style-type: disc;
114
-
115
- -webkit-margin-before: 1em;
116
-
117
- -webkit-margin-after: 1em;
118
-
119
- -webkit-margin-start: 0px;
120
-
121
- -webkit-margin-end: 0px;
122
-
123
- -webkit-padding-start: 40px;
124
-
125
- }
126
-
127
- Inherited from body
128
-
129
- style.css:1
130
-
131
- body {
132
-
133
- background-size: 100%;
134
-
135
- display: block;
136
-
137
- line-height: 1.4;
138
-
139
- background-color: #ffffff;
140
-
141
- background-image: url(img/head-bg.jpg);
142
-
143
- background-repeat: repeat-x;
144
-
145
- margin: 0px;
146
-
147
- padding: 0px;
148
-
149
- }
150
-
151
-
47
+
48
+
49
+ ```ここに言語を入力
50
+
51
+ css
52
+
53
+
54
+
55
+ body{
56
+
57
+ background-size: 100%;
58
+
59
+ display:block;
60
+
61
+ line-height: 1.4;
62
+
63
+ background-color: #ffffff;
64
+
65
+ background-image: url(img/head-bg.jpg);
66
+
67
+ background-repeat: repeat-x;
68
+
69
+ margin: 0px;
70
+
71
+ padding: 0px;
72
+
73
+ }
74
+
75
+ a{
76
+
77
+ text-decoration: none;
78
+
79
+ display:block;
80
+
81
+ text-indent:-9999px;
82
+
83
+ background-image :url(img/head-menu.jpg);
84
+
85
+ height:49px;
86
+
87
+ width:100%;
88
+
89
+ background-position: 0 top;
90
+
91
+ }
92
+
93
+ #globalnav .idea a{
94
+
95
+ background-image :url("img/head-menu.jpg");
96
+
97
+ backgroud-repeat: no-repeat;
98
+
99
+ background-position: -150px top;
100
+
101
+ }
102
+
103
+ #globalnav .service a{
104
+
105
+ backgroud-image :url("img/head-menu.jpg");
106
+
107
+ background-repeat: no-repeat;
108
+
109
+ background-position: -300px top;
110
+
111
+ }
112
+
113
+ #globalnav .company a{
114
+
115
+ background-image :url("img/head-menu.jpg");
116
+
117
+ background-repeat: no-repeat;
118
+
119
+ background-position: -450px top;
120
+
121
+ }
122
+
123
+ #globalnav .FAQ a{
124
+
125
+ background-image :url("img/head-menu.jpg");
126
+
127
+ background-repeat: no-repeat;
128
+
129
+ background-position: -600px top;
130
+
131
+ }
132
+
133
+ #globalnav .access a{
134
+
135
+ backgrond-image :url("img/head-menu.jpg");
136
+
137
+ background-repeat: no-repeat;
138
+
139
+ background-position: -750px top;
140
+
141
+ }
142
+
143
+ .box {
144
+
145
+ margin: 10px 0;
146
+
147
+ float: left;
148
+
149
+ width: 100%;
150
+
151
+ background: #ffffff ;
152
+
153
+ }
154
+
155
+ .box img {
156
+
157
+ max-width: 100%;
158
+
159
+ float: right;
160
+
161
+ margin: 0;
162
+
163
+ }
164
+
165
+ .box p {
166
+
167
+ margin: 0;
168
+
169
+ padding: 0px;
170
+
171
+ }
172
+
173
+ #sidebar a {
174
+
175
+ text-decoration: none;
176
+
177
+ float: left;
178
+
179
+ display:block;
180
+
181
+ width: 255px;
182
+
183
+ height: 60px;
184
+
185
+ background-image :url(img/top-menu.jpg);
186
+
187
+ background-repeat: no-repeat;
188
+
189
+ background-position: 0 left bottom;
190
+
191
+ }
192
+
193
+ #sidebar ul {
194
+
195
+ display: block;
196
+
197
+ height: 300px;
198
+
199
+ }
200
+
201
+ #sidebar ul li {
202
+
203
+ display: block;
204
+
205
+ height: 60px;
206
+
207
+ }
208
+
209
+ #sidebar ul .careplan a {
210
+
211
+ background-image: url(img/top-menu.jpg);
212
+
213
+ background-repeat: no-repeat;
214
+
215
+ background-position: 0px left bottom;
216
+
217
+ }
218
+
219
+ #sidebar ul .grouphome a {
220
+
221
+ background-image: url(img/top-menu.jpg);
222
+
223
+ background-repeat: no-repeat;
224
+
225
+ background-position: -60px left bottom;
226
+
227
+ }
228
+
229
+ #sidebar ul .service a {
230
+
231
+ background-image: url(img/top-menu.jpg);
232
+
233
+ background-repeat: no-repeat;
234
+
235
+ background-position: -120px left bottom;
236
+
237
+ }
238
+
239
+ #sidebar ul .homehelp a {
240
+
241
+ background-image: url(img/top-menu.jpg) ;
242
+
243
+ background-repeat: no-repeat;
244
+
245
+ background-position: -180px left bottom;
246
+
247
+ }
248
+
249
+ #sidebar ul .daycare a {
250
+
251
+ background-image: url(img/top-menu.jpg) ;
252
+
253
+ background-repeat: no-repeat;
254
+
255
+ background-position; -240px left bottom;
256
+
257
+ }
258
+
259
+ .left {
260
+
261
+ float: left;
262
+
263
+ }
264
+
265
+ h1{
266
+
267
+ color:#ffffff;
268
+
269
+ margin:0px;
270
+
271
+ }
272
+
273
+ h2{
274
+
275
+ height:80px;
276
+
277
+ padding-top:24px;
278
+
279
+ padding-left:20px;
280
+
281
+ margin:0px;
282
+
283
+ color:#black;
284
+
285
+ clear:both;
286
+
287
+ }
288
+
289
+ dl{
290
+
291
+ background-color:#white;
292
+
293
+ width:680px;
294
+
295
+ margin-top:0px;
296
+
297
+ list-style-image: url(img/top-li.jpg);
298
+
299
+ }
300
+
301
+ ul#globalnav li{
302
+
303
+ float:left;
304
+
305
+ width:150px;
306
+
307
+ list-style-type:none;
308
+
309
+ background-color:#ff9fbf;
310
+
311
+ }
312
+
313
+ ul{
314
+
315
+ padding:0px;
316
+
317
+ margin:0px;
318
+
319
+ }
320
+
321
+ div#left{
322
+
323
+ float:left;
324
+
325
+ width:680px;
326
+
327
+ background-color#ffffff;
328
+
329
+ }
330
+
331
+ div#right{
332
+
333
+ float:right;
334
+
335
+ width:220px;
336
+
337
+ padding-left:0px;
338
+
339
+ }
340
+
341
+ div#right img{
342
+
343
+ margin:0px;
344
+
345
+ }
346
+
347
+ div#footer p{
348
+
349
+ text-align:center;
350
+
351
+ color:#black;
352
+
353
+ background-color:#ff9fbf;
354
+
355
+ clear:both;
356
+
357
+ background-image: url(img/foot-bg.jpg);
358
+
359
+ background-repeat: repeat-x;
360
+
361
+ height: 140px;
362
+
363
+ padding: 0;
364
+
365
+ background-position: bottom;
366
+
367
+ margin: 0px;
368
+
369
+ }
370
+
371
+ div#wrapper{
372
+
373
+ width:900px;
374
+
375
+ margin:0 auto;
376
+
377
+ }
378
+
379
+ ```
380
+
381
+
382
+
383
+ HTML
384
+
385
+
386
+
387
+ ```ここに言語を入力
388
+
389
+ <!DOCTYPE html>
390
+
391
+ <html>
392
+
393
+ <head>
394
+
395
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
396
+
397
+ <meta charset="UTF-8">
398
+
399
+ <title>東京都板橋区のグループホーム・サービス付き高齢者向け住宅・デイサービスのサンベストビレッジ浮間公園</title>
400
+
401
+ <link rel="stylesheet" type="text/css" href="style.css" />
402
+
403
+ </head>
404
+
405
+ <body>
406
+
407
+ <a id="top"></a>
408
+
409
+ <div id="wrapper">
410
+
411
+ <h1><img src="img/logo.jpg" /></h1>
412
+
413
+ <ul id = "globalnav">
414
+
415
+ <li class="home"><a href="html.html">HOME</a></li>
416
+
417
+ <li class="idea"><a href="html.html">理念</a></li>
418
+
419
+ <li class="service"><a href="html.html">サービス</a></li>
420
+
421
+ <li class="company"><a href="html.html">会社概要</a></li>
422
+
423
+ <li class="FAQ"><a href="html.html">良くある質問</a></li>
424
+
425
+ <li class="access"><a href="html.html">アクセス</a></li>
426
+
427
+ </ul>
428
+
429
+ <div class="box">
430
+
431
+ <img src="img/icatch.png">
432
+
433
+ <div class="left">
434
+
435
+ <p>
436
+
437
+ <ul id = "sidebar">
438
+
439
+ <li class="careplan"><a href="html.html">ケアプラン</a></li>
440
+
441
+ <li class="grouphome"><a href="html.html">グループホーム</a></li>
442
+
443
+ <li class="service"><a href="html.html">サービス付き高齢者向け住宅</a></li>
444
+
445
+ <li class="homehelp"><a href="html.html">ホームヘルプサービス</a></li>
446
+
447
+ <li class="daycare"><a href="html.html">デイサービス</a></li>
448
+
449
+ </ul>
450
+
451
+ </p>
452
+
453
+ </div>
454
+
455
+ </div>
456
+
457
+ <div id= "left">
458
+
459
+ <h2><img src="img/top-news.jpg" /></h2>
460
+
461
+ <dl>
462
+
463
+ <dt>2016.01.01</dt>
464
+
465
+ <dd>今年もサンベストビレッジ浮間公園を<br />
466
+
467
+ よろしくお願いします。</dd>
468
+
469
+ <dt>2015.11.22</dt>
470
+
471
+ <dd>第五回介護甲子園の決勝大会に<br />
472
+
473
+ 出場しました。結果は惜しくも優秀賞でした。<br />
474
+
475
+ 応援の方、ありがとうございました。</dd>
476
+
477
+ <dt>2015.09.13</dt>
478
+
479
+ <dd>第五回介護甲子園決勝進出!!<br />
480
+
481
+ 11月23日に日比谷公会堂にて<br />
482
+
483
+ 決勝大会を行います。</dd>
484
+
485
+ <dt>2015.08.30</dt>
486
+
487
+ <dd>サービス付き高齢者向け住宅 残り3室となっております。<br />
488
+
489
+ (お問い合わせを多数いただいております。)</dd>
490
+
491
+ <dt>2013.08.20</dt>
492
+
493
+ <dd>サービス付き高齢者向け住宅 残り3室</dd>
494
+
495
+ <dt>2013.06.01</dt>
496
+
497
+ <dd>グループホーム 満室となりました。待機者募集中です。</dd>
498
+
499
+ <dt>2012.09.25</dt>
500
+
501
+ <dd>ホームページリニューアルしました。</dd>
502
+
503
+ <dt>2012.09.25</dt>
504
+
505
+ <dd>サービス付き高齢者向け住宅 残り8室</dd>
506
+
507
+ <dt>2012.09.25</dt>
508
+
509
+ <dd>グループホーム 残り2室</dd>
510
+
511
+ <dt>2012.09.25</dt>
512
+
513
+ <dd>求人募集中(来年度新卒含む)</dd>
514
+
515
+ </dl>
516
+
517
+ </div>
518
+
519
+ </div>
520
+
521
+ <div id = "right">
522
+
523
+ <img src ="img/top-bn-kamifukuoka.jpg" />
524
+
525
+ <img src ="img/top-bn-confirm.jpg" />
526
+
527
+ <img src ="img/top-bn-reserve.jpg" />
528
+
529
+ <img src ="img/top-bn-staff.jpg" />
530
+
531
+ </div>
532
+
533
+ </div>
534
+
535
+ <div id = "footer">
536
+
537
+ <p>会社概要 プライバシーポリシー</p>
538
+
539
+ <p>copyright &copy; 2012 サンベスト浮間公園 All rights reserved</p>
540
+
541
+ </div>
542
+
543
+ </div>
544
+
545
+ </body>
546
+
547
+ </html>
548
+
549
+
550
+
551
+ ```
552
+
553
+
152
554
 
153
555
  ###補足情報(言語/FW/ツール等のバージョンなど)
154
556