CSSレイアウト、見出しの練習
今までちゃんと意味を理解していないまま、Dreamweaverを使ってマージンやパディングなどを設定していたので、プレビューだけを頼りに調整していました。いま、タグ打ちをしながらやっていると、paddingは背景も伸びるとか、padding同士は足し算ができ、marginは大きい値が適用されるという事がよくわかりました。
本を読んで、Dreamweaverのソフトの機能だけを使って少し形にできると、HTMLもCSSも使える気になっていたんだなと思います。
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>和銀 和風のオリジナルシルバーアクセサリー</title>
<link href="css3.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="header">
<h1>和銀 和風のオリジナルシルバーアクセサリー</h1>
</div>
<div id="nav">
<ul>
<li><a href="#"><img src="images/nav_1.jpg" onmouseover="this.src='images/nav_1_on.jpg'" onmouseout="this.src='images/nav_1.jpg'" alt="ホーム"</a></li>
<li><a href="#"><img src="images/nav_2.jpg" onmouseover="this.src='images/nav_2_on.jpg'" onmouseout="this.src='images/nav_2.jpg'" alt="商品一覧"</a></li>
<li><a href="#"><img src="images/nav_3.jpg" onmouseover="this.src='images/nav_3_on.jpg'" onmouseout="this.src='images/nav_3.jpg'" alt="店舗紹介"</a></li>
<li><a href="#"><img src="images/nav_4.jpg" onmouseover="this.src='images/nav_4_on.jpg'" onmouseout="this.src='images/nav_4.jpg'" alt="お問合せ"</a></li>
</ul>
</div>
<div id="wrapper">
<div id="mainContents">
<h2>新着情報</h2>
<dl>
<dt>2008年8月20日</dt>
<dd>和銀取扱店 「MU-RA仙台パルコ店」が8月23日グランドオープン!</dd>
<dt>2008年8月10日</dt>
<dd>ホームページリニューアルいたしました!</dd>
</dl>
<h3>見出し練習1</h3>
<h4>見出し練習2</h4>
<h5>見出し練習3</h5>
<h6>見出し練習4</h6>
</div>
<div id="sideMenu">
<p>蛙</p>
<p>動物</p>
<p>わびさび</p>
</div>
</div>
<div id="footer">
<ul class="nav_under"><li><a href="#">ホーム</a></li><li><a href="#">商品一覧</a></li><li><a href="#">店舗紹介</a></li><li><a href="#">お問合せ</a></li></ul>
<address>Copyright ©WAGIN. All rights reserved.</address>
</div>
</div>
</body>
</html>
CSS
@charset "Shift_JIS"; /*セレクタのリセット*/ *{ margin: 0; padding: 0; border:none; }/*ユニバーサル<全称)セレクタト*/ /*全体の設定*/ body{ font-family: sans-serif; text-align: center; /*IE6以前のブラウザがautoに非対応のため*/ background: #FFFFFF; } /*レイアウトの設定*/ #container{ text-align: left;/*右揃えになった内容を左揃えにする*/ height: auto; width: 800px;/* レイアウト全体の幅を指定 */ margin: 0 auto;/*上下の空きなし、左右はブラウザの可変にあわせ均等に*/ } #header{ height: 80px; background-color: #FFCCFF; padding-top: 10px; padding-left: 10px; } #nav{ background-color:#000000; } #wrapper{ width:800px; clear: both;/* 寄せを解除 */ } #mainContents{ height:400px; width: 600px; background: #FFFFBB; float: left;/* ボックスを左寄せに指定 */ } #sideMenu{ height:400px; width: 200px; float: right;/* ボックスを右寄せに指定 */ background-color: #CCFFFF; } #footer{ padding-top: 20px; margin: 0 10; height: 70px; background: #CCFFCC; clear: both;/* 寄せを解除 */ } #footer ul.nav_under { width: 800px; margin-left: 50px; height: 30px; } #footer ul.nav_under li{ display: inline; float:left; width: 100px; height: 30px; } /*各セレクタの設定*/ h1{ font-size: 160%; color: #000000; margin: 10px 0 0 0; padding:10px 0 0 10px; } .text{ font-size: 120%; line-height:1.5; text-indent:1em; padding: 10px; } h2{ width:550px; color: #FF9900; letter-spacing: 0.3em; font-size: 130%; margin: 20px 0 10px 20px; padding: 0 0 0 10px; border-bottom-width: thin; border-left: 5px solid #FF9900; border-bottom-style: dotted; } h3{ margin: 10px; padding: 5px 10px; font-size: 80%; border-left: 10px solid #003399; border-bottom: #003399 thin dashed; background-color: #99CCFF; font-size: 14px; color: #000000; } h4{ margin:10px; padding: 5px 10px; font-size: 80%; border-left: #003399 thin solid; border-right: #003399 thin solid; background-color: #99CCFF; } h5{ margin:10px; padding: 5px 10px; font-size: 80%; border-top: #003399 thin solid; border-bottom: #003399 thin solid; background-color: #99CCFF; } h6{ margin-left:30px; padding-left: 50px; font-size: 80%; padding-top:5px; padding-bottom:5px; background-color: #99CCFF; } p{ color: #000000; font-size: 80%; line-height: 1.5; margin-top: 10px; margin-right: 10px; margin-bottom: 20px; margin-left: 20px; } ul{ height: 28px; width: 380px;/* 画像4つの幅合計 */ list-style: none; margin: 0; padding: 0; } li{ display: block; float:left; height: 28px; width:95px; } #mainContents dl{ font-size: 80%; line-height: 1.5; margin: 0 0 0 20px; padding: 0; } address{ clear:both;/* 寄せを解除 */ margin-left: 50px; font-style: normal; }