box内のリストに画像をずらしながら配置したいです。

初めて質問させていただきます。
現在某スクールにて演習課題を進めているのですが、boxタグ内の箇条書きリストに画像を位置をずらしながら配置していきたいのですが、うまくいかず苦戦しています。。。

スタイルシート内の記述がちがっているようなんですが、自分では見つけることができず、周りに聞けるような人もいないため困っております。

スクールの講師からはセレクタとかが違っている可能性もあります。練習のため自分でみつけてみてと言われていますが、初心者のため、検索をかけても思うような答えがえられませんでした。

どなたかご教授お願いいたします。

必要であればほかの情報も提供いたします。

【8/20追記】cssを誤って違うものを載せてしまったため、質問を編集させていただきました。
再度よろしくお願い致します。

###発生している問題・エラーメッセージ

エラーメッセージ

css

body{
	background-size: 100%;
	display:block;
	line-height: 1.4;
	background-color: #ffffff;
	background-image: url(img/head-bg.jpg);
	background-repeat: repeat-x;
	margin: 0px;
	padding: 0px;
}
a{
	text-decoration: none;
	display:block;
	text-indent:-9999px;
	background-image :url(img/head-menu.jpg);
	height:49px;
	width:100%;
	background-position: 0 top;
}
#globalnav .idea a{
	background-image :url("img/head-menu.jpg");
	backgroud-repeat: no-repeat;
	background-position: -150px top;
}
#globalnav .service a{
	backgroud-image :url("img/head-menu.jpg");
	background-repeat: no-repeat;
	background-position: -300px top;
}
#globalnav .company a{
	background-image :url("img/head-menu.jpg");
	background-repeat: no-repeat;
	background-position: -450px top;
}
#globalnav .FAQ a{
	background-image :url("img/head-menu.jpg");
	background-repeat: no-repeat;
	background-position: -600px top;
}
#globalnav .access a{
	backgrond-image :url("img/head-menu.jpg");
	background-repeat: no-repeat;
	background-position: -750px top;
}
.box {
	margin: 10px 0;
	float: left;
	width: 100%;
	background: #ffffff ;
}
.box img {
	max-width: 100%;
	float: right;
	margin: 0;
}
.box p {
	margin: 0;
	padding: 0px;
}
#sidebar a {
	text-decoration: none;
	float: left;
	display:block;
	width: 255px;
	height: 60px;
	background-image :url(img/top-menu.jpg);
	background-repeat: no-repeat;
	background-position:  0 left bottom;
}
#sidebar ul {
	display: block;
	height: 300px;
}
#sidebar ul li {
	display: block;
	height: 60px;
}
#sidebar ul .careplan a {
	background-image: url(img/top-menu.jpg);
	background-repeat: no-repeat;
	background-position: 0px left bottom;
}
#sidebar ul .grouphome a {
	background-image: url(img/top-menu.jpg);
	background-repeat: no-repeat;
	background-position: -60px left bottom;
}
#sidebar ul .service a {
	background-image: url(img/top-menu.jpg);
	background-repeat: no-repeat;
	background-position: -120px left bottom;
}
#sidebar ul .homehelp a {
	background-image: url(img/top-menu.jpg) ;
	background-repeat: no-repeat;
	background-position: -180px left bottom;
}
#sidebar ul .daycare a {
	background-image: url(img/top-menu.jpg) ;
	background-repeat: no-repeat;
	background-position; -240px left bottom;
}
.left {
	float: left;
}
h1{
	color:#ffffff;
	margin:0px;
}
h2{
	height:80px;
	padding-top:24px;
	padding-left:20px;
	margin:0px;
	color:#black;
	clear:both;
	}
dl{
	background-color:#white;
	width:680px;
	margin-top:0px;
	list-style-image: url(img/top-li.jpg);
}
ul#globalnav li{
	float:left;
	width:150px;
	list-style-type:none;
	background-color:#ff9fbf;
	}
ul{
	padding:0px;
	margin:0px;
	}
