2009年10月16日

widthを決めずにfloatさせたい

こんにちは、溝上です。

今回はちょっと便利なfloatの使い方をご紹介したいと思います。
以前紹介したfloatを使う際の注意点に反してしまいますが
幅が決められない(決めたくない)要素をfloatさせたいときってありますよね。
例えばフッターにテキストリンクを多数並べたい場合などが考えられます。

| 会社概要 | お問い合わせ | 個人情報保護方針 | 採用情報 | サイトマップ |

↑こんなリンクです。

「それなら以前紹介したこの方法でいいんじゃない?」

と先輩に突っ込まれましたので、今回は違う方法で実現してみたいと思います。
まずは前回の先輩のサンプルを応用(拝借)してみます。

(htmlコーディング)
<div class="list">
<ul>
<li>テストです</li><li>テストですよ</li><li>テストですね</li><li>テストなんだな</li><li>テストかぁ・・・</li>
</ul>
</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:inline;
padding-right:10px;
margin-right:10px;
border-right:1px solid #000000;
}


この方法は非常にシンプルにかけてとても使いやすいのですが、弱点があります。

▼スクリーンショット

※スクリーンショットは、Windows Firefox 3.0のものです。

このサンプルのように親要素のwidthが小さい場合、
テキストの途中で改行されてしまう場合があります。

これはこれで有りですが、ひとつのaタグ内では改行してほしくない場合もあるかと思います。
例えばこうなってほしい場合です。

▼こうなってほしい!ってことありますよね

※これは「こうしたいなぁ」というサンプルです。よくありますよね?

aタグの終わりで次が入りきらない場合に改行したい!って時です。

これを実現する為には、white-spacefloatを同時に指定します。

(htmlコーディング)
<div class="list">
<ul>
<li>テストです</li>
<li>テストですよ</li>
<li>テストですね</li>
<li>テストなんだな</li>
<li>テストかぁ・・・</li>
</ul>
<div class="clear">&nbsp;</div>
</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の上下などを使うこともできます。

以前紹介した方法と、今回の方法、状況に合わせて使い分けるとかなり便利だと思います。

HTML5&CSS3の最新情報はこちら → HTML5GOGO

posted by baba at 17:29 | Comment(0) | TrackBack(0) | テクニック
この記事へのコメント

この記事へのトラックバック
 
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。