スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

前後の記事

最近の記事

管理者にだけ表示を許可する

テーブル応用編~幅固定2カラムレイアウト~

HTMLで2カラム(2列構成)を学んでみましょう。
なお、デザインをHTMLのみのテーブルで揃えるのには賛否両論の意見があります。スタイルシートを使った方がいいという事です。
その理由の1つとして「デザインが崩れる」というものがあります。しかしこれは、きちんとしたテーブルを組めば殆ど解決できる事です。私も、レイアウトについてはまだまだ勉強中で、ここで挙げる2カラムレイアウトの例が完全なもの、というわけではありません。むしろもっと分かりやすいく、かつ優れた方法があるはずですが、この記事では、あくまでも一体どんな構成で成り立っているのかを説明します。 それでは早速、2カラムの例を挙げてみましょう。
ブログタイトル
メニュー
メニュー1
メニュ-2
メニュー3
メニュー4
メニュ-5
エントリー
本文
これは全てテーブルで作成されています。
上のものは、全てテーブルで構成されています。
実はここには3つのテーブルが使われています。まずは全体のテーブル、メニュー部分にテーブル、そしてエントリー部分にもテーブルを組んでいます。
ソースをご覧下さい。番号は、ソース下でそれぞれを説明するのに使います。

<!--▼【1】▼-->
<table border = "1" cellspacing = "0" cellpadding = "0" width = "400">
<!--▼【2】▼-->
<tr><td bgcolor = "red" width = "400" colspan = "2"><font color = "white">ブログタイトル</font></td></tr>
<!--▲【2】▲-->
<!--▼【3】▼-->
<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">メニュー1<br>メニュ-2<BR>メニュー3<br>メニュー4<BR>メニュ-5</td></tr>
</table>
<!--▲【3】▲-->
<!--▼【4】▼-->
<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>
<!--▲【4】▲-->
</table>
<!--▲【1】▲-->

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

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

前後の記事

最近の記事

トラックバック

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


コメント

管理者にだけ表示を許可する
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。