1004｜webデザイン求職者支援受講記録｜#9

webクリエイター訓練

時間割

リストでナビゲーション
イラストレーター

練習

ボックス内にボックスがある場合のマージンの相殺

ちょっと小ぶりにドアみたいに作って練習しました。まだ完全に理解してないので、分かった気にならないでがんばろう。課題のページを見たらsidebarが右になっている。あした又挑戦しよう。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>box trining</title>
<style type="text/css">
*{
    margin:0;
    padding:0;
}
body{
    background-color:#F7ECD4;
}
#container{
    width:200px;
    height:auto;
    margin:0 auto;
    padding:15px 0;
    background-color:#000;
}
#header{
    width:170px;
    height:50px;
    margin:0 15px 15px 15px;
    background-color:#A3C9FF;
}
#wrapper{
    width:200px;
    margin:0 0 15px 0;
    overflow:auto;
}
#content{
    width:100px;
    height:200px;
    margin:0 15px 0 0;
    background-color:#A3C9FF;
    float:right;
}
#sidebar{
    width:55px;
    height:200px;
    margin:0 0 0 15px;
    background-color:#A3C9FF;
}
#footer{
    width:170px;
    height:50px;
    margin:15px 0 0 15px;
    background-color:#A3C9FF;
    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>