8章 WEBページのレイアウト | 1日集中HTML・CSS講座（東京・オンライン）

8.2 1カラムのレイアウト（STEP1）

[作成] layout1.html、guide.css
[フォルダ] webpage/ch08

➢ layout1.html

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

8.3 2カラムのレイアウト（STEP2）

[作成] layout2.html
[フォルダ] webpage/ch08

横に並べたいBOX2とBOX3をグループ化（STEP2-1）

<!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>BOXを横に並べる（2カラムのレイアウト）</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>
		<div class="container">
			<h2>STEP2. 横に並べたい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>

BOX2とBOX3を横に並べる（STEP2-2）

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

		･･･略･･･
		<div class="container">
			<h2>STEP3. 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>
	</body>
</html>

BOX4が後ろに入り込まないようにする（STEP2-3）

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

		･･･略･･･
		<div class="container">
			<h2>STEP4. 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>
	</body>
</html>

BOX2とBOX3の横幅を指定する（STEP2-4）

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

		･･･略･･･
		<div class="container">
			<h2>STEP5. 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>
	</body>
</html>

8.4 3カラムのレイアウト（STEP3）

[作成] layout3.html
[フォルダ] webpage/ch08

BOXを用意する（STEP3-1）

<!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>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 class="box box-purple">BOX5</div>
		</div>
	</body>
</html>

横に並べたいBOX2とBOX3とBOX4をグループ化（STEP3-2）

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

		･･･略･･･
		<div class="container">
			<h2>STEP2. 横に並べたい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>
	</body>
</html>

BOX2とBOX3とBOX4を横に並べる（STEP3-3）

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

		･･･略･･･
		<div class="container">
			<h2>STEP3. 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>
	</body>
</html>

BOX5が後ろに入り込まないようにする（STEP3-4）

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

		･･･略･･･
		<div class="container">
			<h2>STEP4. 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>
	</body>
</html>

BOX2とBOX3とBOX5の横幅を指定する（STEP3-5）

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

		･･･略･･･
		<div class="container">
			<h2>STEP5. 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>
	</body>
</html>