今回はちょっと便利なfloatの使い方をご紹介したいと思います。
以前紹介したfloatを使う際の注意点に反してしまいますが
幅が決められない(決めたくない)要素をfloatさせたいときってありますよね。
例えばフッターにテキストリンクを多数並べたい場合などが考えられます。
| 会社概要 | お問い合わせ | 個人情報保護方針 | 採用情報 | サイトマップ |
↑こんなリンクです。
「それなら以前紹介したこの方法でいいんじゃない?」
と先輩に突っ込まれましたので、今回は違う方法で実現してみたいと思います。
まずは前回の先輩のサンプルを応用(拝借)してみます。
- (htmlコーディング)
-
<div class="list">
<ul></div><li>テストです</li><li>テストですよ</li><li>テストですね</li><li>テストなんだな</li><li>テストかぁ・・・</li></ul>
- (cssサンプル)
-
* {
padding:0;}
margin:0;
.list {width:400px;}
padding:10px;
background-color:#9FF;
list-style-type:none;
list-style-position:outside;
.list li {display:inline;}
padding-right:10px;
margin-right:10px;
border-right:1px solid #000000;
この方法は非常にシンプルにかけてとても使いやすいのですが、弱点があります。

※スクリーンショットは、Windows Firefox 3.0のものです。
このサンプルのように親要素のwidthが小さい場合、
テキストの途中で改行されてしまう場合があります。
これはこれで有りですが、ひとつのaタグ内では改行してほしくない場合もあるかと思います。
例えばこうなってほしい場合です。

※これは「こうしたいなぁ」というサンプルです。よくありますよね?
aタグの終わりで次が入りきらない場合に改行したい!って時です。
これを実現する為には、white-spaceとfloatを同時に指定します。
- (htmlコーディング)
-
<div class="list">
<ul></div><li>テストです</li></ul>
<li>テストですよ</li>
<li>テストですね</li>
<li>テストなんだな</li>
<li>テストかぁ・・・</li>
<div class="clear"> </div>
- (cssサンプル)
-
* {
padding:0;}
margin:0;
.list {width:400px;}
padding:10px;
background-color:#9FF;
list-style-type:none;
list-style-position:outside;
.list li {display:block;}
float:left;
white-space:nowrap;
padding-right:10px;
margin-right:10px;
border-right:1px solid #000000;
.clear {clear:both;}
height:0;
visibility:hidden;
font-size:1px;
line-height:0px;

※スクリーンショットは、Windows Firefox 3.0のものです。
うまくいきました。
ちなみにwhite-space:nowrap;を指定しなくてもFirefoxでは問題ありませんが、
例のごとくInternet Explorer では表示が崩れてしまいます。

※またIEかと思わずにはいられません。
スクリーンショットは、Internet Explorer6です。ちなみにIE7でも崩れました。
white-space:nowrap;はもともとは改行をさせなくさせるプロパティで
tableタグ内でthを改行させたくない場合などに良く使われますが
こんな使い方もあるんですね。
この方法の利点には『displayをinlineにしなくていい』ということもあります。
その為、インライン要素では指定できないpaddingの上下などを使うこともできます。
以前紹介した方法と、今回の方法、状況に合わせて使い分けるとかなり便利だと思います。