※上記のサンプルでは、内容を分かりやすくするためにパディングを設定しています。
サイズ違いの背景画像です。サイドバーの幅に合わせてお選びください。
sidebar_280.gif
sidebar_300.gif
sidebar_320.gif
sidebar_340.gif
sidebar_380.gif
sidebar_400.gif
sidebar_140b.gif
sidebar_160b.gif
sidebar_200b.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_360.gif) repeat-y right; /* サイドバー1の背景画像 */ background-color: #ffffff; /* メインカラムの背景色 */ border-left: 1px #c0c0c0 solid; /* 左枠線 */ border-right: 1px #c0c0c0 solid; /* 右枠線 */ } #containerInner { width: 100%; background: url(sidebar_180b.gif) repeat-y right; /* サイドバー2の背景画像 */ } /* --- ヘッダ --- */ #header { background-color: #ffe080; /* ヘッダの背景色 */ } /* --- メインカラム --- */ #content { float: left; width: 100%; margin-right: -360px; /* サイドバー1 + サイドバー2の幅に合わせる(マイナス値) */ } #contentInner { margin-right: 360px; /* サイドバー1 + サイドバー2の幅に合わせる */ } /* --- ナビゲーション --- */ #nav { float: left; width: 180px; /* サイドバー1の幅 */ } /* --- サブナビゲーション --- */ #aside { float: left; width: 180px; /* サイドバー2の幅 */ } /* --- フッタ --- */ #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="containerInner"> <!-- ヘッダ開始 --> <div id="header"> [ヘッダ] </div> <!-- ヘッダ終了 --> <!-- メインカラム開始 --> <div id="content"> <div id="contentInner"> [メインカラム] </div> </div> <!-- メインカラム終了 --> <!-- ナビゲーション開始 --> <div id="nav"> [サイドバー1] </div> <!-- ナビゲーション終了 --> <!-- サブナビゲーション開始 --> <div id="aside"> [サイドバー2] </div> <!-- サブナビゲーション終了 --> <!-- フッタ開始 --> <div id="footer"> [フッタ] </div> <!-- フッタ終了 --> </div> </div> <!-- コンテナ終了 --> </body> </html>