※上記のサンプルでは、内容を分かりやすくするためにパディングを設定しています。
サイズ違いの背景画像です。ページの幅に合わせてお選びください。
pageback_640.gif
pageback_700.gif
pageback_720.gif
pageback_740.gif
pageback_760.gif
pageback_800.gif
@charset "Shift_JIS"; /* --- 全体の背景・テキスト --- */ body { margin: 0; padding: 0; background: #f9f9f9 url(pageback_780.gif) center top repeat-y; /* ページの背景 */ color: #000000; /* 全体の文字色 */ font-size: 100%; /* 全体の文字サイズ */ } /* --- 全体のリンクテキスト --- */ a:link { color: #0000ff; } a:visited { color: #800080; } a:hover { color: #ff0000; } a:active { color: #ff0000; } /* --- コンテナ --- */ #container { width: 780px; /* ページの幅 */ margin: 0 auto; /* センタリング */ } /* --- ヘッダ --- */ #header { background-color: #ffe080; /* ヘッダの背景色 */ } /* --- コンテンツ --- */ #content { background-color: #ffffff; /* コンテンツの背景色 */ } /* --- フッタ --- */ #footer { background-color: #f9f9f9; /* フッタの背景色 */ }
@charset "Shift_JIS"; /* --------------------------------------------- IE用 不具合調整スタイル --------------------------------------------- */ body { padding-left: 1px; /* センターのずれ防止 */ }
<!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"> <!--[if IE]> <link rel="stylesheet" type="text/css" href="ie.css"> <![endif]--> </head> <body> <!-- コンテナ開始 --> <div id="container"> <!-- ヘッダ開始 --> <div id="header"> [ヘッダ] </div> <!-- ヘッダ終了 --> <!-- コンテンツ開始 --> <div id="content"> [コンテンツ] </div> <!-- コンテンツ終了 --> <!-- フッタ開始 --> <div id="footer"> [フッタ] </div> <!-- フッタ終了 --> </div> <!-- コンテナ終了 --> </body> </html>