- 〜 ヘッダー枠を作る 〜
-
- 次に、前の項目で作ったoutline（外枠）内にヘッダーとなる枠を作ります。
- 外側のDIVタグの幅を750pxにしているので、ヘッダーの枠の幅を指定しない場合、750pxで表示されます。
- タイトルのテキストを左寄せしたいので、text-alignだけ指定しておきます。
-
- [CSSファイル]
#outline{
width: 750px;
border: solid 1px #ff0000;
}
.header{
text-align: left;
}
- [HTMLファイル]
<html>
<body>
<!-- 外枠 -->
<div id="outline">
<!-- ヘッダー枠 -->
<div class="header">
</div>
</div>
</body>
</html>
-
- 〜 フッターー枠を作る 〜
-
- そして、ヘッダー枠の下にフッター枠を作ります。
- コピーライト表記等を入れるため、センター寄せにして、フォントは小さめで薄い色にします。
-
- [CSSファイル]
#outline{
width: 750px;
border: solid 1px #ff0000;
}
.header{
text-align: left;
}
.footer{
text-align: center;
font-size: 50%;
color: lightgray;
}
- [HTMLファイル]
<html>
<body>
<!-- 外枠 -->
<div id="outline">
<!-- ヘッダー枠 -->
<div class="header">
</div>
<!-- フッター枠 -->
<div class="footer">
</div>
</div>
</body>
</html>
-
-
-
|
