ページの基本的な設定を行なうための、HTMLとCSSのサンプルコードです。
ページ全体の設定(背景、テキスト、リンクテキスト)や、内容全体を囲むコンテナ、ヘッダ、コンテンツ、フッタの各エリアを設定することができます。
※上記のサンプルでは、内容を分かりやすくするためにパディングを設定しています。
@charset "Shift_JIS"; /* --- 全体の背景・テキスト --- */ body { margin: 0; padding: 0; background-color: #f0f0f0; /* ページの背景色 */ color: #000000; /* 全体の文字色 */ font-size: 100%; /* 全体の文字サイズ */ } /* --- 全体のリンクテキスト --- */ a:link { color: #0000ff; } a:visited { color: #800080; } a:hover { color: #ff0000; } a:active { color: #ff0000; } /* --- コンテナ --- */ #container { margin: 0 20px; } /* --- ヘッダ --- */ #header { background-color: #ffe080; /* ヘッダの背景色 */ } /* --- コンテンツ --- */ #content { background-color: #ffffff; /* コンテンツの背景色 */ } /* --- フッタ --- */ #footer { background-color: #e8e8e8; /* フッタの背景色 */ }
<!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"> <meta name="keywords" content="キーワード1,キーワード2,キーワード3"> <meta name="description" content="ドキュメントの説明。"> <title>ページのタイトル</title> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" type="text/css" href="body.css"> </head> <body> <!-- コンテナ開始 --> <div id="container"> <!-- ヘッダ開始 --> <div id="header"> [ヘッダ] </div> <!-- ヘッダ終了 --> <!-- コンテンツ開始 --> <div id="content"> [コンテンツ] </div> <!-- コンテンツ終了 --> <!-- フッタ開始 --> <div id="footer"> [フッタ] </div> <!-- フッタ終了 --> </div> <!-- コンテナ終了 --> </body> </html>