1カラムのレイアウト(STEP1)

[作成] layout1.html、guide.css

[フォルダ] webpage/ch08

        <!DOCTYPE html>
        <html lang="ja">
        <head>
            <meta charset="UTF-8">
            <title>1カラムのレイアウト</title>
            <link rel="stylesheet" href="guide.css">
        </head>
        <body>
            <h1>1カラムのレイアウト</h1>
            <div class="container">
                <h2>STEP1. BOXを用意する</h2>
                <div class="box box-yellow">BOX1</div>
                <div class="box box-orange">BOX2</div>
                <div class="box box-blue">BOX3</div>
                <div class="box box-green">BOX4</div>
            </div>
        </body>
        </html>
        

guide.css

        @charset "UTF-8";

        .box {
            border: solid 8px #faa;
            background-color: #fee;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            text-align: center;
            line-height: 130px;
            font-weight: bold;
            font-size: 40px;
        }
            .box-pink {
            border-color: #faa;
            color: #faa;
            background-color: #ffe;
        }
        .box-yellow {
            border-color: #fad232;
            color: #fad232;
            background-color: #ffffee;
        }
        .box-orange {
            border-color: #f37b1d;
            color: #f37b1d;
            background-color: #ffd8b3;
        }
        .box-blue {
            border-color: #00a0e9;
            color: #00a0e9;
            background-color: #a0e0fe;
        }
        .box-green {
            border-color: #5eb95e;
            color: #5eb95e;
            background-color: #a1f089;
        }
        .box-purple {
            border-color: #8058a5;
            color: #8058a5;
            background-color: #cdbcdc;
        }
        h1 {
            margin-bottom: 40px;
            padding: 20px 10px;
            border: solid 8px #63a4c2;
            text-align: center;
        }
        h2 {
            padding-bottom: 5px;
            border-bottom: solid 4px #63a4c2;
        }
        .container {
            margin-bottom: 100px;
        }
        

2カラムのレイアウト(STEP2-1) / 横に並べたいBOX2とBOX3をグループ化

[作成] layout2.html

[フォルダ] webpage/ch08

        <!DOCTYPE html>
        <html lang="ja">
        <head>
            <meta charset="UTF-8">
            <title>2カラムのレイアウト</title>
            <link rel="stylesheet" href="guide.css">
            <style>
            .float-left {
                float: left;
            }
            .clearfix:after {
                content: "";
                display: block;
                clear: both;
            }
            .w50 {
                width: 50%;
            }
            </style>
        </head>
        <body>
            <h1>2カラムのレイアウト</h1>
            <div class="container">
                <h2>STEP2-1. 横に並べたいBOX2とBOX3をグループにする</h2>
                <div class="box box-yellow">BOX1</div>
                <div class="box box-pink">
                    <div class="box box-orange">BOX2</div>
                    <div class="box box-blue">BOX3</div>
                </div>
                <div class="box box-green">BOX4</div>
            </div>
        </body>
        </html>
        

2カラムのレイアウト(STEP2-2) / BOX2とBOX3を横に並べる

</body>の直前に下記のコードを追加します

        <div class="container">
            <h2>STEP2-2. BOX2とBOX3を横に並べる</h2>
            <div class="box box-yellow">BOX1</div>
            <div class="box box-pink">
                <div class="box box-orange float-left">BOX2</div>
                <div class="box box-blue float-left">BOX3</div>
            </div>
            <div class="box box-green">BOX4</div>
            <p>BOX4が後ろに入り込んでしまう・・・</p>
        </div>
        

2カラムのレイアウト(STEP2-3) / BOX4が後ろに入り込まないようにする

</body>の直前に下記のコードを追加します

        <div class="container">
            <h2>STEP2-3. BOX4が後ろに入り込まないようにする</h2>
            <div class="box box-yellow">BOX1</div>
            <div class="box box-pink clearfix">
                <div class="box box-orange float-left">BOX2</div>
                <div class="box box-blue float-left">BOX3</div>
            </div>
            <div class="box box-green">BOX4</div>
        </div>
        

