１カラムのレイアウト（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>
