-
いよいよHTMLマークアップに入ります。
レイアウト構成は参照画像で進めていきます。
一応わかりやすくCSSセレクタ名と領域を色分けしております。
文書宣言はXHTML 1.0 Transitional
文字コードUTF-8。
UTF-8で記述した理由は多言語対応なのでXML宣言が省略できるからです。
もちろんShift_jisやEUC-JPでもOKです。
HTMLソースはbody区間のみ記述しております。
-
<div id="container" class="index">
<div id="header">
<h1><a href="#">D-WEB03*</a></h1>
</div>
<div id="globalNv">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">BBS</a></li>
<li><a href="#">DIARY</a></li>
<li><a href="#">LINK</a></li>
<li><a href="#">MAIL</a></li>
</ul>
</div>
<div id="content">
<div id="sideTopics">
<dl>
<dt>INFORMATION</dt>
<dd>5.21デザインフェスタに出展!</dd>
</dl>
<dl>
<dt>WEBMASTER</dt>
<dd>HISABO♂</dd>
<dd>最近オタク化して益々変態度パワーアップ気味。</dd>
<dd><img src="img/photo01.jpg" alt="HISABO" /></dd>
</dl>
<dl>
<dt>RECOMMEND</dt>
<dd><a href="http://www.xtrec.com/" target="_blank">★WEB素材とクリエーター作品展示の「XTREC」</a></dd>
<dd><a href="http://www.xtrock.com/" target="_blank">★各種デザイン・WEB制作から写真撮影の「XTROCK」</a></dd>
</dl>
<dl>
<dt>その他</dt>
<dd>アソシエイトなど貼り付けるのもよし</dd>
</dl>
</div>
<div id="contentBox">
<h2>当サイトは○△です。</h2>
<p>当サイトの文章。画像等の無断転用は禁止しております。</p>
<div id="updateBox">
<h3>更新履歴</h3>
<dl>
<dt>07.06.12</dt><dd>サイトOPEN!</dd>
<dt>07.06.11</dt><dd>サイトデザイン完成!</dd>
<dt>07.06.11</dt><dd>サイトデザイン制作開始!</dd>
</dl>
</div>
<p>このページはテーブルタグを使わず全てスタイルシートでレイアウトしてます。<br />
初心者には不向きですのでお気をつけください。</p>
<h3>レイアウト詳細</h3>
<p>2カラム式で幅700px。<br />
このセレクタで<h3>タグを使うと上のようにアニメーションGIFが自動挿入されます。<br />
XTRECのMATERIAL-GRAPHICコーナーで別カラーも配布しておりますので合わせてどうぞ。</p>
<p>このテンプレートはW3Cのマークアップテスト+CSSチェック両方にて合格しております。</p>
</div>
</div>
<div id="footer">
<address>© SITENAME</address>
<p>Designed by <a href="http://www.xtrec.com/" target="_blank">XTREC</a></p>
</div>
</div>