2カラムのレイアウト(STEP2-4) / BOX2とBOX3の横幅を指定する

</body>の直前に下記のコードを追加します

        <div class="container">
            <h2>STEP2-4. BOX2とBOX3の横幅を指定する</h2>
            <div class="box box-yellow">BOX1</div>
            <div class="box box-pink clearfix">
                <div class="box box-orange float-left w50">BOX2</div>
                <div class="box box-blue float-left w50">BOX3</div>
            </div>
            <div class="box box-green">BOX4</div>
        </div>
        

3カラムのレイアウト(STEP3-1) / BOXを用意する

[作成] layout3.html

[フォルダ] webpage/ch08

        <!DOCTYPE html>
        <html lang="ja">
        <head>
            <meta charset="UTF-8">
            <title>3カラムのレイアウト</title>
            <link rel="stylesheet" href="guide.css">
            <style>
            .float-left {
                float: left;
            }
            .clearfix:after {
                content: "";
                display: block;
                clear: both;
            }
            .w33 {
                width: 33.3333%;
            }
            </style>
        </head>
        <body>
            <h1>BOXを横に並べる(3カラムのレイアウト)</h1>
            <div class="container">
                <h2>STEP3-1. BOXを用意する</h2>
                <div class="box box-yellow">BOX1</div>
                <div class="box box-orange">BOX2</div>
                <div class="box box-blue">BOX3</div>
                <div class="box box-green">BOX4</div>
                <div class="box box-purple">BOX5</div>
            </div>
        </body>
        </html>
        

3カラムのレイアウト(STEP3-2) / 横に並べたいBOX2とBOX3とBOX4をグループ化

</body>の直前に下記のコードを追加します

        <div class="container">
            <h2>STEP3-2. 横に並べたいBOX2とBOX3とBOX4をグループにする</h2>
            <div class="box box-yellow">BOX1</div>
            <div class="box box-pink">
                <div class="box box-orange">BOX2</div>
                <div class="box box-blue">BOX3</div>
                <div class="box box-green">BOX4</div>
            </div>
            <div class="box box-purple">BOX5</div>
        </div>
        

3カラムのレイアウト(STEP3-3) / BOX2とBOX3とBOX4を横に並べる

</body>の直前に下記のコードを追加します

        <div class="container">
            <h2>STEP3-3. BOX2とBOX3とBOX4を横に並べる</h2>
            <div class="box box-yellow">BOX1</div>
            <div class="box box-pink">
                <div class="box box-orange float-left">BOX2</div>
                <div class="box box-blue float-left">BOX3</div>
                <div class="box box-green float-left">BOX4</div>
            </div>
            <div class="box box-purple">BOX5</div>
            <p>BOX5が後ろに入り込んでしまう・・・</p>
        </div>
        

3カラムのレイアウト(STEP3-4) / BOX5が後ろに入り込まないようにする

</body>の直前に下記のコードを追加します

        <div class="container">
            <h2>STEP3-4. BOX5が後ろに入り込まないようにする</h2>
            <div class="box box-yellow">BOX1</div>
            <div class="box box-pink clearfix">
                <div class="box box-orange float-left">BOX2</div>
                <div class="box box-blue float-left">BOX3</div>
                <div class="box box-green float-left">BOX4</div>
            </div>
            <div class="box box-purple">BOX5</div>
        </div>
        

3カラムのレイアウト(STEP3-5) / BOX2とBOX3とBOX5の横幅を指定する

</body>の直前に下記のコードを追加します

        <div class="container">
            <h2>STEP3-5. BOX2とBOX3とBOX4の横幅を指定する</h2>
            <div class="box box-yellow">BOX1</div>
            <div class="box box-pink clearfix">
                <div class="box box-orange float-left w33">BOX2</div>
                <div class="box box-blue float-left w33">BOX3</div>
                <div class="box box-green float-left w33">BOX4</div>
            </div>
            <div class="box box-purple">BOX5</div>
        </div>