更新日: 2017年03月30日
公開日: 2015年12月05日

floatの基本を解説！① ゼロから始めるHTML/CSS講座Vol18

ゼロから始めるHTML/CSS講座floatを使ったレイアウト①
float
large_block {
large_block {
large_block {
large_block {
large_block {
large_block {
large_block {

ゼロから始めるHTML/CSS講座floatを使ったレイアウト①

float

通常ブロックボックスの要素は前後に改行が挿入されるため、ブロックボックスの横幅に関係なく、縦並びで表示されます。

配置方法を指定する方法の1つとしてCSSのfloatプロパティがあり、これを利用することで縦並び以外に配置することが可能です。

まずは以下のHTMLとCSSを作成してください。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>float</title>
    <link rel="stylesheet" href="float.css">
</head>
<body>
    <div id="large_block">
        <div class="blockA">ブロックA</div>
        <div class="blockB">ブロックB</div>
    </div>
</body>
</html>


#large_block {
    width: 500px;
    height: 200px;
    border: solid 2px;
}

.blockA {
    width: 200px;
    height: 50px;
    background-color: #ff0000;
}

.blockB {
    width: 200px;
    height: 50px;
    background-color: #00ff00;
}

floatプロパティを指定すると、指定された要素を左または右に寄せて配置することができます。

floatプロパティ
値	内容説明
left	指定した要素を左に寄せる。後に続く内容はその右側に回り込む。
right	指定した要素を右に寄せる。後に続く内容はその左側に回り込む。
none	配置の指定なし。初期値。

実際にブロックAとブロックBにfloatプロパティを適用してみましょう。


#large_block {
    width: 500px;
    height: 200px;
    border: solid 2px;
}

.blockA {
    width: 200px;
    height: 50px;
    background-color: #ff0000;
    float: left;
}

.blockB {
    width: 200px;
    height: 50px;
    background-color: #00ff00;
    float: left;
}

ブロックAとブロックBが左寄せで横並びに表示されます。

次にブロックBを右寄せに変更してみると、


#large_block {
    width: 500px;
    height: 200px;
    border: solid 2px;
}

.blockA {
    width: 200px;
    height: 50px;
    background-color: #ff0000;
    float: left;
}

.blockB {
    width: 200px;
    height: 50px;
    background-color: #00ff00;
    float: right;
}

ブロックAは左寄せ、ブロックBは右寄せで表示されます。

次にブロックAも右寄せに変更してみると、


#large_block {
    width: 500px;
    height: 200px;
    border: solid 2px;
}

.blockA {
    width: 200px;
    height: 50px;
    background-color: #ff0000;
    float: right;
}

.blockB {
    width: 200px;
    height: 50px;
    background-color: #00ff00;
    float: right;
}

ブロックAとブロックBが右寄せで表示され、表示順がB→Aになります。

float:rightは「指定した要素を右に寄せる。後に続く内容はその左側に回り込む」と説明しました。具体的にはブロックAがまず右寄せされ、ブロックBがその左側に回り込むため、このような表示となります。

このようにfloatプロパティによる配置指定を行うと、HTMLの文章構造を保ったままレイアウトを指定できます。

次にfloatのより詳細な仕様について説明します。

実はfloatプロパティは要素を左右に寄せているだけではなく、「float」の名の通り要素を浮かせています。

「浮いている」ことの確認と、これによりどのような影響があるのか次より説明していきます。

ブロックBの横幅を100%に変更し、ブロックAのみfloat:leftを指定し、ブロックBはfloatプロパティを指定なしにしてみましょう。


#large_block {
    width: 500px;
    height: 200px;
    border: solid 2px;
}

.blockA {
    width: 200px;
    height: 50px;
    background-color: #ff0000;
    float: left;
}

.blockB {
    width: 100%;
    height: 50px;
    background-color: #00ff00;
    /* float: left; */
}

この疑問を解決するために、ブロックAの背景色を透明(指定なし)にしてみましょう。


#large_block {
    width: 500px;
    height: 200px;
    border: solid 2px;
}

.blockA {
    width: 200px;
    height: 50px;
    /* background-color: #ff0000; */
    float: left;
}

.blockB {
    width: 100%;
    height: 50px;
    background-color: #00ff00;
    /* float: left; */
}

これが浮いているという証拠で、下記のようにブロックAは宙に浮いており、この下にブロックBが潜り込んでいます。潜り込んだブロックBの文字は、ブロックAとかぶっていないスペースに移動されます。

clearプロパティを指定すると、floatが指定されているボックスの下へと配置されるようになります。ブロックAの背景色を赤に戻し、ブロックBにclearプロパティを指定してみましょう。


#large_block {
    width: 500px;
    height: 200px;
    border: solid 2px;
}

.blockA {
    width: 200px;
    height: 50px;
    background-color: #ff0000;
    float: left;
}

.blockB {
    width: 100%;
    height: 50px;
    background-color: #00ff00;
    /* float: left; */
    clear: left;
}

clearプロパティに指定できる値は以下となります。

clearプロパティ
値	内容説明
left	float:leftを指定してあるボックスの下へ配置する。
right	float:rightを指定してあるボックスの下へ配置する。
both	floatを指定してある全てのボックスの下へ配置する。