トップページ > テンプレートトップ > テンプレート サンプル（21）
ここがヘッダー
ここにコンテンツを書いていく。<div class=contentbox> が、このボックスになる。ボックス上部の見出し（h2またはh3）とこのボックスがセットになって、作成されることになる。
以下のソースをコピーして利用することができます。（ソースの上で右クリック→コピーを選択）
<?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>テンプレート（20）</title> <meta name="Keywords" content="半角カンマで区切って、キーワードになる単語を記入" /> <meta name="Description" content="ページの内容を要約した文章を書く" /> <meta http-equiv="content-script-type" content="text/javascript" /> <meta http-equiv="content-style-type" content="text/css" /> <link rel="stylesheet" href="CSSファイル.css" type="text/css" /> <script src="JavaScriptファイル.js" type="text/JavaScript"></script> <link rel="shortcut icon" href="css.ico" /> <style type="text/css"> /*Page Property*/ *{margin:0;padding:0;} body{font-family:"ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3";font-size:14px;line-height:1.2;} body{background:url(images/bgpic1.jpg) repeat-x fixed;background-color:#aaa;} a:link {color:#00f;text-decoration:none;} a:visited {color:#00f;text-decoration:none;} a:hover {color:#c00;text-decoration:none;} a:active {color:#c00;text-decoration:none;} /*Page Layout*/ div#container{text-align:center;width:950px;margin:10px auto;} div#header{width:949px;margin:0 0 1em 0;padding-top:1px;text-align:left;background-color:#ccc;border-right:1px solid #777;border-bottom:1px solid #777;} div#contents{float:left;width:738px;margin:0 10px 1em 0;text-align:left;background-color:#ccc;border-right:1px solid #777;border-bottom:1px solid #777;} div#sidebar{float:right;width:200px;margin:0 0 1em 0;text-align:left;background-color:#ccc;border-right:1px solid #777;border-bottom:1px solid #777;} div#footer{clear:both;width:949px;margin:0 0 1em 0;padding-top:1px;text-align:left;background-color:#ccc;border-right:1px solid #777;border-bottom:1px solid #777;} div.contentbox{width:717px;margin:10px;background-color:#fff;border-top:1px solid #777;border-left:1px solid #777;} /*Others*/ p{margin:1em 1em 0 1em;padding-bottom:1em;} img{margin:1em;} h1{font-size:12px;font-weight:normal;text-align:right;margin:5px 1em 0 0;} h2,h3{font-size:16px;color:#700;margin:1em;} .aka{color:#c00;} .copyright{text-align:center;font-size:12px;color:#666;} </style> </head> <body> <div id="container"> <div id="header"> <h1><h1>ページタイトルになるような最重要フレーズをここにを記入</h1> <p>ここがヘッダー</p> </div> <div id="contents"> <h2>◆ h2,h3 の小見出しをここに書く（文字カラー#770000は、好みの色に変更可能）</h2> <div class="contentbox"> <p>ここにコンテンツを書いていく。<span class="aka"><div class=contentbox></span> が、このボックスになる。ボックス上部の見出し（h2またはh3）とこのボックスがセットになって、作成されることになる。</p> </div> </div> <div id="sidebar"> <p>ここがサイドバー</p> </div> <div id="footer"> <p>ここがフッター</p> <p class="copyright">Copyright (C) 著作権. All Rights Reserved.</p> </div> </div> </body> </html>
【注意】 このページは、「* :ユニーバーサルセレクタ」で、マージンとパディングが、「0 :ゼロ」になっています。
ここがサイドバー