ステップ1〜テーブルに原稿を流し込む〜
メインコンテンツ部分の作成をするところから始めます。開始前はこんな感じです。 ここでは2行2列のテーブルにマークアップした原稿を入れます。
HTMLを書く
HTMLソースにするとこんな感じです。
<!-- *************メイン ****************-->
<DIV id="main">
<DIV id="intro">
〜略〜
</DIV>
<table id="content">
<tr>
<td>
<DIV id="beginer">
<h2>初心者の館</h2>
<p>
スタイルシートでデザインされたページに興味のある方へ贈るページ。
CSSでページをデザインしていく工程や知っておきたい知識紹介しています。
ここを読めばあなたも「脱・CSS初心者」
</p>
<ul class="links">
<li><A href="#">一覧 現在??項目</A></li>
<li>最新のデーター</li>
<li><A href="#">制作実習編LV1</A></li>
<li><A href="#">制作実習編LV2</A></li>
</ul>
</DIV>
</td>
<td>
<DIV id="design">
<h2>私的デザイン論</h2>
<p>
デザインに関するよもやま話がいろいろ。
もっとカッコいいページを作りたいっ!という人が見るとヒントがあるかもね。
</p>
<ul class="links">
<li><A href="#">一覧 現在??項目</A>
<li>最新のデーター</li>
<li><A href="#">見た目か?中身か?</A></li>
<li><A href="#">フォント de 素材</A></li>
</ul>
</DIV>
</td>
</tr>
<tr>
<td>
<DIV id="csstec">
<h2>CSSテクニック</h2>
<p>
スタイルシートでどんなことができるのかをあれこれ試した成果です。
ワンランク上の使い方を知りたい方はぜひご覧あれ。
</p>
<ul class="links">
<li><A href="#">一覧 現在??項目</A></li>
<li>最新のデーター</li>
<li><A href="#">四角を描く</A></li>
<li><A href="#">ulタグでメニュー</A></li>
</ul>
</DIV>
</td>
<td>
<DIV id="gallery">
<h2>ギャラリー</h2>
<p>
あるテーマそってデザインした、サンプルデザインです。
一括ダウンロードもできるので、テンプレートにもなります。
</p>
<ul class="links">
<li><A href="#">一覧 現在??項目</A></li>
<li>最新のデーター</li>
<li><A href="#">ベーシック</A></li>
<li><A href="#">アクア</A></li>
</ul>
</DIV>
</td>
</tr>
</table>
注目して欲しいのはテーブル関連のタグです。一つのカテゴリーを一つのセルに納めます。
ポイント
HTMLのポイントは、
- テーブルは枠を作ることに徹すること
の2つです。
tdにIDを振ればDIVが減らせるんじゃない?などと考えてはいけません。後で後悔します。
テーブルは余白がうまく作れない欠点があります。
逆ハイブリッドデザインにおいては、テーブルはあくまで枠に徹さねばなりません。
確認
できたらブラウザーでどのように表示されるか見てみましょう
分かりやすいようにボーダープロパティを設定してあります。
横幅のバランスが取れてませんが気にすることはありません。