ページの設計

CSSを用いたページの設計を学習します。

HTMLの構造

まずは、HTMLの構造を決めます。一般に、ヘッダー、コンテンツ、メニュー、フッターなどの構造を持ちます。SEO(Search Engine Optimization)では「重要なものほど前に書く」ため、コンテンツはメニューよりも先に書くのが良いとされています。また、ページ全体のブロックを用意して置く方がデザインをするのに便利です。

例 一般的な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を入れた構造にしても良いです。

さらに、各ブロック内にもHTML構造があります。ここでは、以前、制作の流れで紹介した見出しと段落の組が3つある文章を示します。

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

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

<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>

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

スタイル

ページ全体のスタイルは以下の手順で作成していきます。

  1. 各ブロックごとにスタイルを設定し、組み合わせます。
  2. 各ブロックを配置します。
  3. 必要に応じて各ブロックのスタイルを調整します。
  4. ページそのもののスタイルを作成します。

逆に、最初に各ブロックの大きさと配置を決めて、その範囲内で各ブロックのスタイルを設定する作り方もあります。

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

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

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

各ブロックの配置

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

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

ページのスタイル

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

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

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

複数クラス指定

HTMLのclass属性には、クラス名を複数並べて指定することができます。複数のクラス属性を使うことで、同じクラスでも異なった指定をすることが可能です。

例 複数クラス指定HTML

<p class="red border">あああ</p>

例 複数クラス指定CSS

p.red { color:red; }
p.border { border:solid 1px blue; }

例 複数クラス指定 結果

あああ

サイト共通スタイル

サイト全体で統一したレイアウトにしたい場合には、サイト内の各ページの要素の書き方を統一し、同じスタイルファイルを参照します。

スタイルファイルを一つにすることで、サイトのレイアウトを変更の際に、全ページ一度に変更することができます。これは、サイトデザインの変更作業を大幅に減らすことができ、効率的です。

特定ページのみの指定

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

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

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

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

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

課題

cssZenGardenの英語版・日本語版のサイトデザインをせよ。

  • HTMLファイルの変更は禁止する。style.cssのみを書き換えること。
  • #containerの幅は900pxで固定とする。閲覧者のブラウザ幅は1000px程度を想定すること。
  • CSS2.0に準拠したスタイルを使用すること。ブラウザ独自拡張は禁止とする。
  • 英語版・日本語版でデザインを一部変えること。全てを変える必要はない。
  • コメントを記述すること。コメントも採点対象とする。
  • 下記のファイルをダウンロードして展開して作業すること。必要な画像ファイルは展開したフォルダに入れておくこと。

最終課題cssZenGarden