リストを横並びする時のセレクタの決め方がわからない

floatのセレクタをliと指定するとリストが横並びになるのですが、ulだと逆に何故ならないのでしょうか。

index.html

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<meta charset="utf-8">
5	<title>list</title>
6	<link rel="stylesheet" type="text/css" href="list.css">
7</head>
8<body>
9	<h1>TTTTTTTT</h1>
10	<ul>
11		<li>Tokyo</li>
12		<li>Osaka</li>
13		<li>Nagoya</li>
14		<li>Fukuoka</li>
15	</ul>
16</body>
17</html>

list.css

css
1body {
2	font-family: Meiryo;
3}
4
5li {
6	float: left;
7}

kei344

2016/09/17 07:28

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況をお教えください。

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

回答1件

ベストアンサー

ulだと逆に何故ならないのでしょうか

なりますよ？

CSS
1ul {
2    float: left;
3}

HTML
1<ul>
2    <li>Tokyo</li>
3</ul>
4<ul>
5    <li>Osaka</li>
6</ul>
7<ul>
8    <li>Nagoya</li>
9</ul>
10<ul>
11    <li>Fukuoka</li>
12</ul>
13```**動くサンプル：**[https://jsfiddle.net/fr4p9w4x/](https://jsfiddle.net/fr4p9w4x/)
14
15---
16
17【CSSの【float】についてちょっと本気出して説明してみた。 | たねっぱ！】
18[http://taneppa.net/float/](http://taneppa.net/float/)
19
20【li 要素 - HTML | MDN】
21[https://developer.mozilla.org/ja/docs/Web/HTML/Element/li](https://developer.mozilla.org/ja/docs/Web/HTML/Element/li)
22
23【ul 要素 - HTML | MDN】
24[https://developer.mozilla.org/ja/docs/Web/HTML/Element/ul](https://developer.mozilla.org/ja/docs/Web/HTML/Element/ul)
25

投稿2016/09/17 06:57

編集2016/09/17 07:09

kei344

総合スコア69407

退会済みユーザー

2016/09/17 07:04

ご回答ありがとうございます。一点ご教示頂きたいのですが、リスト化する時、ul要素は必要なのでしょうか。 li要素だけではダメなのでしょうか。

kei344

2016/09/17 07:11

回答にリンクを追記しましたが、li要素の許可された親要素は<ul>、<ol>、<menu>のみです。リストに ul / li 以外を使用することは可能ですが、HTMLは構造にも意味を持つように作られているため、一般的にリストになるものは ul / li を使用します。

gin

2016/09/17 07:16

イメージとして箱自体(ul)を横並びにしたいときはulに、箱の中身(li)を横並びにしたいときはliにfloatを設定する感じですね。

kei344

2016/09/17 07:19 編集

https://jsfiddle.net/fr4p9w4x/2/ こういう感じでdivでも横並びは作れますが、ul / li の使用を避ける必要も特に無く、ul / li を使うほうが人間以外が解析するときに「それが何を表す要素か」がわかりやすいと思います。 To: ginさん補足ありがとうございます！

退会済みユーザー

2016/09/17 07:19

kei344様、gin様もやもやした事がすっきりしました。ご回答ありがとうございます。大変助かりました。

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