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

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

YUI Grids CSS

 YUI LibraryのYUI Grids CSSの機能を使うことで、テスト版のソリューションを受け入れるのは一層容易になった。YUI Grids CSSは、ページを領域に分割するページレイアウトを行うためのCSSソリューションを提供する。

 YUI Grids CSSの機能の素晴らしいところは、ブラウザへの対応度が高いことであり、ブラウザに対しては最高レベルのサポートを提供している。これは、CSSをレイアウトに使っても、ブラウザによって問題が生じる心配がないということだ。

CSSレイアウト

 YUI Grids CSSでは、ページ幅とテンプレートがあらかじめ設定されており、必要に応じてレイアウトを入れ子にしたりスタックしたりすることもできる。Yahooはこの1000以上のレイアウトを提供することのできる機能を自慢にしている。YUI Grids CSSはYUI Libraryのダウンロードに含まれている。

 われわれは、次のようなYUI Grids CSSの機能を使った。

  • 全体の
    コンテナのidアトリビュートにdoc3を指定することで、100%ページ幅を指定。
  • 3つの
    要素を使って、ページ全体を3つの列に分割した。ここでは、ヘッダ(hd)、本文(bd)、フッタ(ft)の3つのYUI Grids DSSの標準idアトリビュートを使った。
  • ヘッダ部分を、2つの

    要素と1つの

    要素を使って3列に分割した。
    の部分の中には、さらにYUI Grids DSSの機能を使った
    が含まれている。これには、(doc3アトリビュートを使って)100%ページ幅を指定している部分と、yui-bというclass IDが割り当てられた、あらかじめ用意されたテンプレートを使っている部分がある。このyui-bというテンプレートは2つのカラムを持ち、左側のカラムが180ピクセルで狭くなっている。狭い方のカラムにはyui-bというclass IDが割り当てられており、広い方のカラムにはyui-mainというアトリビュートが割り当てられている。この2つのカラムは、ページのコンテンツ領域の上にパンくずリストを表示するために使われている。
  • ページレイアウト全体の中央にあたる本体部分の列は、2つのカラムに分割され、左側のカラムが180ピクセルになっている。これは、本体部分の
    コンテナにyui-t2クラスを指定し、あらかじめ定義されているテンプレートを使うことで実現している。狭い左カラムの部分にはyui-bクラスが割り当てられ、右側の領域にはyui-mainクラスが割り当てられている。
  • フッタの列も、本体部分と同じやり方で2つのカラムに分割されており、左側のカラムが180ピクセルになっている。
  • ページ本体部分の左の狭いカラムには、ナビゲーションメニューが表示される。メニューはHTMLの箇条書きリスト要素とCSSによるスタイル指定を使って作成される。
  • YUI Grids CSSは、YUI Libraryのダウンロードに含まれている1つのCSSファイルに含まれている。CSSファイルのファイル名はgrids.cssで、大きさはわずか4KBだ。

 以下に、作り直したページのソースを示す。





Reworked with YUI Grids CSS     



Text

Breadcrumb
Content goes here
Footer
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]