カテゴリー

キーワード

 
> 【CSS】floatとclearfixで要...

【CSS】floatとclearfixで要素を横並びにする方法を紹介します(前半はfloatの説明)


2015 年 4 月 15 日 投稿    view: 85428
タグ:
このエントリーをはてなブックマークに追加

こんにちは、WEBマーケティング部の杉尾です。


今回は、指定した要素を右寄せもしくは左寄せにするプロパティ、『float』の使い方を紹介します。


float


floatプロパティとは


floatプロパティとは、それが指定された要素を左寄せ、もしくは右寄せに配置します。 


注意点

・ある要素にfloatを指定してどちらかに寄せると、後に続く内容が反対側に回り込みます。
・floatプロパティを指定したい要素に、positionプロパティのrelative、absolute、fixedのどれかを指定すると適用されません。


基本的な使い方

まずは参考ソースをご覧ください。


HTML

<p>
    <img src="css_side_by_side.png" class="box_left">
    回りこみテスト
</p>

CSS

.box_left {
    float:left;
    width:100px;
    height:100px;
}

float回り込みの画像


解説
htmlとbodyタグは省略し、必要な要素のみ書き出しています。


floatの値にはleftとrightがあります。
文字通り、左寄せと右寄せです。
ただ、ここで注意しておきたいのは、それらの次に来る内容が反対側に回りこむということです。


画像をご覧いただくと一目でわかると思います。
imgタグで指定された画像にfloat:left;を指定すると、その次にくる文章(回りこみテスト)が右側に回りこんでいます。


ところが、、、

ところが、実際にレイアウトをしようと思うと、必ずハマるのがこの罠です。


HTML

<div class="box_left01">
    左寄せ1
</div>
<div class="box_left02">
    左寄せ2
</div>
<div class="box">
    フロート指定なし
</div>

CSS

.box_left01,.box_left02, .box {
    border:1px solid;
}
.box_left01 {
    float:left;
    width:100px;
    height:100px;
    background-color:#00ff00;
}
.box_left02 {
    float:left;
    width:150px;
    height:150px;
    background-color:#ff0000;
}
.box {
    width:300px;
    height:300px;
    background-color:#0000ff;
}

floatでレイアウト1


解説

上二つの要素は横並びができたのに、その次の要素が前の二つに重なってしまっているという状況です。


これはどういうことかというと、floatプロパティの特徴にあります。
英語としてのfloatの日本語訳は『浮く』『浮動する』です。


floatプロパティはこの言葉通り、要素を浮かせて移動させるイメージの指定をします。


上図で言うと、左寄せ1(緑)、左寄せ2(赤)を浮かせて左に移動させています。
それらが浮いて空いたスペースに、フロート指定なし(青)が入っているということです。


理由がわかったところで、対処法を紹介します。


floatの解除

対処法は簡単です。
前項の参考ソースに、以下の記述を付け加えてください。


CSS

.box {
    clear:both;
}

clearプロパティは、floatプロパティによって左寄せ、右寄せを指定された要素の、次の要素に対する回り込みの指定を解除します。


clearの値は他に『clear:left;』『clear:right;』があります。
それぞれ『float:left;』『float:right;』を解除するものですが、『clear:both;』は両方を解除できるので、これを使用する方がいいでしょう。


『clear:both;』の指定で、フロート指定なしという文字が回り込まず、青い領域が下に出てきます。
その結果、下図のようになります。


floatでレイアウト2


しかし、ここで疑問を持たれた方がいると思います。
floatプロパティの冒頭で、『floatの後にくる内容はfloatで指定されたものの反対側に回り込みます』と説明しました。


なのに、なぜ最後のdivが重なるのかという疑問です。


実はこれ、floatの後にくる【内容】という部分がキモです。
後にくる【要素】ではないんですね。
実際、中身である『フロート指定なし』という文字だけは赤の右側に来ています。


次の図を見ていただくとよりわかりやすいと思います。


floatの概念図


div自体は上図のように緑と赤が浮いて空いたスペースに青が入ります。


でも、更に問題が…

前項のように指定した結果、思い通りのレイアウトになりましたが、またここで一つ問題が出てきます。


それはclearでfloatの解除を指定した要素に『margin-top』をつけても、隙間が生まれないという問題です。


試しに、先程までのソースにこのプロパティを付け加えてみてください。


CSS

.box {
    margin:30px 0 0 0;
}

.boxは青い領域です。
結果はこうです。


floatでレイアウト3


先ほどと変わりませんね。


