サイト構造テンプレート

ローカルナビ無し、ローカルメニュー左、ローカルメニュー右、ローカルメニュー両方

ローカルナビ無し

ヘッダー

メインコンテンツ

フッター

html

<div id="contents">
<div id="header">ヘッダー</div>
<div id="mainContent">メインコンテンツ</div>
<div id="footer">フッター</div>
</div>

css

#contents
{
width: 500px;
height: 400px;
border: 1px #000 solid;
}
#contents #header
{
width: 500px;
height: 50px;
background-color: #BAD3FB;
}
#contents #mainContent
{
width: 500px;
height: 300px;
background-color: #F5E599;
}
#contents #footer
{
width: 500px;
height: 50px;
background-color: #B1B1B1;
}

ローカルナビ左

ヘッダー

左ローカルメニュー

メインコンテンツ

フッター

html

<div class="contents">
<div class="header">ヘッダー</div>
<div class="mainBox clearfix">
<div class="aside">左ローカルメニュー</div>
<div class="content">メインコンテンツ</div>
</div>
<div class="footer">フッター</div>
</div>

css

.contents
{
width: 500px;
height: 400px;
border: 1px #000 solid;
}
.contents .header
{
width: 500px;
height: 50px;
background-color: #BAD3FB;
}
.contents .mainBox .aside
{
float:left;
width: 100px;
height: 300px;
background-color: #9CD372;
}
.contents .mainBox .content
{
float:left;
width: 400px;
height: 300px;
background-color: #F5E599;
}
.contents .footer
{
width: 500px;
height: 50px;
background-color: #B1B1B1;
}

ローカルナビ右

ヘッダー

メインコンテンツ

右ローカルメニュー

フッター

html

<div class="contents">
<div class="header">ヘッダー</div>
<div class="mainBox clearfix">
<div class="content">メインコンテンツ</div>
<div class="aside">右ローカルメニュー</div>
</div>
<div class="footer">フッター</div>
</div>

css

.contents
{
width: 500px;
height: 400px;
border: 1px #000 solid;
}
.contents .header
{
width: 500px;
height: 50px;
background-color: #BAD3FB;
}
.contents .mainBox .aside
{
float:left;
width: 100px;
height: 300px;
background-color: #9CD372;
}
.contents .mainBox .content
{
float:left;
width: 400px;
height: 300px;
background-color: #F5E599;
}
.contents .footer
{
width: 500px;
height: 50px;
background-color: #B1B1B1;
}

ローカルナビ両方

ヘッダー

左ローカルメニュー

メインコンテンツ

右ローカルメニュー

フッター

html

<div class="contents">
<div class="header">ヘッダー</div>
<div class="mainBox clearfix">
<div class="asideLeft">左ローカルメニュー</div>
<div class="content">メインコンテンツ</div>
<div class="asideRight">右ローカルメニュー</div>
</div>
<div class="footer">フッター</div>
</div>

css

.contents
{
width: 500px;
height: 400px;
border: 1px #000 solid;
}
.contents .header
{
width: 500px;
height: 50px;
background-color: #BAD3FB;
}
.contents .mainBox .asideLeft
{
float:left;
width: 100px;
height: 300px;
background-color: #9CD372;
}
.contents .mainBox .content
{
float:left;
width: 300px;
height: 300px;
background-color: #F5E599;
}
.contents .mainBox .asideRight
{
float:left;
width: 100px;
height: 300px;
background-color: #9CD372;
}
#rightLocalNav .contents .footer
{
width: 500px;
height: 50px;
background-color: #B1B1B1;
}