CSSのfloatプロパティで要素を横並びにする方法

CSSのfloatプロパティで要素を横並びにする方法

今回は、CSSのfloatを使った要素を横並びにする方法とfloatを解除するclearプロパティをご紹介します。
 

横並びにする方法としてはほかにもdisplay:inline-block;やdisplay:table-cell;などもありますが、floatは昔からある使い方の一つで覚えておきたい内容です。
 
 

もくじ

以下は本記事のもくじです。
 

  1. 1. floatを利用して要素を横並びにする方法
    1. 1-1. floatを使った横並び
    2. 1-2. floatの解除とセットで使うclearプロパティ
    3. 1-3. 余白を作りたい場合の注意点
  2. 2. まとめ


 
それでは説明していきます。
 

1. floatを利用して要素を横並びにする方法

 

1-1. floatを使った横並び

<div>タグなどのブロックレベル要素は、基本的に上から下に向かって順番に縦に並んで表示されます。
 

■縦に並ぶdivタグ(水色とピンク色) 

div1、div2、div3が縦に並んでいる

div1、div2、div3が縦に並んでいる

 
 

■上記のソースコード

 
 

このように、通常縦に並ぶdivタグなどの要素を横並びにしたい場合、横並びにしたい対象の要素に対して、float:left(またはright)にすると要素が横並びになります。
 

■floatを利用して横並びにしたdivタグ

float:leftを利用してdiv1、div2、div3が左から順に横並びにする

float:leftを利用してdiv1、div2、div3が左から順に横並びにした

 

■上記のソースコード

 

floatのプロパティは下記の通りで、左に配置、右に配置、floatしない(初期値)があります。

設定値 意味
float:left 要素を左に配置
float:right 要素を右に配置
float:none floatしない(初期値)

 

たとえば、先ほどの例で、サンプル3のdivにfloat:right;と設定するとピンク色divが右端に位置するようになります。

サンプル3のdivをfloat:rightで右側に並べる

サンプル3のdivをfloat:rightで右側に並べる

 

■ソースコード

 

なお、横並びにしたい要素の横幅サイズの合計が親要の横幅素(下記の例だとbody(ブラウザの横幅サイズ))を超えている場合は、横並びにならずその下にずれて位置します。floatとともにwidthの設定も意識しておくと良いと思います。
 

float:leftで横並びにしても横幅が狭くて入り込めない場合は下にずれる

float:leftで横並びにしても横幅が狭くて入り込めない場合は下にずれる

 
 

1-2. floatの解除とセットで使うclearプロパティ

つぎに、先ほどの例で3つのブロックのうち、サンプル3だけ下に置きたい場合を考えてみます。
 

サンプル3のdivは下に配置したい

サンプル3のdivは下に配置したい

 

サンプル3のdivに設定しているfloat:leftを書かなければ良いと思いますが、そうすると下記のようになってしまします。

サンプル3のdivが正しく配置されない

サンプル3のdivが正しく配置されない

 

■上記のソースコード

 

実はfloatは単純に横並びにするプロパティではなく、英語で「浮く」という意味のとおり、層を一段「浮かして」横並びに設定しています。

サンプル1とサンプル2はfloat:leftで上に浮いている。空いた空間にサンプル3が回り込んだ

サンプル1とサンプル2はfloat:leftで上に浮いている。空いた空間にサンプル3が回り込んだ

(なお、文字などの中身(ここでは「サンプル3」という文言)については、floatしたブロックとの重なりを避けるように下に寄せられます。)
 

このように、通常通り配置したい要素も影響を受けてしまわないようにするには、通常通り配置したい要素を「clear:both」で回り込みの解除の設定をすることで対応できます。

サンプル3に対してclear:bothで回り込みを解除する

サンプル3に対してclear:bothで回り込みを解除する

 

■上記のソースコード

 

clearプロパティと設定値は下記の通りです。

float:leftだけ、float:rightだけ解除といったこともできますが、回り込みを解除したい場合はとりあえずclear:both;にしておくとあまり意識することなく回り込みを解除できます。
 

