<div>タグによるレイアウト構成

投稿者：admin 投稿日時：月, 11/10/2008 - 21:55

簡単に説明するとこんな感じで。
<div>～</div>は、箱を作るとイメージすると良いと思います。そして、その箱に新しい箱を、右に入れるとか、左に入れるとか考えながら入れ込んでいくのです。

（以下で使用する、idやclassの名称は、各自が任意に指定できます。）

【例１】

<div
id="left">スタイルシートには「float:left;」
</div>

<div
id="right">スタイルシートには「float:right;」
</div>

</div>

ＨＴＭＬの記述
<div id="base">
<div id="head">
   </div>
   <div id="main">
      <div id="left">
      </div>
      <div id="right">
      </div>
   </div>
<div id="foot">
</div>
</div>

スタイルシート#base{幅や高さを記述;}
#head{幅や高さを記述;}
#main{幅や高さを記述}
#left{幅や高さを記述;
float:left;}
#right{幅や高さを記述;
float:right;}
#foot{幅や高さを記述}

※　文章で言うと
○ボックスの「回り込み」をコントロールしている
という事になるようです。

もし、回り込みが、上手くいかないときは、回り込ませたくないボックスに関するスタイルシートの記述に「clear:both;」と加えれば良いかもしれません。ちなみに、この意味は、
○そのボックス以前で有効だった右の回り込みも、左の回り込みも無効にする
ということのようです。
　
なんせ、体で覚えてますので、このくらいのコメントが精一杯なのです・・・^_^;

【例２】

<div id="left">
スタイルシートには「float:left;」

<div
id="left1">スタイルシートには「float:left;」
</div>

<div
id="left2">スタイルシートには「float:right;」
</div>

</div>

<div id="right">
スタイルシートには「float:right;」
</div>

</div>

ＨＴＭＬの記述
<div id="base">
   <div id="left">
      <div id="left1">
      </div>
      <div id="left2">
      </div>
   </div>
<div id="right">
</div>
</div>

スタイルシート#base{幅や高さを記述;} #left{幅や高さを記述;
float:left;}
#left1{幅や高さを記述;
float:left;}
#left2{幅や高さを記述;
float:right;}
#right{幅や高さを記述;
float:right;}