テーブルを使わない分割方法・・・2分割にする
スタイルシートを使うとテーブルを使わなくてもページの分割ができます。
実施例
この文章は float:left; width:48%; の指示をすることにより、左側に表示されるように書いています。全体の48%の幅で
左に寄って表示されています。真中より少し左よりになります。
この文章は margin-left:52%; の指示をすることにより、左に52%のスペースを空けるように書いています。
この空きスペースには全体の48%幅で最初の文章が表示されていますので、中央部に4%分の空白が入ることになります。
float:left; width:数値; と margin-left:数値;を使う
- <DIV>〜</DIV>タグを二つ使い、文章を二つのブロックに分けます。
- 左側に持ってくる文章は幅を指定します。
- それをfloat:left; の指定で左側に表示させます。
- 右に持ってくる文章はmargin-left:数値;の指示を入れ左側に空間を入れます。
- この空間の幅指示は、左側に持ってくる文章の幅より大きくします。
- float 指示を使ったときは、最後に<BR clear="all">の指示を追加しておきます。
この指示以降の文章は、回り込まないようになります。
上の実施例は次のような表記になっています。
記入例-1
<DIV style=" width: 48%; float:left;">
この文章は float:left; width:48%; の指示をすることにより、左側に表示されるように書いています。全体の48%の幅で
左に寄って表示されています。真中より少し左よりになります。
</DIV>
<DIV style=" margin-left:52%;">
この文章は margin-left:52%; の指示をすることにより、左に52%のスペースを空けるように書いています。
この空きスペースには全体の48%幅で最初の文章が表示されていますので、中央部に4%分の空白が入ることになります。
</DIV>
記入例-2
HEADタグの間に次の指定をします
<Style type="text/css">
<!--
.left{width: 48%; float:left; }
.right{ margin-left:52%;}
-->
</STYLE>
そして本文を次のように書きます
<DIV class=" left">
この文章は float:left; width:48%; の指示をすることにより、左側に表示されるように書いています。全体の48%の幅で
左に寄って表示されています。真中より少し左よりになります。
</DIV>
<DIV class=" right">
この文章は margin-left:52%; の指示をすることにより、左に52%のスペースを空けるように書いています。
この空きスペースには全体の48%幅で最初の文章が表示されていますので、中央部に4%分の空白が入ることになります。
</DIV>
TOPページに戻る