ページの設計

例　一般的なHTML構造

一般的なHTML構造

<div id="page">
  <div id="header">
  </div>
  <div id="block">
    <div id="contents">
    </div>
    <div id="menu">
    </div>
  </div>
  <div id="footer">
  </div>
</div>

この例ではコンテンツとメニューは二段組を考慮して#blockにしてあります。

コンテンツの最下部にフッターを表示したい場合には、#contents中に#footerを入れた構造にしても良いです。

例　見出しと段落の組が３つある文章

見出しと段落の組が３つある文章

<div id="contents">
  <h1> </h1>
  <p> </p>
  <div id="h2_block">
    <div class="h2" id="h2_1">
      <h2> </h2>
      <p> </p>
    </div>
    <div class="h2" id="h2_2">
      <h2> </h2>
      <p> </p>
    </div>
  </div>
</div>

２つのh2クラスは識別用のIDを付け、二段組を考慮して#h2_blockにしています。

各ブロックのスタイル設計と組み合わせ

セレクタで#contentsや#menuから始まるようなスタイルの指定をしていれば、互いのスタイルが干渉することはない筈です。

同様にして、ヘッダーとフッターにもスタイルをつけます。

各ブロックの配置

ページレイアウトを考え、各ブロックをpositionやfloatを使って配置していきます。よくある２段組などは配置の項目で学習したスタイルを参考にしてください。

メニューバーの配置は、メニューバーを置くスペースをマージンなどで空けておき、絶対配置で上に持ってきます。

ページのスタイル

仕上げにページそのものにスタイルをつけます。#pageやbody要素に幅、背景色、背景画像といったスタイルを指定します。

body {
    background-color:#ccccff;
}
#page {
    margin:0 auto;
    width:950px;
    background-color:#ffffff;
}

この例では固定幅にして、中央に寄せています。

特定ページのみの指定

サイト共通スタイルを使用した際、特定のページのみ設定を変えたい場合があります。この場合、下記のような方法があります。

• ページ固有のクラスやIDをbody要素につけ、セレクタで限定して記述する
• 異なる部分を別のスタイルファイルかstyle要素に記述する

変更箇所が少ない場合には、スタイルファイルが一つで済むため、前者が簡単です。変更箇所が多いと記述箇所を探すのが大変になるため、後者が良い場合もあります。

例 IDによる特定ページの指定

#en p { color:red; }
#jp p { color:blue; }