10/03 Test
10/03 Test!CSS!
完全に理解するまで何回も何回も見なくちゃ!
まず、
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Style-Type" content="text/css"/> <title>10/03 TEST</title> <style type="text/css"> * { margin: 0; padding: 0; } body { background-color: #D2E5E5; }
で bodyは必ずbackground-color: #??????;を入力!
次に、
1.containerから作っていく。(IDで)
2.header
3.wrapper
4.content
5.sidebar
6.footer
をまず作る。
そしたら
一番大事な数値!
1.containerはheightの数値は入れない。
それで auto;にする。
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Style-Type" content="text/css"/> <title>10/03 TEST</title> <style type="text/css"> * { margin: 0; padding: 0; } body { background-color: #D2E5E5; } #container { width: 800px; height: auto; margin: 0 auto; padding: 10px 0; background-color: #FFFFFF; } #header { width: 780px; height: 90px; margin: 0 10px 10px 10px; background-color: #E6DCF0; } #wrapper { width: 800px; height: auto; margin: 0 0 10px 0; overflow: auto; } #content { width: 585px; height: 350px; margin: 0 10px 0 0; background-color: #FF3DFF; float: right; } #sidebar { width: 185px; height: 350px; margin: 0 0 0 10px; background-color: #33ddff; float: left; } #footer { width: 780px; height: 90px; margin: 0 10px 0 10px; background-color: #DDF0D5; clear: both; } </style> </head> <body> <div id="container"> <div id="header">header</div> <div id="wrapper"> <div id="content">content</div> <div id="sidebar">sidebar</div> </div> <div id="footer">footer</div> </div> </body> </html>