【CSS】ホームページレイアウト/領域を作る１<div><#id selector><float>

HTMLページのレイアウトを決める際に、HTMLページにてブロックを上下左右の配置に<div>と<float>がよく使われます。

各領域は<div>～</div>タグで囲んだ範囲で表します。

<div>は特に意味は持ちませんが、ブロック要素としてほぼすべての他のタグを含めることができるため、見出し、段落、リスト、フォームなどのひとつのまとまり(グループ化)に使われます。

大体ホームページのレイアウトは下記のように<header>、<left>、<middle>、<right>、<footer>の範囲で構成されます。

各領域を作るには通常スタイルシートで「idセレクタ名」を指定する方法です。セレクタ名は「#」をつけます。<style>～</style>には、idセレクタ名を決めて、プロパティと値を宣言します。

以下の場合は上下左右と中央の5ヵ所です。

<!doctype html>
 <head>
 　<title>CSS | レイアウトの配置</title>
 　　<style>
#header
{   width:480px; 
    height:74px;
    background-color:yellow; 
 
}
#left {
    width:160px; 
    height:100px;
    background-color:red; 
    float:left;
}
 
#middle {
    width:160px; 
    height:100px;
    background-color:blue; 
    float:left;
}
 
#right {
    width:160px; 
    height:100px;
    background-color:green; 
    float:left;
}
#footer{
    width:480px; 
    height:100px;
    background-color:pink; 
    clear:both;
 }
 　　</style>     
 　</head>

また<body>～</body>には実際ホームページに表示されるコードを入れます。<div id="idセレクタ名">～</div>の形でコーディングします。

<div>要素はブロックレベル要素なので、前後に改行が入ります。

<body>
 　 <div id="header">HEADER</div>
 　 <div id="left">LEFT</div>
 　 <div id="middle">MIDDLE</div>
 　 <div id="right">RIGHT</div>
 　 <div id="footer">FOOTER</div>
 </body> 
</html>