Div レイアウト　- Flaoat 編

先週、Div でのレイアウトを実践しました。

当初、position プロバティを使用して、レイアウトしようかと思いましたが、サイドバーとメインの量が変わることが多いので、postionプロパティは不向きだと思い、Floatプロパティにてレイアウトを組みました。

最初に参考までに、最初のHTMLの記述は、ドリームウィーバーにて下記の要領にて作成（選択）し、私は何も手をつけていません。

ファイル　→　新規　→　HTMLの空白ページ

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>無題ドキュメント</title>

</head>

<body>

</body>

</html>

---------------------------------------------------

私が上記の空白ページにレイアウトを足したものが、以下の通りです。

<!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 ">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ホームページ制作実況中継</title>
<link href="layout" rel="stylesheet" type="text/css" />
<link href="styleLayout" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="sample-layout.css" type="text/css" />
</head>

<body>
<div id="wrapper">
<div id="inner">
<div id="header"><h2>Header</h2><br /><br /></div>
<div id="glMenu">
<h2>Global Menu<br />
</h2><br />
</div>
<div id="container">
<div id="primary"><h1>Primary</h1><br /><br /><br /><br /></div>
<div id="secondary"><h1>Secondary</h1><br /><br /><br /><br /></div>
</div>
<div id="footer"><h1>footer</h1><br /><br /></div>
</div>
</div>
</body>
</html>

----------------------------------------------

CSSは、以下の通りです。

@charset "utf-8";
/* CSS Document */

* {
margin:0;
padding:0;
}

body {
background:yellow;
margin: 0;
padding: 0;
}

#wrapper {width: 810px;
margin:0 auto;
text-align: center;
background-color:white;
}

#inner {width: 770px;
margin: 0 auto;
padding-top:20px;
}

#header {
background-color: green;
height: 150px;
width:770px;
}

#glMenu {
background-color: silver;
height: 155px;
margin-top:15px;

}

#container {
background-color:aqua;
}

#primary {
float: left;
width: 200px;
background-color: red;
height: 400px;
margin-top: 15px;
}

#secondary {
float: right;
width: 555px;
background-color: blue;
height: 500px;
margin-top: 15px;
margin-bottom: 15px;
}

#footer {
clear: both;
width:770px
height: 50px;
background-color: gray;
}

-----------------------------------------

ブラウザでレイアウトを見ると、以下の通りになっています。

デザインの完成案を実現していると思います。

今から、レイアウトから個別のパーツに情報を入れる作業をやっていきます。

次回、Header部分が完成したら更新を行います。

それでは。

ウェブサイト（ホームページ）制作を仕事にするのブログ

Web 制作実況中継中

Div レイアウト　- Flaoat 編

Div レイアウト - Flaoat 編

Div レイアウト　- Flaoat 編