お恥ずかしながら一通り勉強した後に、３カラムが出来ないままであることを忘れておりまして、これから次に書いてあるプログラムを書いて、動作確認をしてみます。汗 恥ずかしい。
base-3column.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>はじめてのホームページ</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
ここにはヘッダーが入ります
</div>
<div class="main">
<div class="main-contents">
メインコンテンツ
</div>
<div class="right-navi">
右側のカラム
</div>
</div>
<div class="left-navi">
左側のカラム
</div>
<div class="footer">
ここにはフッターメニューが入ります
</div>
</body>
</html>
3column.css
body{
background-color: lightyellow;
}
.header {
height: 150px;
background-color: yellow;
}
.footer{
height: 200px;
background: black;
color: #fff;
clear: both;
}
.main-contents, .left-navi, .right-navi {
height: 400px;
}
.main-contents {
background-color: red;
color: #fff;
float: left;
width: 80%;
}
.left-navi {
background-color: blue;
color: #fff;
width: 20%;
float: right;
}
.right-navi {
background-color: green;
color: #fff;
float: right;
width: 20%;
}
.main{
width: 80%;
float: right;
}
やっと出来た！
