■ページデザインに応用する
テーブルの代わりにposition:absolute;を使ってページデザインする方法。
大きなページデザインとしても使用できます。
例えば画面を縦に3分割する場合、普通はtableタグを使います。画面を横に3分割する場合も同様です。
スタイルシートを使うと簡単な記述で同じような自在にレイアウトを設定することができます。
全てのページに同じページレイアウトを利用する時は外部スタイルシートを利用します。
外部スタイルシートで指定しておくとページレイアウトを変更する時"xxxxx.css"の値を修正するだけで
一括して変更する事が可能です。
(例)画面を300pxずつ縦に3分割する
<div style=" position: absolute;"></div>
<div style=" position: absolute; top: 300px;"></div>
<div style=" position: absolute; top: 600px;"></div>
(例)画面を300pxずつ横に3分割する
<div style=" position: absolute;"></div>
<div style=" position: absolute; left: 300px;"></div>
<div style=" position: absolute; left: 600px;"></div>
(例)上記の例を外部スタイルシートで指定する
・cssファイルの記述
.aaa { position: absolute;}
.bbb { position: absolute; left: 300px;}
.ccc { position: absolute; left: 600px;}
・HTMLソース
<div class="aaa"></div>
<div class="bbb"></div>
<div class="ccc"></div>