builder Top
HTML/CSS
- XHTML
- Internet Explorer
- Opera
- Safari
- Internet Explorer
- ...

YUI Libraryを用いたCSSベースのレイアウトに移行する

文：Tony Patton（Special to TecRepublic）
翻訳校正：石橋啓一郎

2008/04/25 08:00

YUI Libraryの一部であるYUI Grids CSSは、ページをレイアウトするための強力な機能を備えている。この記事では、YUI Libraryを使ってCSSベースのレイアウトを行う方法について説明する。

　最近既存のウェブアプリケーションに大きな変更を施す新しいプロジェクトを始めた際、元のデザインで使われていたテーブルベースのレイアウトを捨て、CSSを使うことを決断した。われわれはいくつかのアプローチを評価した結果、Yahoo! User Interface（YUI）Libraryを使うことを選択した。YUI Libraryはプロフェッショナルな開発者のチームによって開発されたもので、核となるCSS資源を提供してくれ、広くウェブコミュニティでテストされている。

　このチュートリアルでは、テーブルベースのデザインから、YUI Libraryの助けを借りてCSSベースのレイアウトに移行するためのステップを説明する。

レイアウト

　アプリケーションの画面の面積をどのように分割するかを検討することは、それをテーブルとCSSでどのようにコーディングするかを理解するためには有意義なことだ。今回の例では、全体のページは2つの水平的な部分に分割される。ヘッダと本体だ。

　ヘッダ部分は、さらに3つの水平的な帯に分割される。最初の列は一番上の部分で、色が付いている。中央の列には白い背景にテキストとロゴが配置される。最後の列は別の背景色を持ち、パンくずリストが表示される。

　ページの本体部分は2つのカラムに分割されている。最初のカラムはナビゲーションを行う領域で、ナビゲーションリンクのリストが配置される。2番目のカラムは2つの列に分割され、一番下の部分には小さなフッタの列が設けられ、他の部分にページコンテンツが配置される。

　このサイトデザインは、DreamweaverとHTMLのテーブルで開発された最初のものと同じだ。CSSを導入すると、より短くメンテナンスも簡単な、きれいなコードを書くことができる。

テーブルベースのレイアウト

　元のデザインでは、6つのHTMLのテーブルを使ってページを分割していた。元々、ページ内のテキストのスタイルを指定するのにはCSSを使っていたが、CSSの利用はそれだけに止まっていた。以下のリストはHTMLのソースだ。レイアウトをわかりやすくするために、各テーブルに背景色が割り当てられている。

<html>
<head><title>Table-based page layout</title></head>
<body>
<table bgcolor="yellow" width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr><td colspan="3" width="100%"></td></tr>

<tr><td colspan="3">
<table bgcolor="red" border="0" width="100%" cellspacing="0">
<tr>
<td width="85%" valign="middle">Header Text</td>
<td width="15%"><img src="logo.jpg" mce_src="logo.jpg" /></td>
</tr></table></td></tr>

<tr>
<td width="16%" height="20" nowrap>Breadcrumb</td>
<td width="40%" height="20" align="right" nowrap></td>
</tr>
<tr>
<td width="10%" rowspan="2" valign="top">
<table bgcolor="green" width="101%" height="100%" border="0" cellpadding="0"
cellspacing="0">

<tr>
<td height="167" valign="top">
<table bgcolor="light blue" width="100%" border="0" cellspacing="0">
<tr><td colspan="3">Menu</td></tr>
<tr>
<td width="8"> </td>

<td>Nav Link</td>
<td width="4"> </td>
</tr></table></td></tr></table></td>
<td height="100%" colspan="2" valign="top">

<table bgcolor="brown" width="100%" height="100%" cellpadding="0" cellspacing="0">
<tr><td valign="top">
<table bgcolor="silver" width="96%" height="220" border="0" cellpadding="10">
<tbody><tr>
<td valign=top align=left width="100%">
<p>Content goes here</p>
</td></tr></tbody></table></td></tr><tr>

<td height="40" valign="middle">
Footer
</td></tr>
</table></td></tr></table></body></html>

　テーブルベースのレイアウトによるソリューションでも望む結果は得られるが、レイアウトの変更を行う際に混乱が生じる場合がある。コードを眺めてみれば、レイアウトにテーブルを使うと混乱が起こりやすいことがわかるだろう。

　レイアウトの変更を行ったり、テーブルベースのソリューションをCSSを使ったものに変える時間がかかる。そのような変更をクライアントに提供することは大変なことだ。われわれの場合、幸運にもクライアントが技術に詳しく、CSSによる単純化したアプローチを示すことで簡単に説得することができた。