acky info

連絡先

tips

web関係、制作関係でのよしなしごとを書いています。

CSSテクニック

positionを使ったCSSテクニック

フォームに関するCSSテクニック

疑似クラスを使ったCSSテクニック

リストのCSSテクニック

tableに関するCSSテクニック

左寄せ、中央寄せ、右寄せのCSSテクニック

floatを使ったCSSテクニック

ads

floatとoverflowを使った横幅を指定しない横並び

2012/2/15 注意点を加筆

通常floatを使う場合はwidthを指定する必要がありますが、overflowを使うことでwidthを指定せずに横並びにすることができます。

<div>
<div class="float">floatのdiv</div>
<div class="overflow">overflowのdiv</div>
</div>

.float{
float:left;
}
.overflow{
overflow:hidden;
/zoom:1;
}

floatのdiv
overflowのdiv
floatのdiv floatのdiv floatのdiv
overflowのdiv

上のサンプルからも分かるように、それぞれの幅が内包する画像やテキストなどの幅に合わせて自動調整されます。
これの利用例としては、横幅の違う画像とテキストの並びを一つのコードで作成できるためメンテナンス性などが向上します。

このテクニックではfloatする要素をoverflowする要素よりも先にに書かないと、単に二段重ねになってしまうので注意が必要です。
overflowの方に重要なテキストがありSEO(検索エンジン最適化 Search Engine Optimization)を考えfloatの内容よりも先に書きたい場合などには使えません。

overflowのdivを先に書き横並びにならなかったサンプル
floatのdiv
ads

floatを使ったCSSテクニック

お薦めの参考書

CSS、webデザイン学習書籍、参考書をアマゾンで購入する

Copyright (C) acky. All Rights Reserved.