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



floatの基本を解説!① ゼロから始めるHTML/CSS講座Vol18
目次
  1. ゼロから始めるHTML/CSS講座floatを使ったレイアウト①
  2. float
  3. large_block {
  4. large_block {
  5. large_block {
  6. large_block {
  7. large_block {
  8. large_block {
  9. 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;
}

float1

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;
}

float1-2

ブロック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;
}

float1-3

ブロック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;
}

float1-4

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

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

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

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

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

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

ブロック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; */
}

float1-6

この疑問を解決するために、ブロック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; */
}

float1-7

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

float1-8-639

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;
}

float1-9

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

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

今回のサンプルではleftを利用しましたが、floatプロパティでleftとrightの片方しか利用していない場合でもclear:bothを利用して構いません。このため特に理由がなければclearプロパティの値はbothを指定しましょう。

floatプロパティの「浮く」という性質上、floatプロパティとclearプロパティはセットで利用するものだと覚えてください。

float & clear → ボックス配置指定

PREV LESSON ☛ Webページの構成

NEXT LESSON ☛ floatを使ったレイアウト②

関連記事

CodeCampus編集部
この記事を書いた人
CodeCampus編集部
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp