テーブルを使わない分割方法・・・3分割以上 



スタイルシートを使うとテーブルを使わなくてもページの分割ができます。
4分割の実施例
この文章は一番左に表示されるように書いています。 全幅24%で一番左に表示されています。
この文章は左から二番目に表示されます。 おおよそ全幅の24%で表示されています。
この文章は左から三番目に表示されます。 おおよそ全幅の24%で表示されています。
この文章は一番右に表示されます。 おおよそ全幅の24%で表示されています。

float:left; width:数値;  と  float:right; width:数値;を使う
上の実施例は次のような表記になっています。
記入例-1
<DIV style=" width: 24%; float:left; "> この文章は一番左に表示されるように書いています。 全幅24%で一番左に表示されています。 </DIV>
<DIV style=" width: 74%; float:right;"> <DIV style=" width: 33%; float:left; "> この文章は左から二番目に表示されます。 おおよそ全幅の24%で表示されています。 </DIV>
<DIV style=" width: 64%; float:right;"> <DIV style=" width: 48%; float:left; "> この文章は左から三番目に表示されます。 おおよそ全幅の24%で表示されています。 </DIV>
<DIV style=" width: 48%; float:right; "> この文章は一番右に表示されます。 おおよそ全幅の24%で表示されています。 </DIV></DIV></DIV>

記入例-2
HEADタグの間に次の指定をします
<Style type="text/css">
<!--
.aa{width: 24%; float:left; }
.bb{width: 74%; float:right;}
.cc{width: 33%; float:left; }
.dd{width: 64%; float:right;}
.ee{width: 47%; float:left; }
.ff{width: 47%; float:right;}
-->
</STYLE>
そして本文を次のように書きます
<DIV class=" aa"> この文章は一番左に表示されるように書いています。 全幅24%で一番左に表示されています。 </DIV>
<DIV class="bb"><DIV class="cc"> この文章は左から二番目に表示されます。 おおよそ全幅の24%で表示されています。 </DIV>
<DIV class="dd"><DIV class="ee"> この文章は左から三番目に表示されます。 おおよそ全幅の24%で表示されています。 </DIV>
<DIV class="ff"> この文章は一番右に表示されます。 おおよそ全幅の24%で表示されています。 </DIV></DIV></DIV>

TOPページに戻る