スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

floatの本当の意味とは?

CSSの参考書を見ると、よく「floatは“回り込み”をさせるもの」と書いてあることがありますが、これはとんでもない間違いです。
floatは回り込みをさせるものではありません。 この間違った書き方のせいで、初心者の人が悩む光景をよく目にします。

では、floatとは一体何なのでしょうか?
floatというのは、そもそも「浮く」という意味です。 この単語は、別に英語に詳しくなくても知っていると思います。 ただ、参考書の書き方が悪いせいで、「回り込み」と勘違いされがちなのです。

さて、floatは浮くということですから、floatを掛けたものは他のタグから独立して、宙に浮いているという状態になります。 浮いている物体は、leftとかrightとかで、自由に位置を移動できます。
この際、floatしたタグの次にくるタグは、floatした部分の下に入り込んでしまいます。 floatで浮いているので、「そこには何もない」と判断して、入り込んでくるわけです。

たとえば、float:leftでメニューを作り、その右にコンテンツを出したい場合、メニューの幅分のmargin-leftをコンテンツに対してかけてやるといいのです。 下に入り込んでしまう分を、marginで余白にしてしまうわけです。
一般的な参考書では、コンテンツをfloat:rightせよと書かれていることが多いのですが、いつもfloatできるとは限りませんし、marginで余白を取るやり方の方がコーディング的に正しいやり方です。

ともかく、floatさせたものは宙に浮くのだということを覚えておけば、あまりfloatで悩むことはないんじゃないかなーと思います。
スポンサーサイト

テーマ : WEBデザイン
ジャンル : コンピュータ

コメントの投稿

非公開コメント

感想

へぇ~
なんとなくですが分りやすいです!

感想

ありがとうございます!

ケータイはこちら

QRコード

FC2カウンター

検索フォーム

最新記事
カテゴリー
リンク
RSSフィード
プロフィール

鎌田 翔己(SK)

Author:鎌田 翔己(SK)
岡山のウェブデザイナー/アーキテクト/コンポーザーです。
トップレベルのHTML/XHTMLコーディングや、PHP、Flashなどの業務に携わっています。

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。