3列構造のhtml の基本の基本

HTML/CSS Web Design

3列構造のHTMLコーディングの基本を載せときます。毎回一から作るのがそろそろ面倒くさくなってきたので自分用コピーに。

本文はid=mainにサイドバーはid=right, id=leftに入れます。CSSのコーディングはそれぞれぞれ行ってくらさい。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
<link href="stylesheets/reset.css" rel="stylesheet" type="text/css" />
<link href="stylesheets/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="content_wrap">
    <div id="top_menu_wrap">
    	<div id="top_menu">
        </div>
    </div>
    <div class="clear"></div>
    <div id="header_wrap">
    	<div id="header">
        </div>
    </div>
    <div class="clear"></div>
    <div id="content">
        <div id="sidebar_wrap_left">
            <div class="sidebar">	
            </div>
        </div>
        <div id="main_wrap">
            <div id="main">
            </div>
        </div>
        <div id="sidebar_wrap_right">
            <div class="sidebar">
            </div>
        </div>
    </div>
</div>
<div class="clear"></div>
<div id="footer_wrap">
	<div id="footer"></div>
</div>
</body>
</html>