div#left{
	float:left;
	width:680px;
	background-color#ffffff;
}
div#right{
	float:right;
	width:220px;
	padding-left:0px;
}
div#right img{
	margin:0px;
}
div#footer p{
	text-align:center;
	color:#black;
	background-color:#ff9fbf;
	clear:both;
	background-image: url(img/foot-bg.jpg);
	background-repeat: repeat-x;
	height: 140px;
	padding: 0;
	background-position: bottom;
	margin: 0px;
}
div#wrapper{
	width:900px;
	margin:0 auto;
}

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta charset="UTF-8">
		<title>東京都板橋区のグループホーム・サービス付き高齢者向け住宅・デイサービスのサンベストビレッジ浮間公園</title>
		<link rel="stylesheet" type="text/css" href="style.css" />
	</head>
	<body>
	<a id="top"></a>
	<div id="wrapper">
		<h1><img src="img/logo.jpg" /></h1>
	<ul id = "globalnav">
		<li class="home"><a href="html.html">HOME</a></li>
		<li class="idea"><a href="html.html">理念</a></li>
		<li class="service"><a href="html.html">サービス</a></li>
		<li class="company"><a href="html.html">会社概要</a></li>
		<li class="FAQ"><a href="html.html">良くある質問</a></li>
		<li class="access"><a href="html.html">アクセス</a></li>
	</ul>
		<div class="box">
		<img src="img/icatch.png">
		<div class="left">
		<p>
		<ul id = "sidebar">
		<li class="careplan"><a href="html.html">ケアプラン</a></li>
		<li class="grouphome"><a href="html.html">グループホーム</a></li>
		<li class="service"><a href="html.html">サービス付き高齢者向け住宅</a></li>
		<li class="homehelp"><a href="html.html">ホームヘルプサービス</a></li>
		<li class="daycare"><a href="html.html">デイサービス</a></li>
		</ul>
		</p>
	</div>
	</div>
	<div id= "left">
	<h2><img src="img/top-news.jpg" /></h2>
	<dl>
		<dt>2016.01.01</dt>
		<dd>今年もサンベストビレッジ浮間公園を<br />
よろしくお願いします。</dd>
		<dt>2015.11.22</dt>
		<dd>第五回介護甲子園の決勝大会に<br />
出場しました。結果は惜しくも優秀賞でした。<br />
応援の方、ありがとうございました。</dd>
		<dt>2015.09.13</dt>
		<dd>第五回介護甲子園決勝進出！！<br />
11月23日に日比谷公会堂にて<br />
決勝大会を行います。</dd>
		<dt>2015.08.30</dt>
		<dd>サービス付き高齢者向け住宅  残り３室となっております。<br />
（お問い合わせを多数いただいております。）</dd>
		<dt>2013.08.20</dt>
		<dd>サービス付き高齢者向け住宅  残り3室</dd>
		<dt>2013.06.01</dt>
		<dd>グループホーム  満室となりました。待機者募集中です。</dd>
		<dt>2012.09.25</dt>
		<dd>ホームページリニューアルしました。</dd>
		<dt>2012.09.25</dt>
		<dd>サービス付き高齢者向け住宅  残り8室</dd>
		<dt>2012.09.25</dt>
		<dd>グループホーム  残り2室</dd>
		<dt>2012.09.25</dt>
		<dd>求人募集中（来年度新卒含む）</dd>
	</dl>
	</div>
	</div>
	<div id = "right">
	<img src ="img/top-bn-kamifukuoka.jpg" />
	<img src ="img/top-bn-confirm.jpg" />
	<img src ="img/top-bn-reserve.jpg" />
	<img src ="img/top-bn-staff.jpg" />
	</div>
	</div>
	<div id = "footer">			
	<p>会社概要  プライバシーポリシー</p>
	<p>copyright &copy; 2012 サンベスト浮間公園 All rights reserved</p>
	</div>
	</div>
	</body>
</html>

###補足情報(言語/FW/ツール等のバージョンなど)
ｈｔｍｌｃｓｓ

s8_chu

2017/08/19 04:06

HTMLを追記していただけませんか？

kei344

2017/08/19 04:56

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

行動規範の内容に同意します

回答4件

ベストアンサー

