横並び系リストはフロートの方が楽？
横並び系リスト（フッターリンクや画像のあるナビなど）は以下のようにやることが多いです。
- display: inline指定する
- <ul>内の全てのホワイトスペースをコメントアウト、もしくは消す
箇条書きにすると2つの工程ですが、コメントアウトがしんどいですし、面倒すぎます。あと、Dreameweaverでリンクをいじってるとコメントアウト部分がずれてしまいます。面倒だらけなので、フロートだけで指定してみたらいいのではないでしょうか。試してみましょう。
なお、サンプルにはわかりやすくするために、<li>に背景色とボーダーライトを入れています。
普通にdisplay: inline の場合
<ul><!--
--><li><a href="#">トップページ</a></li><!--
--><li><a href="#">会社概要</a></li><!--
--><li><a href="#">製品情報</a></li><!--
--><li><a href="#">コンタクト</a></li><!--
--><li><a href="#">アクセス</a></li><!--
--><li class="lastChild"><a href="#">お問い合わせ</a></li><!--
--></ul>
ul.inlineTxtList {
margin-bottom: 2em;
}
ul.inlineTxtList li {
display: inline;
}
面倒ですが、安定感がありますね。どのブラウザもほぼ同じ。
float: left にすると
<ul class="floatTxtList bg">
<li><a href="#">トップページ</a></li>
<li><a href="#">会社概要</a></li>
<li><a href="#">製品情報</a></li>
<li><a href="#">コンタクト</a></li>
<li><a href="#">アクセス</a></li>
<li class="lastChild"><a href="#">お問い合わせ</a></li>
</ul>
ul.floatTxtList {
}
ul.floatTxtList li {
float: left;
margin-bottom: 1em;
}
ul.floatTxtList li.lastChild {
margin-bottom: 2em;
float: leftの場合は最後の<ll>要素に対してclass="lastChild"を入れて、そいつの下マージンを他と変更すれば、2行になってしまったときのマージン管理も比較的容易に行えます。ちょっと、説明苦しいですね。
しかしながら、考慮しなければならない存在としてIEがあります。以下の2点あります。
- 右端にきたli要素の挙動がおかしくなる
- "ul tips"などとホワイトスペースがli要素の中にあると、右端でなくともホワイトスペースで改行されるときがある
なんだか、欠点が多い気もしますが、これに耐えうる設計ならばfloatの方がさっさと作れます。上記の例ではよくわからないので、li要素を増やし、ulの幅を短くしたものを用意しました。IEで見て、ctrl+マウスホイールコロコロで文字サイズを変更してみてください。
画像+フロートのみの場合
可読性のため、htmlソースは幅・高さ・altを丁寧に指定してません。みなさんはよい子なので、きちんと指定できるはずですね。
<ul class="globalNav">
<li><img src="img/nav01.jpg" alt="〜" /></li>
<li><img src="img/nav02.jpg" alt="〜" /></li>
<li><img src="img/nav03.jpg" alt="〜" /></li>
<li><img src="img/nav04.jpg" alt="〜" /></li>
<li><img src="img/nav05.jpg" alt="〜" /></li>
<li class="lastChild"><img src="img/nav06.jpg" alt="〜" /></li>
</ul>
ul.globalNav li {
float: left;
}
ul.globalNav li.lastChild {
margin-bottom: 2em;
}
画像の場合は特になんの問題もありません。macIEのみ崩れます。macIEはフロートした要素に幅指定しないといけないので、対応する場合はinline＋コメントアウトでやりましょう。ただし、別途お見積もりをして、コメントアウト分の労働報酬をしっかりもらうようにしてください！
いやー、やはりコメントアウトしない方法ってのが一番楽ですね〜。安定して使えるのはimg要素のナビだけかもしれませんが、いろいろ試してるうちにいろいろわかることも多いかと思うので、ナンヤカンヤ試してみてください。