初心者の館

テーブルタグを除去する1

さて、「テーブルタグを使わなくても複雑なレイアウトが組める」と聞くと「ホント?」 って思う人も多いのではないでしょうか?
これは本当です! ためしにLV2で書いたソースからテーブルタグを除去して同じデザインを組んでみましょう。


テーブルタグを除去

LV2で書いたソースからテーブルタグを除去します。
除去したソースは下のようになります。

<!-- ********* ヘッド ******** -->
<IMG src="./img/logo.gif" alt="WEB工房きくちゃん" width="150" height="50">
<IMG src="./img/catch.gif" alt="はじめましょ!CSSでWEBデザイン" width="497" height="50">

<!-- ********* メイン ******** -->
<!--======メイン左====== -->
<!-- イメージ画像 -->
<DIV id="img">
<IMG src="./img/img.jpg" alt="ようこそ" width="290" height="150">
</DIV>

<!-- 更新履歴 -->
<DIV id="new">
<h2>What's New !</h2>
<ul>
<li>9/30 初心者の館基礎知識編を刷新</li>
<li>9/26 デザイン論1つ、CSSテク1つ追加</li>
</ul>
</DIV>
<!-- ぼやっきー -->
<DIV id="mes">
<h2>管理人のぼやき</h2>
<p>
制作実習編LV2ではテーブルタグを使って、
ハイブリッドデザインに挑戦。<BR>
ハイブリッドデザインは、レイアウトが簡単にできる上に
デザインも崩れにくく、スタイルシートをほとんど使用しない
テーブルデザインよりも更新のしやすさが数段上です。<BR>
スタイルシートの使い方に慣れてきたら、
このタイプのデザインに挑戦することをおすすめします。
</p>
</DIV>

<!--======メイン右====== -->
<!-- 初心者の館 -->
<DIV id="beginer">
<h2>初心者の館</h2>
<p>
スタイルシートでデザインされたページに興味のある方へ贈るページ。
CSSでページをデザインしていく工程や知っておきたい知識紹介しています。
ここを読めばあなたも「脱・CSS初心者」
</p>
<ul>
<li><A href="#">一覧 現在??項目</A></li>
<li>最新のデーター</li>
<li><A href="#">制作実習編LV1</A></li>
<li><A href="#">制作実習編LV2</A></li>
</ul>
</DIV>

<!-- 私的デザイン論 -->
<DIV id="design">
<h2>私的デザイン論</h2>
<p>
デザインに関するよもやま話がいろいろ。
もっとカッコいいページを作りたいっ!という人が見るとヒントがあるかもね。
</p>
<ul>
<li><A href="#">一覧 現在??項目</A>
<li>最新のデーター</li>
<li><A href="#">見た目か?中身か?</A></li>
<li><A href="#">フォント de 素材</A></li>
</ul>
</DIV>

<!-- CSSテクニック -->
<DIV id="css-tec">
<h2>スタイルシートテクニック</h2>
<p>
スタイルシートでどんなことができるのかをあれこれ試した成果です。
ワンランク上の使い方を知りたい方はぜひご覧あれ。
</p>
<ul>
<li><A href="#">一覧 現在??項目</A></li>
<li>最新のデーター</li>
<li><A href="#">四角を描く</A></li>
<li><A href="#">ulタグでメニュー</A></li>
</ul>
</DIV>

<!-- ********* フット ******** -->
<!-- 著作権 -->
<address>
©きくちゃん 2004 - All Rights Reserved mail:**********<BR>
スタイルシートをフル活用しているので、一部の環境では表示が崩れてしまいます。
</address>

ポイント

ここでのポイントは、

  1. テーブル関連のタグだけを消す

の1つです。

確認

できたらブラウザーでどのように表示されるか見てみましょう。

ステップ6終了時点
テーブルタグ除去完了

見比べてもらえれば分かりますが、テーブルタグを除去するとレイアウトは崩れてしまいます。 当然といえば当然ですが、読めないほどではありませんね。
これはハイブリッドデザインで作ってきたからです。 もし、完全テーブルデザインであったなら、もっと崩れてしまうでしょう。
ハイブリッドデザインができるようになることは、CSSデザインへの第一歩なのです。

次回はレイアウトをしやすいようにボックスを追加します。


←あとがきへBACK : テーブルタグを除去する2へGO→


一覧へ戻る


Last Modified 2004-12-24 © きくちゃん 2004 - All Rights Reserved