NoGoodの日記: What You See Is What You Get!?
現在 HTML 3.2 準拠な構造のコンテンツを HTML 4.0 準拠にして、CSS も併用して表現内容と表現手段を切り分けたい。
現状では、TABLE タグ(と BR タグ)でレイアウトするという邪な(というか推奨されない)構造なので、以下のように記述している。
<TABLE>
<TR><TD>
<TD>
<TD>
<TR><TD>
<TD>
<TD>
</TABLE>
すると以下のような表示になる。
┌───┐
│□□□│
├───┤
│□□□│
└───┘
これをとりあえず全て DIV タグに変換して以下のように記述する。
<DIV ID="exchange_table">
<DIV ID="column_left">
<DIV ID="raw_left_top">
</DIV ID="raw_left_top">
<DIV ID="raw_left_bottom">
</DIV ID="raw_left_bottom">
</DIV ID="column_left">
<DIV ID="column_center">
<DIV ID="raw_center_top">
</DIV ID="raw_center_top">
<DIV ID="raw_center_bottom">
</DIV ID="raw_center_bottom">
</DIV ID="column_center">
<DIV ID="column_right">
<DIV ID="raw_right_top">
</DIV ID="raw_right_top">
<DIV ID="raw_right_bottom">
</DIV ID="raw_right_bottom">
</DIV ID="column_right">
</DIV ID="exchange_table">
この状態では以下のような表示になる。 w3m ではこの状態で表示される。
┌───┐
│┌─┐│
││□││
││□││
│└─┘│
│┌─┐│
││□││
││□││
│└─┘│
│┌─┐│
││□││
││□││
│└─┘│
└───┘
ここで、column_left と column_center に STYLE を付加し、以下のように記述する。
<DIV ID="exchange_table">
<DIV ID="column_left" STYLE="float: left;">
<DIV ID="raw_left_top">
</DIV ID="raw_left_top">
<DIV ID="raw_left_bottom">
</DIV ID="raw_left_bottom">
</DIV ID="column_left">
<DIV ID="column_center" STYLE="float: left;">
<DIV ID="raw_center_top">
</DIV ID="raw_center_top">
<DIV ID="raw_center_bottom">
</DIV ID="raw_center_bottom">
</DIV ID="column_center">
<DIV ID="column_right">
<DIV ID="raw_right_top">
</DIV ID="raw_right_top">
<DIV ID="raw_right_bottom">
</DIV ID="raw_right_bottom">
</DIV ID="column_right">
</DIV ID="exchange_table">
このようにすることで HTML 3.2 において TABLE タグを用いた場合とほぼ同様の結果が得られる。以下のようになる。
┌─────────┐
│┌─┐┌─┐┌─┐│
││□││□││□││
││□││□││□││
│└─┘└─┘└─┘│
└─────────┘
実際には HEAD 内で CLASS を定義するか CSS で外部ファイル化する(ハズだがまだ確認してない)。
んで BR タグの代わりも全部 DIV でくくると終わり(ぉ
長すぎるっちゅうねん。もっとイイ方法を考えよう。
ていうか XHTML に飛び級するか。って何も知らんが。
What You See Is What You Get!? More ログイン