画像がずれない原因は、#sidebar ul .careplan aとしているためです。#sidebarが付与されている要素の子孫にはul要素は存在しません。また、セレクタも間違っていますが、文法的な誤りが多いような印象を受けます。参考にしているものがあるのであれば、よく見比べてタイプミスなどの単純なミスをなくしていくと良いと思います。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <!-- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 不要 -->
5    <meta charset="UTF-8">
6    <title>東京都板橋区のグループホーム・サービス付き高齢者向け住宅・デイサービスのサンベストビレッジ浮間公園</title>
7    <style type="text/css">
8        body {
9            background-size: 100%;
10            display: block;
11            line-height: 1.4;
12            background-color: #ffffff;
13            background-image: url(https://placehold.jp/d7d7db/ffffff/150x150.png?text=img/head-bg.jpg);
14            background-repeat: repeat-x;
15            margin: 0;
16            padding: 0;
17        }
18
19        a {
20            text-decoration: none;
21            display: block;
22            text-indent: -9999px;
23            background-image: url(https://placehold.jp/b7baeb/ffffff/150x150.png?text=img/head-menu.jpg);
24            height: 49px;
25            width: 100%;
26            background-position: 0 top;
27        }
28
29        #globalnav .idea a {
30            background-image: url(https://placehold.jp/b7baeb/ffffff/150x150.png?text=img/head-menu.jpg);
31            /* backgroud-repeat: no-repeat; background-repeatのタイプミス？ */
32            background-repeat: repeat;
33            background-position: -150px top;
34        }
35
36        #globalnav .service a {
37            /* backgroud-image: url("img/head-menu.jpg"); background-imageのタイプミス？ */
38            background-image: url(https://placehold.jp/b7baeb/ffffff/150x150.png?text=img/head-menu.jpg);
39            background-repeat: no-repeat;
40            background-position: -300px top;
41        }
42
43        #globalnav .company a {
44            background-image: url(https://placehold.jp/b7baeb/ffffff/150x150.png?text=img/head-menu.jpg);
45            background-repeat: no-repeat;
46            background-position: -450px top;
47        }
48
49        #globalnav .FAQ a {
50            background-image: url(https://placehold.jp/b7baeb/ffffff/150x150.png?text=img/head-menu.jpg);
51            background-repeat: no-repeat;
52            background-position: -600px top;
53        }
54
55        #globalnav .access a {
56            /* backgroud-image: url("img/head-menu.jpg"); background-imageのタイプミス？ */
57            background-image: url(https://placehold.jp/b7baeb/ffffff/150x150.png?text=img/head-menu.jpg);
58            background-repeat: no-repeat;
59            background-position: -750px top;
60        }
61
62        .box {
63            margin: 10px 0;
64            float: left;
65            width: 100%;
66            background: #ffffff;
67        }
68
69        .box img {
70            max-width: 100%;
71            float: right;
72            margin: 0;
73        }
74
75        .box p {
76            margin: 0;
77            padding: 0;
78        }
79
80        #sidebar a {
81            text-decoration: none;
82            float: left;
83            display: block;
84            width: 255px;
85            height: 60px;
86            background-image: url(https://placehold.jp/b7baeb/ffffff/150x150.png?text=img/top-menu.jpg);
87            background-repeat: no-repeat;
88            background-position: 0, left bottom; /* 修正 */
89        }
90
91        #sidebar ul {
92            display: block;
93            height: 300px;
94        }
95
96        #sidebar ul li {
97            display: block;
98            height: 60px;
99        }
100
101        ul#sidebar .careplan a { /* 修正 */
102            background-image: url(https://placehold.jp/b7baeb/ffffff/150x150.png?text=img/top-menu.jpg);
103            background-repeat: no-repeat;
104            background-position: 0, left bottom; /* 修正 */
105        }
106
107        ul#sidebar .grouphome a { /* 修正 */
108            background-image: url(https://placehold.jp/b7baeb/ffffff/150x150.png?text=img/top-menu.jpg);
109            background-repeat: no-repeat;
110            background-position: -60px, left bottom; /* 修正 */
111        }
112
113        ul#sidebar .service a { /* 修正 */
114            background-image: url(https://placehold.jp/b7baeb/ffffff/150x150.png?text=img/top-menu.jpg);
115            background-repeat: no-repeat;
116            background-position: -120px, left bottom; /* 修正 */
117        }
118
119        ul#sidebar .homehelp a { /* 修正 */
120            background-image: url(https://placehold.jp/b7baeb/ffffff/150x150.png?text=img/top-menu.jpg);
121            background-repeat: no-repeat;
122            background-position: -180px, left bottom; /* 修正 */
123        }
124
125        ul#sidebar .daycare a { /* 修正 */
126            background-image: url(https://placehold.jp/b7baeb/ffffff/150x150.png?text=img/top-menu.jpg);
127            background-repeat: no-repeat;
128            background-position: -240px, left bottom; /* 修正 */
129        }
130
131        .left {
132            float: left;
133        }
134
135        h1 {
136            color: #ffffff;
137            margin: 0;
138        }
139
140        h2 {
141            height: 80px;
142            padding-top: 24px;
143            padding-left: 20px;
144            margin: 0;
145            color: #000000; /* #blackはカラーコードとして存在しない */
146            clear: both;
147        }
148
149        dl {
150            background-color: #ffffff; /* #whiteはカラーコードとして存在しない */
151            width: 680px;
152            margin-top: 0;
153            list-style-image: url(https://placehold.jp/b7baeb/ffffff/150x150.png?text=img/top-li.jpg);
154        }
155
156        ul#globalnav li {
157            float: left;
158            width: 150px;
159            list-style-type: none;
160            background-color: #ff9fbf;
161        }
162
163        ul {
164            padding: 0;
165            margin: 0;
166        }
167
168        div#left {
169            float: left;
170            width: 680px;
171            background-color: #ffffff; /* コロン(:)が必要 */
172        }
173
174        div#right {
175            float: right;
176            width: 220px;
177            padding-left: 0;
178        }
179
180        div#right img {
181            margin: 0;
182        }
183
184        div#footer p {
185            text-align: center;
186            color: #000000; /* #blackはカラーコードとして存在しない */
187            background-color: #ff9fbf;
188            clear: both;
189            background-image: url(https://placehold.jp/b7baeb/ffffff/150x150.png?text=img/foot-bg.jpg);
190            background-repeat: repeat-x;
191            height: 140px;
192            padding: 0;
193            background-position: bottom;
194            margin: 0;
195        }
196
197        div#wrapper {
198            width: 900px;
199            margin: 0 auto;
200        }
201    </style>
202</head>
203<body>
204<a id="top"></a>
205<div id="wrapper">
206    <h1>
207        <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=img/logo.jpg" alt=""><!-- alt属性を追加 -->
208    </h1>
209    <ul id="globalnav">
210        <li class="home">
211            <a href="html.html">HOME</a>
212        </li>
213        <li class="idea">
214            <a href="html.html">理念</a>
215        </li>
216        <li class="service">
217            <a href="html.html">サービス</a>
218        </li>
219        <li class="company">
220            <a href="html.html">会社概要</a>
221        </li>
222        <li class="FAQ">
223            <a href="html.html">良くある質問</a>
224        </li>
225        <li class="access">
226            <a href="html.html">アクセス</a>
227        </li>
228    </ul>
229    <div class="box">
230        <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=img/icatch.png" alt=""><!-- alt属性を追加 -->
231        <div class="left">
232            <!-- <p> -->
233            <ul id="sidebar">
234                <li class="careplan"><a href="html.html">ケアプラン</a></li>
235                <li class="grouphome"><a href="html.html">グループホーム</a></li>
236                <li class="service"><a href="html.html">サービス付き高齢者向け住宅</a></li>
237                <li class="homehelp"><a href="html.html">ホームヘルプサービス</a></li>
238                <li class="daycare"><a href="html.html">デイサービス</a></li>
239            </ul>
240            <!-- </p> -->
241        </div>
242    </div>
243    <div id="left">
244        <h2>
245            <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=img/top-news.jpg" alt=""><!-- alt属性を追加 -->
246        </h2>
247        <dl>
248            <dt>2016.01.01</dt>
249            <dd>今年もサンベストビレッジ浮間公園を<br>
250                よろしくお願いします。
251            </dd>
252            <dt>2015.11.22</dt>
253            <dd>第五回介護甲子園の決勝大会に<br/>
254                出場しました。結果は惜しくも優秀賞でした。<br>
255                応援の方、ありがとうございました。
256            </dd>
257            <dt>2015.09.13</dt>
258            <dd>第五回介護甲子園決勝進出！！<br>
259                11月23日に日比谷公会堂にて<br>
260                決勝大会を行います。
261            </dd>
262            <dt>2015.08.30</dt>
263            <dd>サービス付き高齢者向け住宅 残り３室となっております。<br>
264                （お問い合わせを多数いただいております。）
265            </dd>
266            <dt>2013.08.20</dt>
267            <dd>サービス付き高齢者向け住宅 残り3室</dd>
268            <dt>2013.06.01</dt>
269            <dd>グループホーム 満室となりました。待機者募集中です。</dd>
270            <dt>2012.09.25</dt>
271            <dd>ホームページリニューアルしました。</dd>
272            <dt>2012.09.25</dt>
273            <dd>サービス付き高齢者向け住宅 残り8室</dd>
274            <dt>2012.09.25</dt>
275            <dd>グループホーム 残り2室</dd>
276            <dt>2012.09.25</dt>
277            <dd>求人募集中（来年度新卒含む）</dd>
278        </dl>
279    </div>
280</div>
281<div id="right">
282    <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=img/top-bn-kamifukuoka.jpg" alt=""><!-- alt属性を追加 -->
283    <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=img/top-bn-confirm.jpg" alt=""><!-- alt属性を追加 -->
284    <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=img/top-bn-reserve.jpg" alt=""><!-- alt属性を追加 -->
285    <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=img/top-bn-staff.jpg" alt=""><!-- alt属性を追加 -->
286</div>
287<!-- </div>不要 -->
288<div id="footer">
289    <p>会社概要 プライバシーポリシー</p>
290    <p>copyright &copy; 2012 サンベスト浮間公園 All rights reserved</p>
291</div>
292<!-- </div>不要 -->
293</body>
294</html>

