ステップ３〜ボックスで囲っていこう〜
ステップ３ではDIVタグを使ってボックスを作っていきます。
コピペでもいいですが、できれば自分で意味を考えながらマークアップしてみてください。
ボックスをつくる
DIVタグを次のように加えます。
次の原稿を参考にやってみましょう。（コピーして貼り付けてもいいです）
スタイルシートを使うためにIDも設定します。忘れずにやってくださいね。
赤字の部分が新しく加えたところです。
<div id="head">
<IMG src="./img/logo.gif" alt="WEB工房きくちゃん" width="150" height="50">
<h1>はじめましょ！CSSでWEBデザイン。ヒントとテクニックを一挙公開</h1>
</div>
<!-- *************メイン ****************-->
<!-- 更新履歴 -->
<div id="news">
<h2>What's New !</h2>
<ul>
<li>9/30 初心者の館基礎知識編を刷新</li>
<li>9/26 デザイン論１つ、CSSテク１つ追加</li>
</ul>
</div>
<!-- 初心者の館 -->
<div id="beginer">
<h2>初心者の館</h2>
<p>
スタイルシートでデザインされたページに興味のある方へ贈るページ。
CSSでページをデザインしていく工程や知っておきたい知識紹介しています。
ここを読めばあなたも「脱・CSS初心者」
</p>
<ul>
<li><A href="#">一覧 現在??項目</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">
<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:**********
</address>
ポイント
ここでのポイントは、
- IDをつけておくこと
- 著作権の部分にはDIVタグをつけないこと
の２つです。
IDはあとでスタイルシートを利用するために設定しました。
著作権の部分はまとめるものが無いのでつける必要がありません。
確認
できたらブラウザーでどのように表示されるか見てみましょう
何も変わってないですね。
DIVタグはスタイルシートを使わない限り見た目に影響は与えませんが、
スタイルシートを使うときには必須のタグです。
DIVタグの数はレイアウトの複雑さによって増減します。
必要に応じて増やしたり、減らしたりできるようになりたいですね。
つぎから、いよいよスタイルシートを使います。