ＨＴＭＬで２カラム（２列構成）を学んでみましょう。
なお、デザインをＨＴＭＬのみのテーブルで揃えるのには賛否両論の意見があります。スタイルシートを使った方がいいという事です。
その理由の１つとして「デザインが崩れる」というものがあります。しかしこれは、きちんとしたテーブルを組めば殆ど解決できる事です。私も、レイアウトについてはまだまだ勉強中で、ここで挙げる２カラムレイアウトの例が完全なもの、というわけではありません。むしろもっと分かりやすいく、かつ優れた方法があるはずですが、この記事では、あくまでも一体どんな構成で成り立っているのかを説明します。 それでは早速、２カラムの例を挙げてみましょう。

ブログタイトル
メニュー メニュー１ メニュ−２ メニュー３ メニュー４ メニュ−５	エントリー 本文 これは全てテーブルで作成されています。

上のものは、全てテーブルで構成されています。
実はここには３つのテーブルが使われています。まずは全体のテーブル、メニュー部分にテーブル、そしてエントリー部分にもテーブルを組んでいます。
ソースをご覧下さい。番号は、ソース下でそれぞれを説明するのに使います。

<!--▼【１】▼-->
<table border = "1" cellspacing = "0" cellpadding = "0" width = "400">
<!--▼【２】▼-->
<tr><td bgcolor = "red" width = "400" colspan = "2"><font color = "white">ブログタイトル</font></td></tr>
<!--▲【２】▲-->
<!--▼【３】▼-->
<tr><td width = "100" valign = "top">
<table border = "1" cellspacing = "0"width = "100">
<TR><TD bgcolor = "blue" valign = "top"><font color = "#FFFFFF">メニュー</tD></tr>
<TR><TD valign = "top">メニュー１<br>メニュ−２<BR>メニュー３<br>メニュー４<BR>メニュ−５</td></tr>
</table>
<!--▲【３】▲-->
<!--▼【４】▼-->
<td width = "300" valign = "top">
<table border = "1" cellspacing = "0"width = "300">
<tr><td bgcolor = "yellow" valign = "top">エントリー</td></tr>
<tr><td valign = "top">本文<br>これは全てテーブルで作成されています。</td></tr>
</table>
<!--▲【４】▲-->
</table>
<!--▲【１】▲-->

【１】テーブル全体の構成
テーブル全体の構成をしています。widthを400pxに固定しています。テンプレートで幅固定する時は大体、800pxにされています。
・テーブル幅の解説ページ
【２】ブログタイトル部分
ブログタイトル（赤）の部分です。２つのセルを連結させるために、colspanを"２"にしています。
・colspanの解説ページ
【３】左メニュー部分
ここでテーブルの中に１つテーブルを入れ子にしています。
valign = "top"は、セル内の内容を一番上に持ってくる、という意味です。メニューとエントリーの上部を揃える為にあります。
【４】エントリー部分
全体幅（400）＝　左メニュー幅（100）＋エントリー部分（300）

大体構成は掴めたでしょうか。わざわざテーブルを入れ子にしたのですが、実はしなくても出来ます。入れ子にすると確かに見た目、分かりにくいです。ただ、自由度は増えると思いますので、今回は入れ子にして説明しました。

前後の記事

最近の記事

トラックバック

この記事へのトラックバックURL：
http://fc2blogshop.blog13.fc2.com/tb.php/210-1e727823

コメント