おさるでもわかる
超簡単ホームページ作成講座

ちょい慣れおさるコース・第3回「DIVで配置を考える」

はてさて、今回はさらにDIVを使っていきます。

まずメモ帳を開いて、以下のHTMLをコピーして「デスクトップ」に「名前をつけて保存」してください。名前はそれぞれ「testpage2.html」「teststyle2.css」としてね。


「testpage2.html」

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" href="teststyle.css" type="text/css">
<title>
こんにちは世界
</title>
</head>
<body>
<div id="waku">
<p>枠</p>
<div id="head">
<h1>タイトル</h1>
</div>
<div id="left">
<h2>メイン</h2>
<p>ここがメインページ</p>
</div>
<div id="right">
<p>右</p>
</div>
<div id="foot">
<p>フッター</p>
</div>

</div>
</body>
</html>


「teststyle2.css」

body{
text-align: center;
}
#waku{
width:710px;
height:710px;
background-color:#0000ff;
padding: 5px 5px 5px 5px;
}
#head{
width:700px;
height:100px;
background-color:#00ffff;
}
#left{
clear:both;
width:500px;
height:500px;
float:left;
background-color:#ffff00;
}
#right{
width:200px;
height:500px;
float:right;
background-color:#ff0000;
}
#foot{
width:700px;
height:100px;
clear:both;
background-color:#00ff00;
}

なんだかぐちゃぐちゃしてきたねェ。

まあまずは「testpage2.html」をとりあえずブラウザで表示してみる。

初心者用ページ1

カラフルったねェ。

順番にみていくとまず

<div id="waku">
<p>枠</p>

<p>というのが初めてでてきよったのですが、これはパラグラフを意味します。これについては後でまた説明します。

「waku」は前回もでてきたように、青い四角のこと。でも今回は枠みたいになってる。そう、この「waku」の中にさらに4つ<div>があるのだ。<div>の中にさらに<div>。

HTMLを見てみると、「head」「left」「right」「foot」の順番に<div>されている。

ブラウザで表示したページをみてほしい。<div>は基本的に左上から順番に表示される。

DIVでの配置方法

この図のように、それぞれスタイルシートで定義された「waku」「head」「left」「right」「foot」がそれぞれこの順番で左上から配置されているのだ。

PageTop TOP  PageTop NEXT
Copyright (C) 2010 おさるでもわかる・超簡単ホームページ作成講座 , All rights reserved.