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

文:Tony Patton(Special to TecRepublic) 翻訳校正:石橋啓一郎
2008-04-25 08:00:00
  • このエントリーをはてなブックマークに追加
最新特集【一覧】

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


Table-based page layout

Header Text
Breadcrumb
Menu
Nav Link

Content goes here

Footer

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

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

  • 新着記事
  • 特集
  • ブログ