テスト結果
後で気づいたこと
各項目でh1やpをつけなかったこと。CSS以前の問題、完全に終わってます反省。
自分で作った作例
1カ所でどうしてもできなくて苦戦したこと、navボタンがうまくできていません。HTMLソースは以下の通り。
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>2カラムレイアウト+ナビゲーション</title> <style type="text/css"> <!-- * { margin: 0; padding: 0; } body { font-size: 1em; font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴProW3", Meiryo, "メイリオ", Osaka, "MS P Gothic", "MS Pゴシック", sans-serif; line-height: 1.5; background-color: #CCCCCC; } div#container { width: 800px; height: 600px; margin: 20px auto; border: 1px solid #999999; background-color: #FFFFFF; } div#header { width: 800px; height: 100px; background-color: #FDEEFE; } div#nav { width: 800px; height: 50px; } div#nav ul { font-weight: bold; list-style-type :none; background-color: #91B182; } div#nav li { width: 159px; height: 50px; margin: 0; border-left: 1px solid #FFFFFF; background-color: #91B182; float :left; } div#nav a{ color: #FFFFFF; font-weight: bold; text-align: center; margin: 15px 10px 15px 10px; text-decoration: none; display: block; } div#nav a:hover { color: #FFFFFF; background-color: #536A81; } div#nav ul li.left { border-left: 1px solid #91B182; } div#wrapper { width: 800px; height: 400px; } div#content { width: 560px; height: 360px; margin: 20px 20px 20px 20px; background-color: #FAFDD4; float: left; } div#sidebar { width: 180px; height: 360px; margin: 20px 20px 20px 0; background-color: #DFFBFE; float: right; } div#footer { width: 800px; height: 50px; background-color: #FED5CB; clear: both; } --> </style> </head> <body> <div id="container"> <div id="header"> ここにヘッダー内容が入る </div> <div id="nav"> <ul> <li class="left"><a href="#">A</a></li> <li><a href="#">B</a></li> <li><a href="#">C</a></li> <li><a href="#">D</a></li> <li><a href="#">E</a></li> </ul> </div> <div id="wrapper"> <div id="content"> ここにコンテンツ内容が入る </div> <div id="sidebar"> ここにサイドバー内容が入る </div> </div> <div id="footer"> ここにフッター内容が入る </div> </div> </body> </html>