確認テスト(2)
とりあえずここまでできた。
課題
- hover時の背景色の変化のエリアがコントロールできていない。
ここは苦手で、いつもわからないままだったかもしれない。
/* CSS Document */ @charset "utf-8"; *{ margin:0; padding:0; } body{ font-size:0.8em; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; background-color:#CCC; } #container{ width:800px; margin:0 auto; background-color:#FFF; } #header{ border:1px solid #F00; height:120px; background-color:#F9C;a } #menu{ background-color:#33FF00; height:60px; } #content{ background-color:#06F; float:right; width:600px; height:230px; overflow: auto; } #side{ background-color:#6FF; float:left; width:200px; height:230px ; } #footer{ clear:both; background-color:#F00; height:60px; } #menu ul{ list-style-type:none; } #menu ul li{ display:inline; width:160px; float: left; text-align:center; } #menu ul a{ list-style:none; } #menu a:link, #nav1 a:visited { color: #FFFFFF; display: block; line-height:60px; text-decoration: none; } #menu a:hover { color: #FFFFFF; line-height:60px; display: block; background-color: #447769; }
<!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=utf-8"> <meta http-equiv="content-type" content="text/css" /> <link type="text/css" rel="stylesheet" href="css/common.css" /> <title>確認テスト2</title> </head> <body> <div id="container"> <div id="header">header</div> <div id="menu"> <ul> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー3</a></li> <li><a href="#">メニュー4</a></li> <li><a href="#">メニュー5</a></li> </ul> </div> <div id="content">content</div> <div id="side">side</div> <div id="footer">footer</div> </div> </body> </html>
応用
- 各ブロック同士の空きは、「10px」
- 幅「800px」を前提に、他の数値の変化は適宜おこなうこと
htmlは最初と変わらないのでcssのみ掲載
/* CSS Document */ @charset "utf-8"; *{ margin:0; padding:0; } body{ font-size:0.8em; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; background-color:#CCC; } #container{ width:800px; heightt:600px; margin:0 auto; padding:10px; background-color:#FFF; } #header{ border:1px solid #F00; height:120px; background-color:#F9C; margin-bottom:10px; } #menu{ background-color:#33FF00; height:60px; margin-bottom:10px; } #content{ background-color:#06F; float:right; width:600px; height:230px; margin-bottom:10px; overflow: auto; } #side{ background-color:#6FF; float:left; width:190px; height:230px ; } #footer{ clear:both; height:60px; margin-top:10px; background-color:#F00; } #menu ul{ list-style-type:none; } #menu ul li{ display:inline; width:156px; float: left; text-align:center; } #menu ul a{ list-style:none; } #menu a:link, #nav1 a:visited { color: #FFFFFF; display: block; line-height:60px; text-decoration: none; } #menu a:hover { color: #FFFFFF; line-height:60px; display: block; background-color: #447769; }