ページをレイアウトしてみよう　その3 CSSレイアウトに挑戦

矢野りん／ライター

2006.10.24

■CSSレイアウトに挑戦

では、CSSでページ全体のレイアウトを決定する簡単な手順を確認しよう。基本的な部分は画像の配置について解説した回と同じである。現場で制作を担当する人ならもちろん、作業を統括する役目であってもこれくらいは理解しておいたほうが便利なので、ぜひ通読してほしい。
最終的にはこのようなスタイルになる予定だ。

【図1】図のような体裁をCSSレイアウトで実現する。ページ上部にナビゲーションを配置した、メインビジュアルのあるスタイルだ

■ワイヤーフレームを作る

配色やグラフィックなど、ページの表現系を考える前に、全体をシンプルな矩形で分割して機能を割り当てるワイヤーフレームの作成を済ませておく。この設計図がCSS制作の土台だ。確認しながらソースコードを編集すると作業も進めやすい。ワイヤーフレーム上に反映させた矩形には、HTMLの部録レベルタグ用idにあたる記述（wrapperなど）も記載するとさらに便利だ。ちなみにidの記述方法は多くのサイトで共通の言い回しを使うことが多い。そうしておけばサイト制作に関わる人全体が「ああ、Gnavはグローバルナビゲーションのことだな」との共通認識を持てる。そうすればidからサイトの機能を読み取ることも出来てこれまた便利だ。ページの機能全体をまとめる（wrapper）などは、かなり広く普及している書き方である。

■HTMLの編集

次に設計図をHTML化する作業を行う。図の上から下の順番（出現順）で情報をタグ付けしていこう。ここからは実際ページに反映させる文字情報を入れていく。

---サンプルコードの抜粋----------

<body>

<p>鰐</p>

<ul>

<li>クロコダイル</li>

<li>アリゲーター</li>

</ul>

<p>熱帯から亜熱帯にかけて23種が分布し、河川、湖沼、海岸などに生息する。水場からあまりはなれることは無い。長い吻と扁平な長い尾を持つ。背面は角質化した丈夫な鱗で覆われており、目と鼻孔のみが水面上に露出するような配置になっている。</p>

<dl>

<dt>分類</dt>

<dd>界 : 動物界 Animalia</dd>

<dd>門 : 脊索動物門 Chordata</dd>

<dd>亜門 : 脊椎動物亜門 Vertebrata</dd>

<dd>綱 : 爬虫綱 Reptilia</dd>

<dd>目 : ワニ目 Crocodilia</dd>

</dl>

</body>

------------------------------

上記はまだidの指定を加えない文書構造だけのコードだ。ブラウザに表示するとできあがりの体裁とはかなりかけ離れている。

【図２】スタイルの無い状態でHTMLを表示すると、構造化した文字要素だけが確認できる

特にグローバルナビゲーションの部分は、横一列のはずがリストメニューの状態だ。しかしこれこそが文書構造を表す妥当な状態なので心配はいらない。ナビゲーション部分同様、分類の部分は（定義リスト）というタグを使い、分類というタイトルの下に５つのデータがぶら下がっていることを明示している点にも注目しよう。

■CSS作業の下地作り

さてここからCSS化を考えるわけだが、先にCSS化に配慮したHTMLの手直しから進めたい。構造化した文書を意図した場所に配置できるよう。idを添付してまとめていく作業だ。作業後は以下のようなコードになる。

---サンプルコードの抜粋----------

<body>

<div id="wrapper">

<p id="logo">鰐</p>

<ul id="Gnav">

<li>クロコダイル</li>

<li>アリゲーター</li>

</ul>

<div id="photo"> </div>

<p id="explanation">熱帯から亜熱帯にかけて23種が分布し、河川、湖沼、海岸などに生息する。水場からあまりはなれることは無い。長い吻と扁平な長い尾を持つ。背面は角質化した丈夫な鱗で覆われており、目と鼻孔のみが水面上に露出するような配置になっている。</p>

<dl id="classiification">

<dt>分類</dt>

<dd>界 : 動物界 Animalia</dd>

<dd>門 : 脊索動物門 Chordata</dd>

<dd>亜門 : 脊椎動物亜門 Vertebrata</dd>

<dd>綱 : 爬虫綱 Reptilia</dd>

<dd>目 : ワニ目 Crocodilia</dd>

</dl>

</div>

</body>

------------------------------

変更点はレイアウト領域を１つにまとめる領域を先頭に追加したところ、各タグにidの指定を追加したところと、ビジュアルを表示する領域を加えたところの3点だ。

■ワイヤーフレームと同じように配置をコントロール

ではCSSで素材の位置を青写真のとおりにコントロールしてみよう。HTMLのidを示すセレクタを作り、そこに表示サイズや位置を示す値を入れるところまでやってみる。

---サンプルコードの抜粋----------
* {
margin: 0;
padding: 0;
line-height: 1.0;
}

div#wrapper {
width: 600px;
margin-left: 20px;
}

ul#Gnav {
display: block;
list-style-type: none;
}
ul#Gnav li {
float:left;
}
p#photo {
width: 600px;
height: 200px;
}
p#explanation {
width: 373px;
float:left;
}
dl#classiification {
width: 225px;
float:right;
}
------------------------------