左サイドバー(2-col)サイトを紐解く

この章では、単純化された左サイドバー(2-col)サイトの構造を、HTMLから、CSS (スタイルシート)から解説していきます。
当然、HTML/CSS コマンドの使用法にも十分な時間を割り振ってあります。

参考資料: HTML,CSS記述

<html>
<head>
<link rel="stylesheet" href="style-6.css" type="text/css" media="screen" />
</head>
<body>
   <div id="wrapper">
      <div id="header">
            <h1> HTML/CSS基礎講座 </h1>
      </div>
      <div id="navi">
         <p>Navi の P です </p>
      </div>
      <div id="containar">
         <p>HTML/CSS基礎講座です </p>
      </div>
      <div id="sidebar">
         <p>SideBar の P です </p>
      </div>
      <div id="footer">
         <p>foote の P です </p>
      </div>
   </div>
</body>
</html>
body {
	background-color: #e5e5e5;
         text-align:center;
}
#wrapper {
	margin: 0 auto;
	padding: 0px;
	width: 400px;
	border: solid 1px #000000;
	text-align:left;
}
#header {
	margin: 0 auto;
	padding: 0px;
	width: 400px;
	height: 100px;
	background: url(samp.png);
}
h1 {
	font-size:30px;
	color:#ffffff;
/*	margin: 0px;
	padding: 0px;*/
}
#navi {
	margin: 0px;
	padding: 0px;
	height: 40px;
	width: 400px;
	background: #ff00ff;
}
#containar {
	float:right;
	margin: 10px 0 20px 0;
	padding: 0 10px;
	width: 240px;
	height: 200px;
	background: #ffff00;
}
#sidebar {
	float: left;
	margin: 10px 0 0 0;
	padding: 0 5px;
	width: 120px;
	background: #ffff00;
}
#footer {
            clear: both;
	margin: 0;
	padding: 0;
	width: 400px;
	height: 40px;
	background: #ff0000;
}
p {
	margin: 0;
	padding: 0;
	font-size:24px;
	color:#0000ff;
}
#footer p {
	margin: 0;
	padding: 0;
	font-size:40px;
	color:#0000ff;
}

コメントを残す

*