ステップ２〜HTMLでマークアップ〜
ステップ2ではHTMLタグを使って原稿に意味づけをしていきます。
コピペでもいいですが、できれば自分で意味を考えながらマークアップしてみてください。
マークアップする
マークアップは次のようにやります。
次の原稿を参考にやってみましょう。（コピーして貼り付けてもいいです）
<IMG src="./img/logo.gif" alt="WEB工房きくちゃん" width="150" height="50">
<h1>はじめましょ！CSSでWEBデザイン。ヒントとテクニックを一挙公開</h1>
<!-- *************メイン ****************-->
<!-- 更新履歴 -->
<h2>What's New !</h2>
<ul>
<li>9/30 初心者の館基礎知識編を刷新</li>
<li>9/26 デザイン論１つ、CSSテク１つ追加</li>
</ul>
<!-- 初心者の館 -->
<h2>初心者の館</h2>
<p>
スタイルシートでデザインされたページに興味のある方へ贈るページ。
CSSでページをデザインしていく工程や知っておきたい知識紹介しています。
ここを読めばあなたも「脱・CSS初心者」
</p>
<ul>
<li><A href="#">一覧 現在??項目</A></li>
</ul>
<!-- 私的デザイン論 -->
<h2>私的デザイン論</h2>
<p>
デザインに関するよもやま話がいろいろ。
もっとカッコいいページを作りたいっ！という人が見るとヒントがあるかもね。
</p>
<ul>
<li><A href="#">一覧 現在??項目</A>
<li>最新のデーター</li>
<li><A href="#">見た目か？中身か？</A></li>
<li><A href="#">フォント de 素材</A></li>
</ul>
<!-- 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>
<!-- 著作権 -->
<address>
©きくちゃん 2004 - All Rights Reserved mail:**********
</address>
ポイント
ここでのポイントは、
- タグの意味を確認すること
- Aタグの位置に気をつけること
の２つです。
今回使ったタグの意味は、見出しレベル１、２と、段落、リスト、リンク、著作権
があります。どれがどのタグか判りますよね？
確認
できたらブラウザーでどのように表示されるか見てみましょう
読みやすくなりましたね。
意味に合わせてきちんとマークアップすれば、特別なことをしなくても
十分読めるページになります。
次はDIVタグを使って情報のまとまりごとにボックスを作ります。