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



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

float2-1

サンプルでは親要素(#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;
}

float2-2

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

float2-3

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

float-css1

NEXTLESSONJavaScriptの基礎知識JavaScriptの基礎知識

PREVLESSONfloatを使ったレイアウト①floatを使ったレイアウト①

関連記事

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