設定値 意味
clear:both; 回り込み(float:leftおよびright)を解除する
clear:left; float:leftだけを解除する
clear:right; float:rightだけを解除する
clear:none; 回り込みを解除しない(初期値)

 
 

1-3. 余白を作りたい場合の注意点

ここでサンプル3の上部にmarginで余白を作りたい場合を考えます。

サンプル3に対してclear:bothで回り込みを解除する
 

ためしにサンプル3に下記のようにmargin-top:20pxで余白をつけてみます。
 

 

しかし、表示上はmargin-topの設定が思ったように効いてくれません。

サンプル3にmargin-top:20pxを設定しても効かない

サンプル3にmargin-top:20pxを設定しても効かない

 

これは、サンプル1とサンプル2をfloatで浮かしているため、marginでの余白が測れないためです。

サンプル3にmargin-top:20pxを設定しても、直前の要素のサンプル1,2が浮いているため思うように余白を取れない

サンプル3にmargin-top:20pxを設定しても、直前の要素のサンプル1,2が浮いているため思うように余白を取れない

 

余白を取りたい場合は、たとえばclear:bothを設定した空のdivタグをサンプル3の直前に配置することで、余白を取ることができるようになります。

サンプル3の直前にclear:bothを設定した空のdivを配置すると余白が正しく取れる

サンプル3の直前にclear:bothを設定した空のdivを配置すると余白が正しく取れる

 

サンプル3の上部に余白がとれた

サンプル3の上部に余白がとれた

 

■上記のソースコード

 

空のdivを使うのは違和感あるよという人もいて、擬似要素を使ったり色々工夫をして回り込み解除をすることもできます。ご興味ある方は「float clearfix」などで検索してみてください。
 
 

2-4. floatを使ってメインエリアとサイドバーを作る

このfloatとclearを利用して、下記のようにヘッダー・メインエリア・サイドバー・フッターといったようにレイアウトを分けることもできます。
 

floatを使ってメインメニューとサイドバーを作る

floatを使ってメインメニューとサイドバーを作る”

 

■ソースコード

 
 

まとめ

今回は、下記の通りCSSのfloatを使った要素を横並びにする方法とfloatを解除するclearプロパティをご紹介しました。
 

  1. 1. floatを利用して要素を横並びにする方法
    1. 1-1. floatを使った横並び
    2. 1-2. floatの解除とセットで使うclearプロパティ
    3. 1-3. 余白を作りたい場合の注意点
  2. 2. まとめ


 

横並びにする方法としては、ほかにもdisplay:inline-block;やdisplay:table-cell;などの方法も使われたりしますが、floatは昔からある使い方の一つで、色々なところで使われていますので覚えておいて損はないかと思います。
 

今回は、以上になります。
 

最後までご覧いただきありがとうございました。
 

「自分で作る選択を!」個人事業主のための大阪のホームページ作成とWeb集客の教室・スクール 「Webst8」

大阪堀江の個人事業主向けWebスクール Webst8 バナー

『自分でホームページを作成してWeb集客・売上拡大したい』個人事業主のための月額2万円のWebスクールです。

『これから自分でホームページを作成したい』

『今のホームページを自分で更新できるようにしたい』

『ホームページでブランディング・集客・売上アップしたい』

といった方はぜひ当Webスクールにお問い合わせください。

Webst8の詳細はこちら

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ABOUTこの記事をかいた人

【IT業界でシステムエンジニア歴8年現役Web系フリーランス】

1985年生まれ 立命館大学卒業。 某複合機メーカーで約8年間システムエンジニアとして大阪で勤務後、2016年秋に独立。

「一人一人が創意工夫で思い描く未来を!」 という想いもとに『自分でホームページを作成してWeb集客・売上拡大したい』個人事業主のためのWeb教室・スクール「ウェブストエイト(Webst8)を運営開始。
ウェブやマーケティングなどの覚えたノウハウを自分や周りの目標実現のツールとして使うことにやりがいを感じています。

個人事業主のためのWeb教室・スクール「ウェブストエイト」 ホームページ