※上記のサンプルでは、内容を分かりやすくするためにパディングを設定しています。
サイズ違いの背景画像です。サイドバーの幅に合わせてお選びください。
sidebar_140.gif
sidebar_160.gif
sidebar_180.gif
sidebar_250.gif
sidebar_300.gif
@charset "Shift_JIS"; /* --- 全体の背景・テキスト --- */ body { margin: 0; padding: 0; background-color: #ffffff; /* ページの背景色 */ color: #000000; /* 全体の文字色 */ font-size: 100%; /* 全体の文字サイズ */ } /* --- 全体のリンクテキスト --- */ a:link { color: #0000ff; } a:visited { color: #800080; } a:hover { color: #ff0000; } a:active { color: #ff0000; } /* --- コンテナ --- */ #container { width: 96%; /* ページの幅 */ margin: 0 auto; /* センタリング */ background: url(sidebar_200.gif) repeat-y left; /* サイドバーの背景画像 */ background-color: #ffffff; /* メインカラムの背景色 */ border-left: 1px #c0c0c0 solid; /* 左枠線 */ border-right: 1px #c0c0c0 solid; /* 右枠線 */ } /* --- ヘッダ --- */ #header { background-color: #ffe080; /* ヘッダの背景色 */ } /* --- ナビゲーション --- */ #nav { float: left; width: 200px; /* サイドバーの幅 */ } /* --- メインカラム --- */ #content { margin-left: 200px; /* メインカラムの左マージン(サイドバーの幅以上) */ } /* --- フッタ --- */ #footer { clear: left; /* フロートのクリア */ width: 100%; background-color: #ffe080; /* フッタの背景色 */ }
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="CONTENT-TYPE" content="text/html; CHARSET=Shift_JIS"> <title>ページのタイトル</title> <link rel="stylesheet" type="text/css" href="body.css"> </head> <body> <!-- コンテナ開始 --> <div id="container"> <!-- ヘッダ開始 --> <div id="header"> [ヘッダ] </div> <!-- ヘッダ終了 --> <!-- ナビゲーション開始 --> <div id="nav"> [サイドバー] </div> <!-- ナビゲーション終了 --> <!-- メインカラム開始 --> <div id="content"> [メインカラム] </div> <!-- メインカラム終了 --> <!-- フッタ開始 --> <div id="footer"> [フッタ] </div> <!-- フッタ終了 --> </div> <!-- コンテナ終了 --> </body> </html>