投稿2017/08/20 10:53

編集2017/08/20 11:08

s8_chu

総合スコア14731

退会済みユーザー

2017/08/20 23:57

ご回答ありがとうございます！さっそく実践してみます。

行動規範の内容に同意します

p要素の中にul要素があるのは文法的に間違っています。p要素はフレージングコンテンツ以外を内包しません。

【p 要素 - HTML | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/p

【コンテンツカテゴリ - HTML | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Content_categories#Phrasing_content

あと、</div> が2個ほど多いです。

投稿2017/08/19 15:54

編集2017/08/19 15:55

kei344

総合スコア69400

退会済みユーザー

2017/08/21 23:50

ご回答ありがとうございます。頑張って直してみます。

行動規範の内容に同意します

練習のため自分でみつけてみて

とのことなので、とりあえずおかしいと思ったところをコメントしてみます。

css
1sidebar a {
2/* ↑ クラス名は最初に「.」が付きます*/
3	text-decoration: none;
4	float: left;
5	display: block;
6	width: 255px;
7	height: 60px;
8	background-image: url(img/top-menu.jpg);
9	background-repeat: no-repeat;
10	background-position: 0 left bottom;
11	/* ↑ background-position の値は2つです。 */
12}
13
14/* ↓ 不要な記述が入っています */
15style.css:11
16
17a {
18	text-decoration: none;
19	display: block;
20	text-indent: -9999px;
21	background-image: url(img/head-menu.jpg);
22	height: 49px;
23	width: 100%;
24	background-position: 0 top;
25}
26
27/* ↓ 不要な記述が入っています */
28user agent stylesheet
29
30/* ↓ セレクタの部分にプロパティが入っています */
31a:-webkit-any-link {
32	color: -webkit-link;
33	cursor: auto;
34	text-decoration: underline;
35}
36
37/* ↓ 不要な記述が入っています */
38Inherited from li.careplan
39user agent stylesheet
40
41li {
42	display: list-item;
43	text-align: -webkit-match-parent;
44}
45
46/* ↓ 不要な記述が入っています */
47Inherited from ul#sidebar
48user agent stylesheet
49
50ul, menu, dir {
51/* ↑ menuとdirはクラス名ではないですか？「.」が必要です*/
52	display: block;
53	list-style-type: disc;
54	-webkit-margin-before: 1em;
55	-webkit-margin-after: 1em;
56	-webkit-margin-start: 0px;
57	-webkit-margin-end: 0px;
58	-webkit-padding-start: 40px;
59}
60
61/* ↓ 不要な記述が入っています */
62Inherited from body
63style.css:1
64
65body {
66	background-size: 100%;
67	display: block;
68	line-height: 1.4;
69	background-color: #ffffff;
70	background-image: url(img/head-bg.jpg);
71	background-repeat: repeat-x;
72	margin: 0px;
73	padding: 0px;
74}