■
2012年12月04日
positionを使ったレイアウト
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ボックスの幅と位置を指定する</title> <link rel="stylesheet" href="css/style1.css" media="screen,print"> </head> <body> <div id="container"> <div id="header"><br></div> <div id="primary"><br><br><br><br><br><br><br><br><br><br><br></div> <div id="secondary"><br><br><br><br><br><br><br><br><br><br><br></div> <div id="footer"><br></biv> </div> </body> </html>
@charset "utf-8";
#container {
width: 760px;/* レイアウト全体の幅を指定*/
left: 10px;/* 左方向からの配置位置を指定*/
top: 10px;/* 上方向からの配置位置を指定*/
width: 550px;/*ボックスの幅を指定*/
background-color: #c7d5ed;
overflow: hidden;
}
#secondary {
position: adsolute;/* 値にabsoluteを指定*/
left: 570px;/* 左方向からの配置位置を指定*/
top: 10px;/* 上方向からの配置位置を指定*/
width: 200px;/*ボックスの幅を指定*/
background-color: #f9cfba;
}
教科書の４６ページぐらいから５１ページ
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ボックスの幅と位置を指定する</title> <link rel="stylesheet" href="css/style1.css" media="screen,print"> </head> <body> <div id="container"> <div id="header"><br></div> <div id="primary"><br><br><br><br><br><br><br><br><br><br><br></div> <div id="secondary"><br><br><br><br><br><br><br><br><br><br><br></div> <div id="footer"><br></biv> </div> </body> </html>
@charset "UTF-8";
#container {
width: 760px;/* レイアウト全体の幅を指定*/
background-color: #3CB371;
overflow: hidden;/*内容領域を超えるものは切り取られ、スクロールバーをつけない*/
}
#header {
background-color: #ddd;
height: 50px;/*高さ*/
margin-bottom: 10px;/*下マージン*/
}
#primary {
float: right;/* ボックスを右寄せに指定*/
width: 550px;/* ボックスの幅を指定*/
background-color: #f9cfba;
margin-bottom: 10px;/* #footer {にmargin-top: 10px;を入れても認識きしない*/
}
#secondary {
float: left;/* ボックスを左寄せに指定*/
width: 200px;/*ボックスの幅を指定*/
background-color: #8A2BE2;
}
#footer {
clear: both;
background-color: #f9c;
height: 50px;
}
ノートその１ １２月３日
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ボックスの幅と位置を指定する</title> <link rel="stylesheet" href="css/style2.css" media="screen,print"> </head> <body> <div id="container"> <div id="header"><br></div> <div id="content"><br><br><br><br><br><br><br><br><br><br><br></div> <div id="sidebar"><br><br><br><br><br><br><br><br><br><br><br></div> <div id="footer"><br></biv> </div> </body> </html>
@charset "UTF-8";
html, body, div {
margin: 0;
padding: 0;
}
body {
background-color: #ccc;
text-align: center;/*IE6対策*/
}
#container {
width: 780px;/* レイアウト全体の幅を指定*/
margin: 0 auto;
padding: 10px;
background-color: #3CB371;
overflow: hidden;/*内容領域を超えるものは切り取られ、スクロールバーをつけない*/
}
#header {
background-color: #ddd;
height: 50px;/*高さ*/
margin-bottom: 10px;
}
#content {
float: left;
width: 500px;/* ボックスの幅を指定*/
height: 300px;
background-color: #f9cfba;
margin-bottom: 10px;/* #footer {にmargin-top: 10px;を入れても認識きしない*/
}
#sidebar {
float: right;
width: 270px;/*ボックスの幅を指定*/
height: 300px;
background-color: #8A2BE2;
margin-bottom:10px;
}
#footer {
clear: both;
background-color: #f9c;
height: 50px;
}
