初心者の館

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

テーブルタグを除去したら、今度はレイアウト用のボックスを新たに追加します。 イメージとしては
レイアウト
このように追加します。tableとtdタグをDIVタグで置き換えた感じです。


ボックスをつくる

赤字の部分を新たに追加しました。

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

<!-- ********* メイン ******** -->
<!--======メイン左====== -->
<DIV id="main-left">
<!-- イメージ画像 -->
<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>

<!--======メイン右====== -->
<DIV id="main-right">
<!-- 初心者の館 -->
<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>

</DIV>

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

</DIV>

ポイント

ここでのポイントは、

  1. 閉じ忘れや構造が変にならないように気をつける

の1つです。

確認

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

ボックスの追加完了

スタイルシートを書いていないので、変化はありません。

次回はスタイルシートを書いて見た目を整えます。


←テーブルタグを除去する1へBACK : テーブルタグを除去する3へGO→


一覧へ戻る


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