ステップ５(1)〜メニュー部分の作成１〜
最も重要なメニュー部分の作成へ入ります。 ちょっと長くなるので3回に分けて行います。
HTMLを書く
次の原稿を参考にやってみましょう。（コピーして貼り付けてもいいです）
ちょっと入れ子が複雑になっているので気をつけてください。
<!-- *************メイン ****************-->
<DIV id="main">
<!-- イントロ -->
<DIV id="intro">
〜略〜
</DIV>
<!-- メニュー -->
<DIV id="content">
<DIV class="box">
<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>
<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>
</DIV>
<DIV class="box">
<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>
<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>
</DIV>
</DIV>
</DIV>
ポイント
ここでのポイントは、
- <DIV class="box">を作ったところ
の１つです。
今回はマークアップしただけなので分かりませんが、次のステップでCSSを書くと、その重要さが良く分かります。
今回目指すレイアウトのように上段・下段に分けられる場合は上段・下段でそれぞれボックス化しておいたほうがいいです。
確認
できたらindex.htmlをブラウザーでどのように表示されるか見てみましょう。
次はCSSを書いてデザインを整えます。。