cssの横並びリストについて疑問が。。

質問

display:inline;　float:left;
どちらも横並びになりますが、どう使い分ければいいでしょうか？
できれば、それぞれどういった時に使うのか、
どういった所が記述方法で違ってくるとか、
使う理由も含めて頂けると分かりやすいので、できればお願いします。

もう一つ、一枚の画像でロールオーバーナビゲーションを作る時、
なぜテキストを表示させていたものを、わざわざ表示させないようにして、
背景画像を表示(ロールオーバー画像)させるのですか？
わざわざテキストを最初に置くのか疑問です。
テキストの代わりにしないと背景画像が置けないのでしょうか・・？

回答No.2

tenderfeel · ベストアンサー

displayはインライン要素をブロック要素にしたりと表示スタイルそのものを変更・変更しますが
floatは他の要素が回り込む場所だけ指定します。

リスト要素にdisplay:inlineを使用した場合、横並びにはなりますが
リストがインライン要素に変更されることでブロック要素で可能なことが出来なくなります。
（例：横幅の指定、高さの指定、上下方向のマージンやパディング指定など）
なので、display:inlineを使うのはテキストのみのメニューが多いですが、
サイズ指定が出来なくなるので、中に入るa要素をブロック要素にしてfloatを使うことが多いと思います。

floatは回り込みだけ指定するプロパティなので、displayについては変更しません。
リスト要素にfloatを指定した場合はブロック要素である事は維持されるので
横幅の指定、高さの指定、上下方向のマージンやパディングの指定が可能です。

背景画像については色々ありますが、思いつくところでは・・・
・<li>テキスト</li>にした方がＳＥＯ効果あるよ！っていう伝説の影響
・javascriptを切っててもロールオーバーが可能である
・オン、オフ画像をまとめて1枚で済む
・テキストだけ変更して背景が使いまわせる
・なんとなくweb2.0（笑）っぽい（＝流行ってるからやってみただけ）

こんなところでしょうか。
組む人間の好みとか考え方で変わると思いますが、上二つによるところが大きいのではないかと。

回答No.1

noname#66720

普段はfloatでやりますが、例えば文字数に応じてリストの幅を変えたいときや、横並びリストをセンタリングしたいときはdisplay:inline;のほうを使います。
あと、display:inline;の場合は、li要素の終了タグから次のli要素の開始タグまでにスペースor改行を含めないようにしないとli要素間に微妙な隙間ができます。
可読性を保つためにもこの場合の対処として以下のようにコメントアウトを使ってHTMLを記述することになるかと思います。

<ul>
<li>menu</li><!--
--><li>menu</li><!--
--><li>menu</li>
</ul>

２つめのはロールオーバーというよりは画像置換のことだと思います。
これは例えば現在パソコンの環境で見る分には回線速度が問題になることはありませんが、携帯のようなモバイル端末で見たときにcssを切り替えテキストのままを表示させることによって、画像をダウンロードさせずにページを軽くすることができるためです。
それと、一般的にはSEOに有利な方法だと言われています。
しかし、これについてはimg要素のalt属性でもある程度効果はあるようですので信憑性が低いです。