好きなことはエンタメ全般と料理です。_)mそれでは早速ですが、今回はcssの「float(フロート)」についてお話ししたいと思います。まとめそもそもfloat(フロート)って?floatとは、要素を右や左に寄せたり横並びにしたい時などに使います。指定した要素に他の要素を回り込ませるプロパティというわけなのです。読んで字のごとくです。float:right【右に寄せる】こちらもそのままの意味ですね。float:none【floatをやめる】これもそのままの意味で、要素を指定しない、要するに初期値ということです。float:inherit【継承させる】これは親要素のfloatの値を継承するという意味です。はい、この4つがプロパティになります。)float(フロート)の使い方!ざっとした説明はここまでにして、実際にやってみようと思います。{width:450px;margin:10px;background:#00ffff;text-align:center;color:#333;font-size:50px;}HTMLとCSSをこんな感じで書いてみると、こんな風になると思います。今回は解説なので、わかりやすいように背景に色をつけてます。これを、「2番」の要素を「1番」の右に持っていきたいんだ!みたいな時にありますよね?はい、そんな時にこの「float」の出番です。CSSの動かしたい要素に「float:left;」と追加してあげるだけです。すると、こうなると思います。おや?と思った方いらっしゃいますね?そうなんですよ。「背景どこいった?」ってなりますよね。ボックスの上部分のmarginにしか出てないんです。親要素が消える原因は?「float」とは浮かせるという意味です。わかりにくいですが、このようなイメージになるわけです。するとどうなるかというと「背景」の親要素よりも、「1番」「2番」の要素が高くなるのがわかると思います。その結果が「背景」の親要素が高さを認識できず、「ここには何もない」と勘違いしてしまい背景が表示されないという訳です。最近主流になってきているのは「overflow:hidden」という機能を使う方法です。やり方はとても簡単で、floatをしている要素の親要素(今回の場合「all_box」)に「overflow:hidden;」を追加してあげるだけです。背景が出てきたと思います。・HTMLを書き終わった後にも追加できる「overflow:hidden」のデメリット・あえてはみ出させたい要素がある場合、その要素が消えてしまう・指定した範囲にスクロールバーがあると消えてしまうとても便利で簡単な「overflow:hidden」ですが、デメリットにもあるように、あえてはみ出させたい要素がある場合には使えないことです。そんな時には、「clearfix」を使用しましょう。こちらもやり方はとても簡単で、cssに「clearfix」というクラスを作ります。{content:"";clear:both;display:block;}作ったクラスを親要素(今回でいうのであれば、「all_box」)に追加してあげるだけです。・after領域を使用してしまうその他にもいっそ親要素も浮かせてしまえ!という親要素も「float」をしてしまうやり方もあります。「float」のデメリット・しっかりと調整しないとレイアウトが崩れる可能性があるまとめいかがでしたか?「float」について説明しましたが、使いこなせるようになると便利な機能です。ドラマ【あなたの番です】この記事を書いた人ryoエンタメ全般と料理とネコが好きです。コメントをキャンセルメールアドレスが公開されることはありません。【CSS】float完全理解!使い方と簡単な問題解決方法をご説明!私たちと一緒に働きませんか?私たちは中央区にある、Web制作会社です。私たちと一緒に働いてくれる、WEBディレクター、HTMLコーダー、WEBデザイナーを募集致します。03-6661-9954いちおしニュースは『xserver』にて運営をしています。いちおしニュースは『xserver』にて運営をしています。ichioshi.newsホームシェアメニューTOPへ。