初心者の館

ステップ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のポイントは、

  1. テーブルは枠を作ることに徹すること

の2つです。

tdにIDを振ればDIVが減らせるんじゃない?などと考えてはいけません。後で後悔します。 テーブルは余白がうまく作れない欠点があります。
逆ハイブリッドデザインにおいては、テーブルはあくまで枠に徹さねばなりません。

確認

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

ステップ1終了時点

分かりやすいようにボーダープロパティを設定してあります。
横幅のバランスが取れてませんが気にすることはありません。


←前のステップへBACK : 次のステップへGO→


一覧へ戻る


Last Modified 2005-02-21 © きくちゃん 2004 - All Rights Reserved