10月3日の学習

宿題
【テスト】以下のレイアウトを作成。
  • XHTML1.0 Strict
  • CSSエンベッド
  • 文字も入れる
  • 色・サイズ自由

<?xml version="1.0" enconding="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="http://www.w3/org/1999/xhtml"lang="ja"xml:"ja">
<head>
<meta http-equiv="Content-Type"content="text/html";charset=UTF-8" />
<meta http-equiv="Content-Style-Type"content="text/css" />
<title>10/3テスト</title>
<style type="text/css">
*{
    margin: 0;
    padding: 0:
}
body{
    background-color: #D2E5E5;
}
#container{
    width: 720px;
    height: auto;
    margin: 10px auto;
    padding: 10px 0;
    background-color: #FFFFFF;
}
#header{
    width: 700px;
    height: 100px;
    margin: 0 10px 10px 10px;
    background-color: #FFFF00;
}
#wrapper{
    width: 720px;
    margin: 0 0 10px 0;
    overflow: auto;
}
#sidebar{
    width: 195px;
    height: 400px;
    margin: 0 0 0 10px;
    background-color: #00FF00;
    float: left;
}
#content{
    width: 495px;
    height: 400px;
    margin: 0 10px 0 0;
    background-color: #FF8C00;
    float: right;
}
#footer{
    width: 700px;
    height: 100px;
    margin: 0 10px;
    background-color: #0000FF;
    clear: both;
}
</style>
<body>
<div id="container">
<div id="header"></div>
<div id="wrapper">
 <div id="sidebar"></div>
 <div id="content"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
注意事項
  • 上下marginの相殺について
    • どちらも正の場合、大きい方
    • どちらも負の場合、小さい方
    • 一方が正の値、他方が負の値の場合、足し引きした値を設定
  • margin,paddingの設定
    • 「container」　margin：10px auto，　padding：10px 0を指定。
    • 「header」　containerでpadding 10pxの指定があるため、上は0でその他は10pxを指定
      （上の余白を指定してしまうと、containerのpaddingとheaderのmarginの合算値が余白となってしまう）
    • 「wrapper」　上左右を0、下は必ず10pxで指定する→footerに影響有り。
    • 「sidebar」　上下右を0指定。左に10pxを指定。
    • 「content」　上下左を0指定。右に10pxを指定。
    • 「footer」　bothを指定しているため、marginがきかない。wrapperの下10px指定により、上に余白ができる。
  • 「background-color」　bodyには必ず色を入力する（特に色指定がないときは#D2E5E5）
  • 「container」　必ず色指定する（#FFFFFF 白）。
  • 上下にmargin，左右にpaddingが影響しやすい。

margin、paddingの設定が全くわからなかったけど、今日でなんとな〜く理解ができた。
今まで悩んでいたのが少し解消されてうれしい。。
でもまだ真似て入力しているだけの時が多く、きちんと理解できてないので、もっと入力練習しないといけないなあと改めて思った。