ホーム › スタイルシートを使う

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

adminさんのユーザアバター
投稿者：admin 投稿日時：2008/11/10（月） 21:55

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

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

【例１】

<div id="base">

<div id="head">
</div>
<div id="main">
<div
id="left">スタイルシートには「float:left;」
</div> 		<div
id="right">スタイルシートには「float:right;」
</div>
<div id="foot">
</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="base">

<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;}

関連書籍



HTML+CSSコーディング　ベストプラクティス　高速かつ堅牢なコードを効率よく書くために
著者: こもりまさあき、西畑一馬、浜俊太朗 　 出版年月: 2010-08-25 　
定価: ￥ 2,625 (新品)
iPhoneアプリケーション開発ガイド　―HTML+CSS+JavaScript による開発手法
著者: Jonathan Stark 　 出版年月: 2010-08-07 　
定価: ￥ 1,995 (新品)
全部無料でつくるはじめてのホームページ & HTML for Windows 7/Vista/XP
著者: 浅岡 省一 　 出版年月: 2010-07-30 　
定価: ￥ 1,869 (新品)
日経ソフトウエア 2010年 09月号 [雑誌]
出版年月: 2010-07-24 　
定価: ￥ 1,180 (新品), ￥ 1,130 (中古)
Dreamweaver CS5 HTML&CSS Webデザイナー養成講座
著者: 村谷 圭一 　 出版年月: 2010-07 　
定価: ￥ 2,814 (新品)
No votes yet