- 〜 回り込みを解除する 〜
-
- ここまでで、２カラムレイアウトの枠組みがほぼ完成しましたが、
- 最後に回り込みを解除を指定する必要があります。
- メニューとコンテンツのブロック要素の回り込みと、それを囲っているmarginブロック
- の回り込みを解除する必要があります。
- この回り込みを解除しないと、レイアウトが崩れてしまいます。
-
-
- [CSSファイル]
#outline{
width: 750px;
border: solid 1px #696969;
}
.header{
text-align: left;
}
.footer{
text-align: center;
font-size: 50%;
color: lightgray;
}
.margin{
height: 400px;
margin:5px 5px;
}
.menu{
width: 185px;
float: left;
}
.contents{
width: 550px;
float: right;
}
.clear{
clear: both;
}
- [HTMLファイル]
<html>
<body>
<!-- 外枠 -->
<div id="outline">
<!-- ヘッダー枠 -->
<div class="header">
<h1>タイトル</h1>
</div>
<div class="margin">
<!-- コンテンツ枠 -->
<div class="contents">
コンテンツ
</div>
<!-- メニュー枠 -->
<div class="menu">
<table>
<tr>
<td><a href="">メニュー１</a></td>
</tr>
<tr>
<td><a href="">メニュー２</a></td>
</tr>
<tr>
<td><a href="">メニュー３</a></td>
</tr>
</table>
</div>
<!-- 回り込み解除 -->
<div class="clear">
</div>
</div>
<!-- フッター枠 -->
<div class="footer">
Copyright テストページ
</div>
</div>
</body>
</html>
-
- これで２カラムレイアウトの基礎枠組みが完成しました。
- 実際に表示すると、下の画像のようになります。
 -
|
