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

最新特集【一覧】

防水スピーカーをワイヤレス化、お風呂でのんびり音楽を楽しむ

自作バーコードで音楽CDを管理する

Perfumeが公開したダンスのモーションデータをChromeで扱う

　最近既存のウェブアプリケーションに大きな変更を施す新しいプロジェクトを始めた際、元のデザインで使われていたテーブルベースのレイアウトを捨て、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のソースだ。レイアウトをわかりやすくするために、各テーブルに背景色が割り当てられている。

Header Text




Breadcrumb









Menu

 

Nav Link
 








Content goes here



Footer

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

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