更新日: 2017年2月27日
公開日: 2015年12月5日

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

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

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

floatを使ったレイアウト①の続き

floatで横並びにした子要素の横幅の合計値が親要素の横幅を超えた場合について説明します。

横幅200pxのブロックCを追加し、ブロックBの横幅を100%から200pxに戻した上で、A・B・Cのブロックを左寄せにします。


<!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 class="blockC">ブロックC</div>
    </div>
</body>
</html>


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

.blockC {
    width: 200px;
    height: 50px;
    background-color: #0000ff;
    float: left;
}

サンプルでは親要素(#large_block)の横幅が500px、A・B・Cのブロックがそれぞれ横幅200pxのため、A・B・Cの3つを並べると横幅合計が600pxとなり、親要素の横幅を超えてしまいます。このように回り込む領域に空きがない場合、回り込みは行わず、自動で折り返すような形となります。

また折り返した要素の配置位置は縦幅も関連していきます。ブロックAの縦幅を変更してみましょう。


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

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

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

.blockC {
    width: 200px;
    height: 50px;
    background-color: #0000ff;
    float: left;
}

ブロックAの下にブロックCを表示する場合、clearプロパティを指定します。


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

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

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

.blockC {
    width: 200px;
    height: 50px;
    background-color: #0000ff;
    /* float: left; */
    clear: both;
}

claerプロパティによりfloatが指定されているブロックAとブロックBの下へとブロックCが配置されます。

floatプロパティとclearプロパティには今回紹介した以外にも注意すべき細かい仕様が多々あります。全部を紹介することは難しいため、実践の中で覚えていきましょう。

課題

次のページに示す画像と同じ配置になるよう、こちらが用意したCSSに追記してください。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>float</title>
    <link rel="stylesheet" href="challenge_float.css">
</head>
<body>
    <div id="large_block">
        <div class="blockA">ブロックA</div>
        <div class="blockB">ブロックB</div>
        <div class="blockC">ブロックC</div>
        <div class="blockD">ブロックD</div>
        <div class="blockE">ブロックE</div>
        <div class="blockF">ブロックF</div>
        <div class="blockG">ブロックG</div>
    </div>
</body>
</html>


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

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

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

.blockC {
    width: 100px;
    height: 100px;
    background-color: #0000ff;
}

.blockD {
    width: 250px;
    height: 50px;
    background-color: #ffff00;
}

.blockE {
    width: 250px;
    height: 50px;
    background-color: #ff00ff;
}

.blockF {
    width: 100px;
    height: 50px;
    background-color: #ffffff;
}

.blockG {
    width: 400px;
    height: 50px;
    background-color: #00ffff;
}