色や、伝える内容によらず、センターにブロック毎寄せられているものは、それだけで、なんとか脱初心者の香りを漂わせる。
div要素を使用して配置する場合
html記述
---------------------------------------------------------------
<div class="container">
<div class="screen">
<div class="header"> header </div>
<div class="main"> main </div>
<div class="footer> footer </div>
</div>
</div>
---------------------------------------------------------------
css記述
---------------------------------------------------------------
div.container {
width: 100%;
margin: 0px;
padding: 0px;
}
div.screen {
width: 800px;<!-- 任意の値 -->
margin: 0px auto;
padding: 0px;
}
div.header {
width: 100%;
height: 100px; <!-- 任意の値 -->
}
div.main {
width: 100%;
}
div.footer {
width: 100%;
height: 50px;
}
---------------------------------------------------------------
<div class="container">
<div class="screen">
<div class="header"> header </div>
<div class="main"> main </div>
<div class="footer> footer </div>
</div>
</div>
---------------------------------------------------------------
css記述
---------------------------------------------------------------
div.container {
width: 100%;
margin: 0px;
padding: 0px;
}
div.screen {
width: 800px;<!-- 任意の値 -->
margin: 0px auto;
padding: 0px;
}
div.header {
width: 100%;
height: 100px; <!-- 任意の値 -->
}
div.main {
width: 100%;
}
div.footer {
width: 100%;
height: 50px;
}
とても多用する手法なので、一応記述。
