具体的なhtml(xhtml)とCSS(スタイルシート)の勉強は本を読んでいただくとして、
CSSによるレイアウトとSEOのイメージを簡単にご紹介します。
こんな2段組のレイアウトでサイトを構築したい場合は、以下のようなイメージになります。
html(xhtml)
<html>
<!-- ヘッダー -->
<div id="
header">
<h1>サイトのタイトル</h1> ← ※h1はヘッダーにタイトルとして入れる
</div>
<!-- 2段組レイアウト -->
<div id="
container">
<!-- コンテンツ -->
<div id="
contents">
<h2>大見出し</h2> ← ※h2はページの大見出しに
<p>コンテンツ</p>
<hx>中小見出し</hx> ← ※hxタグはh1〜h6まで階層的に入れる
<p>コンテンツ</p>
</div>
<!-- サイド -->
<div id="
side">
メニュー(ナビゲーション)
</div>
</div>
<!-- フッター -->
<div id="
footer">
フッター
</div>
</html>
CSS(外部ファイルにします)
div#header {
〜ヘッダー部を定義〜
}
div#container {
〜コンテナ部を定義〜
}
div#contents {
〜コンテンツ部を定義〜
}
div#contents {
〜サイド部を定義〜
}
div#footer {
〜フッター部を定義〜
}
2008年07月24日 14:02