正しいhtmlによるサイトの構築2

2008年7月24日

CSSによるレイアウトとSEOのイメージ

具体的なhtml(xhtml)とCSS(スタイルシート)の勉強は本を読んでいただくとして、


CSSによるレイアウトとSEOのイメージを簡単にご紹介します。

CSSによるレイアウト
CSSによるレイアウト

こんな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 {
   〜フッター部を定義〜
  }
このエントリーのトラックバックURL: http://www.seo-motto.com/mtos/mt-tb.cgi/90

コメント

SEOもっと!のフィードRSSリーダーで購読する なう

 SEOもっと!のはてなブックマーク


有料ディレクトリ研究・5サービスを比較
サイトを検索
アクセスランキング
    loading

SEO Topics(最新6件)
SEO Topics(カテゴリ)
SEO Topics(アーカイブ)
SEO 気まぐれ連載
SEOもっと!について
あわせてどうぞ!
  • あわせて読みたいブログパーツ