これがなぜかというと、緑と赤は浮いているので、青からそこまでの距離が測れないんですね。
その結果、緑と赤よりも上に記述している要素との距離を30px分とるという指定になっています。


ですが、そこからの距離は30px以上離れている(緑ですら高さが100pxです)ので、
このmargin-topは適用はされても、緑、赤 ~ 青の間に隙間は空きません。


floatの指定をしたまま、この問題を解消するには3つの方法があります。


空div、clearfix、overflow


空div

以前よく使われていた方法は、間に空のdivを挟むという方法でした。
中に何もないdivを要素と要素の間に挟み、それにclear:both;を指定するというやり方ですね。


この方法は今でも見かけられますが、最近では使われなくなっています。


というのも、レイアウトを整えるためだけにHTMLの不要なタグを書くという行為が、
『ページの見栄えに関する記述はCSS外部ファイルにまとめるべきだ』というW3Cの推奨に添わないものだからです。


clearfix

『clearfix』は近年、floatを使う上で、外すことのできない指定の仕方です。
というより、これを紹介するために、ここまでfloatの説明をしてきたと言っても過言ではありません。


是非、覚えて使ってください。


では、まず参考ソースをご覧ください。


HTML

<div class="clearfix box_wrap">
    <div class="box_left">
        左寄せ1
    </div>
    <div class="box_left">
        左寄せ2
    </div>
</div>

CSS

.box_left {
    width:100px;
    height:100px;
    margin-left:10px;
    float:left;
    background-color:red;
}
.box_wrap {
    width:500px;
    height:500px;
    border:1px solid black;
}
.clearfix:after {
  display: block;
  clear: both;
  content: "";
}

clearfixでレイアウトする


解説
元々、もう少し長いコードだったのですが、改良されて、この『micro clearfix』という形になりました。


親要素に、:afterという擬似要素をつけてclear:both;を行い、回りこみを解除します。


同じ要素にbox_wrapとclearfixという別のクラスをつけているのは、clearfixのみに必要な指定を見やすくするためです。


擬似要素についてはコチラ
【CSS】CSSのセレクタとは? 覚えておきたいセレクタ21選


********************
clearfixのメリット
********************

1.記述が短い
2.親要素の高さが維持されるので、後に続く要素のレイアウトが崩れない。

2についての説明を少し。


floatは要素を浮かせて移動させるプロパティだという話をしました。


そのせいで親要素の中にある子要素にfloat指定をすると、子要素が浮き、親要素は高さが保てなくなります。
(※親要素に高さを指定していない場合)
結果として、前々項までで説明したようなレイアウト崩れが起きる状況もあります。


ところが、clearfixを指定すると、親要素の高さが消えないので、そのレイアウト崩れを防ぐことができます。


ちなみに、、、
clearfixは対応ブラウザの変化に伴って何度か変更されています。
もはや必要ないかもしれませんが、IE6、IE7に対応

する書き方もあります。
こちらです。


.clearfix:before, .clearfix:after {
    content:"";
    display:table
}
.clearfix:after { clear:both }
.clearfix { zoom:1 } /* For IE 6/7 */

overflow:hidden;

overflowプロパティでhiddenを指定すると、ブロックが形成されます。
そのおかげで、floatプロパティで指定された部分の高さを得られ、親要素の高さが算出されるということです。


CSS

.clearfix {
  overflow: hidden;
  zoom: 1;
}
.box_left {
  float: left;
}

デメリットとして、中の子要素が親要素からはみ出したとき、見えなくなるということがあります。
(子要素にbox-shadowをつけたときなど)



まとめ

floatはレイアウトに必須のプロパティです。


徐々にFlexboxへ移行していくかもしれませんが、現時点では要素の横並びをするのに最も使われています。


是非、覚えて使ってみてください。


最後までお読みいただき、ありがとうございました。

 

 

 

杉尾成行 顔写真

この記事を書いた人

杉尾成行

株式会社SceneLive Webマーケティング部長

ウェブマーケティングコンサルタントとして、クライアントのウェブ集客をサポートしている。
また、ウェブ制作、システム制作にも携わり、数々のサイトを手掛けている。
当ホームページ、ブログシステムも制作。

前職:ライター、小説家

ウェブマーケティングコンサルタントとしてのブログ
ウェブ参謀

個人ブログ(オリジナル小説他) ⇒ 35deFA

 


カテゴリー

タグ
この記事が気に入りましたら、是非、他の方にもシェアしてください。
このエントリーをはてなブックマークに追加
関連記事