10/3 ☀ テストまとめ
テスト 以下のレイアウトを作成しなさい。
* XHTML1.0 Strict
* CSSエンベッド
* 文字も入れる
* 色・サイズ自由
body
background-colorは白の場合でも#FFFFFFで必ず指定する。
#header
上下左右全てにmargin10px指定する。widthは780px。
#fotter
clear: both指定してるので上下のmarginはきかない。
左右にmargin10px指定する。
clear: both floatで指定した要素の回り込みを解除する際に使用する。
#wrapper
下のmargin10px指定する。
overflow: autoを指定。
ボックスの範囲内に内容が入りきらない場合に、はみ出た部分の表示の仕方を指定する際に使用する。
計算上数値はあっていてもレイアウトが崩れるので、必ず指定する。
#content
float: rightを指定。
右のmargin10px指定する。
#sidebar
float: leftを指定。
左のmargin10px指定する。
#contentと#sidebar
間を10px開けるので、それぞれのwidthを−5にして設定する。
<?xml version="1.0" ecoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmins="http://www3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" ocntent="text/httml;cahrset=UTF-8" /> <meta http-equiv="Content-Style-Type" content-"text/css" /> <title>10/3 TEST</title> <style type="text/css"> <!-- * { margin: 0; padding: 0; } body { background-color: #CC9933; } #container { width: 800px; height: auto; background-color: #FFFFFF; margin: 0 auto; } #header { width: 780px; height: 100px; background-color: #660099; margin: 10px; } #wrapper { width: 800px; height: auto; overflow: auto; margin: 0 0 10px 0; } #content { width: 495px; height: 300px; background-color: #CC3300; float: right; margin: 0 10px 0 0; } #sidebar { width: 275px; height: 300px; background-color: #006600; float: left; margin: 0 0 0 10px; } #fotter { width: 780px; height: 100px; background-color: #FF9900; clear: both; margin: 0 10px 0 10px; } --> </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="fotter">fotter</div> </div> </body> </html>
これだと上下の余白の部分が無いので、
#containerの上下にpadding 10pxを指定する。左右は0。
そうすると上の余白部分が
headerのmargin10px+containerのpadding 10px=20px
になるので、headerの上のmarginを0にする。
<?xml version="1.0" ecoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmins="http://www3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" ocntent="text/httml;cahrset=UTF-8" /> <meta http-equiv="Content-Style-Type" content-"text/css" /> <title>10/3 TEST</title> <style type="text/css"> <!-- * { margin: 0; padding: 0; } body { background-color: #CC9933; } #container { width: 800px; height: auto; background-color: #FFFFFF; margin: 0 auto; padding: 10px 0; } #header { width: 780px; height: 100px; background-color: #660099; margin: 0 10px 10px 10px; } #wrapper { width: 800px; height: auto; overflow: auto; margin: 0 0 10px 0; } #content { width: 495px; height: 300px; background-color: #CC3300; float: right; margin: 0 10px 0 0; } #sidebar { width: 275px; height: 300px; background-color: #006600; float: left; margin: 0 0 0 10px; } #fotter { width: 780px; height: 100px; background-color: #FF9900; clear: both; margin: 0 10px 0 10px; } --> </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="fotter">fotter</div> </div> </body> </html>
完成!