ホームページ作成/タグ一覧２カラム右サイドバーページレイアウト

２カラム右サイドバーページレイアウト

スタイルシート(CSS)を使ってページをすっきりさせる

２カラム右サイドバーページレイアウト

HTMLタグ

<html lang="ja">

<head>
<title>
ホームページのタイトル
</title>
<meta http-equiv="CONTENT-TYPE" content="text/html; CHARSET=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css" href="body.css">
</head>

<body>
<center>

<div id="container">
</center>


<div id="header">
ヘッダ
</div>



<div class="section ">
<div id="nav">
ナビゲーション
</div>
</div>



<div id="content">
メイン
</div>



<div id="footer">
フッタ
</div>


</div>


</body>
</html>

CSSタグ

@charset "Shift_JIS";

/* --- 全体の背景・テキスト --- */
body {
margin: 0;
padding: 0;
background-color: #ffffff; /* ページの背景 */
color: #000000; /* 全体の文字色 */
font-size: 100%; /* 全体の文字サイズ */
}

/* --- 全体のリンクテキスト --- */
a:link { color: #0000ff; }
a:visited { color: #3DAF5F; }
a:hover { color: #66CCFF; }
a:active { color: #336699; }

/* --- コンテナ --- */
#container {
width: 80%; /* ページの幅 */
margin: 0 auto; /* センタリング */
background-color: #ffffff; /* メインカラムの背景 */
border-left: 1px #BFBFFF solid; /* 左枠線 */
border-right: 1px #BFBFFF solid; /* 右枠線 */
}

/* --- ヘッダ --- */
#header {
background-color: #faebd7; /* ヘッダの背景 */
}

/* --- ナビゲーション --- */
#nav {
float: right;
width: 200px; /* サイドバーの幅 */
background-color: #cccccc; /* ナビゲーションの背景 */
}

/* --- メインカラム --- */
#content {
margin-right: 200px; /* メインカラムの右マージン */
}

/* --- フッタ --- */
#footer {
clear: right; /* フロートのクリア */
width: 100%;
background-color: #faebd7; /* フッタの背景 */
}