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>