CSS 横並びリストの書き方はどちらがよいでしょうか

解決済

質問者：asummer
質問日時：2007/05/24 21:27
回答数：2件

スタイルシートで横並びリストを作成するとき、li { display: inline; } を使う方法と、li { display: block; float:left; } を使う方法がありますよね。皆さんは、意識して、使い分けられていますか？

どちらで表現しようか、よく迷います。どちらの方法でも同じレイアウトにできるように思ってしまっていて。。でも自分の気付いていないデメリットがあるのかな？と気になります。「こうしたい場合、こちらのレイアウトだと無理」とか、「これではこのブラウザで表示が崩れる」など、お気づきのことがあれば、教えていただけないでしょうか。

下に、自分で確認用に作ったhtmlがあるので、そのままブラウザで見ていただければと思います。お手数ですが、よろしくお願いします。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>横並びサンプル</title>

<style type="text/css">

</style>
</head>

<body>

<div id="yoko1">
<ul>
<li><a href="#">あ</a></li>
<li><a href="#">い</a></li>
<li><a href="#">う</a></li>
</ul>
</div>

<div id="yoko2">
<ul>
<li><a href="#">あ</a></li>
<li><a href="#">い</a></li>
<li><a href="#">う</a></li>
</ul>
</div>

</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

No.1ベストアンサー

回答者： izayoimizuki
回答日時：2007/05/24 21:46

回り込みとインライン表示は似た表現ができる場合もありますが存在する理由が違います。

インライン表示は文字列を段落のようなブロックとして表示しないという考え方です。
floatはブロックにほかのブロックを回り込ませる(雑誌などで写真に対し文章が回り込んでいたりするあれです)ためのものです。

今回の場合はどちらでもよさそうですがリストのインライン表示にはMozilla系のブラウザでトラブルの原因となることがあります。
逆にフロートはIntenet Explorerでトラブルの原因となることがあります。
ですのでユーザの多いほうでトラブルを起こさない書き方(インライン表示)が適切ではないかと思います。

- 0
- 件

通報する

この回答へのお礼

ありがとうございます！なるほど。ＩＥのフロートは色々注意が必要みたいですね。今回の場合に限れば、どちらでも問題なさそうということも分かりました。同じレイアウトを実現する方法を色々知っておいて、その時々にブラウザ毎のことを考えて使い分ける、がよさそうですね。教えていただき感謝します！

通報する

お礼日時：2007/05/25 15:59

No.2

回答者： MAN_MA_RUI
回答日時：2007/05/25 01:36

> ですのでユーザの多いほうでトラブルを起こさない書き方(インライン表示)が適切ではないかと思います。

少数派を半ば無条件的に切り捨てるのはどうかと…^^;
IEが使えない環境も考慮したほうが幅広い層のユーザーを取り込めるのですから。

IEとそれ以外で挙動が異なるのであれば両方の併用を行えばいいと思います。
CSS読み込みでIE5以降とそれ以外を振り分け。


<![if IE]>
<link rel="stylesheet" href="not_ie.css" type="text/css">
<![endif]>