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

具体的な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 {
   〜フッター部を定義〜
  }

ブログからCMSまで幅広く対応できる「Movable Type」
このエントリーのトラックバックURL: http://www.seo-motto.com/mt/mt-tb.cgi/438
コメントを投稿





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

昨日のランキング
  1. 「ブランドガードSEO」のページがnot found
  2. SEOで一番難しいのはキーワード選びだと思う
  3. 住太陽さんのブログを端から読んでみた(原点回帰)
  4. 無料SEOツール ライバルサイトチェッカーver.β
  5. SEO業者・サービス比較ってどうなんでしょうか?
  6. Yahoo!・Google サイトマップ作成ツール サイトマップジェネレーター ver.β
  7. 無料で登録できる検索エンジン
  8. Googleに酔ってきた(爪弾き状態に戻りました・・・)
  9. SEO業者の方も大変ですね(「ブランドガードSEO」だって)
  10. 正しいhtmlによるサイトの構築1
SEO Topics(最新)
SEO Topics(アーカイブ)
SEO 気まぐれ連載