初心者の館

ステップ3〜マークアップする〜

ステップ3ではHTMLタグを使ってマークアップをしていきます。
今回はDIVタグを使ってボックス化もまとめてやってしまいます。
コピペでもいいですが、できれば自分で意味を考えながらマークアップしてみてください。


HTMLでマークアップ

次の原稿を参考にやってみましょう。(コピーして貼り付けてもいいです)
DIVタグのIDは間違えないように気をつけてください(赤字の部分です)

<table id="structure">
<!-- ********* ヘッド ******** -->
<tr>
<td colspan="2" 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">
</td>
</tr>

<!-- ********* メイン ******** -->
<tr>
<!--======メイン左====== -->
<td 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>

</td>

<!--======メイン右====== -->
<td 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>

</td>
</tr>

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

ポイント

ここでのポイントは、

  1. なるべく正しくHTMLを使うこと
  2. DIVタグを有効活用すること

の2つです。
ハイブリッドデザインの特徴は、テーブルデザインに比べて正しくHTMLを使えるところにあります。
今までtdタグなどでやっていたところを、DIVやその他のタグを上手く使ってやるのがポイントです。

確認

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

ステップ3終了時点

余白などがいまいちですが、読めるページになりました。
レイアウトもほぼ出来上がっているのが分かると思います。
後はスタイルシートでデコレーションしていくだけですね。


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


一覧へ戻る


Last Modified 2004-10-27 © きくちゃん 2004 - All Rights Reserved