HTML作成で、floatが上手くいきません。

###前提・実現したいこと
HTML/CSS初心者です。
簡単なインターフェイスを作ろうとしているのですが、アイコンを並べようと思ったときに、floatが上手くいきません。どのように記述すれば右側のアイコンを右にfloatさせることができるでしょうか？
###発生している問題・エラーメッセージ

エラーメッセージ
```![イメージ説明](0878d912ccb4fb876b181a495d70616b.png)
上のようにしたいのですが、下のようになってしまいます。
###該当のソースコード
```HTML5
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>MY WORKSHOP</title>
<link rel="stylesheet" href="CSS/reset.css">
<link rel="stylesheet" href="CSS/my_workshop.css">
</head>

<body>
<h1><img src="image/title.png" alt="" class="title"></h1>
<div id=mainArea>
	<ul>
		<li><img src="image/about_me.png" alt="About me" class="icon left" id="about"></li>
		<li><img src="image/Music.png" alt="Music" class="icon right" id="music"></li>
		<li><img src="image/Outdoor.png" alt="Outdoor" class="icon left" id="outdoor"></li>
		<li><img src="image/Indoor.png" alt="Indoor" class="icon right" id="indoor"></li>
		<li><img src="image/Fashon.png" alt="Fashon" class="icon left" id="fashon"></li>
		<li><img src="image/Blog.png" alt="Blog" class="icon right" id="blog"></li>
	</ul>
</div>
</body>
</html>

CSS
1@charset "UTF-8";
2/* CSS Document */
3
4body {
5	width: 750px;
6	height: 1334px;
7	background-image: url("../image/background.png");
8}
9img.title {
10	width: 614px;
11	height: 64px;
12	margin-top: 87px;
13	margin-left: 73px;
14}
15div#mainArea {
16	position: relative;
17}
18img.icon {
19	width: 306px;
20	height: 306px;
21	display: inline;
22}
23img.icon.left {
24	float: left;
25	margin-left: 44px;
26	margin-right: 52px;
27	display: inline;
28}
29img.icon.right {
30	float: right;
31	margin-right: 44px;
32}
33}
34img#about {
35	margin-top: 133px;
36}
37img#music {
38	position: relative;
39	
40}
41img#outdoor {
42	margin-top: 33px;
43}
44

###試したこと
親要素と思われるものにclearfixを設定。
link要素のdisplayプロパティをinlineに設定。
###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

退会済みユーザー

2017/02/19 03:16

https://teratail.com/help/question-tips#questionTips3-5-1

kei344

2017/02/19 03:23

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

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

回答3件

ベストアンサー

幅とfloatを設定する要素を間違えています。
どちらもli要素に設定するようにしてください。

投稿2017/02/19 03:49

yamato_hikawa

総合スコア2092

hct_03

2017/02/19 06:14

ご回答、ありがとうございます。解決しました。

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

恐らく上記の方の解答で問題は解決してしまうので、
ちょっとcss指定の仕方について補足です。

セレクタの指定が今img要素指定になっているのを

img.icon {}
img.icon.left {}
img.icon.right {}

↓こちらのようにimg要素を取ってしまいましょう。

.icon {ここには.iconのみに適応するcssを記述}
.icon.left {ここにはfloat:leftさせる為だけのcssを記述}
.icon.right {ここにはfloat:rightさせる為だけのcssを記述}

これであればスタイルをli要素やその他の要素にも反映できるので、
html上でclassをli要素に反映させれば問題は解決すると思います。
（img要素からclassを取ることをお忘れなく）

投稿2017/02/19 04:13

hiro_loveness

総合スコア12

hct_03

2017/02/19 06:14

非常に丁寧な解説ありがとうございます！勉強になります。

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

img.icon { 
width: 306px; 
height: 306px; 
display: inline; 
} 
img.icon.left { 
float: left; 
margin-left: 44px; 
margin-right: 52px; 
display: inline; 
}

上記のdisplay: inline; をdisplay: block;
としてmarginも0にしてみてどうでしょうか。

floatはいろいろと癖があり最近ではレイアウトはFlexboxというもの
がブラウザも対応してきているので切り替えたほうがいいような気もします。
https://ics.media/entry/13117

投稿2017/02/19 03:24

編集2017/02/19 03:28