POINT2

YUI Grids CSSを利用する

ここでは、YUI Grids CSSを使ったレイアウトのポイントを見ていこう。はじめに、Yahoo! DEVELOPER NETWORKからYahoo! User Interface Library（以下、YUI）ライブラリをダウンロードする【1】。解凍後のソースにはドキュメントやサンプルが含まれるが、実際に必要となるのは「build/reset-fonts-grids/」だけだ。このCSSファイルには見出しや段落などに適用されるデフォルトスタイルをリセットできるReset CSSと、ブラウザやOS間のフォントサイズの差異をなくすFonts CSSが同梱されている。Grids CSSでは要素の幅をem値で指定しているため、「build/grids/」を単独で利用する場合は＜body＞タグのフォントサイズを13pxに合わせておく必要がある【2】。


【1】YUI Grids CSSのページ（developer.yahoo.com/yui/grids/）では、サンプルファイルなども確認できる


【2】YUI Fonts CSSの文字サイズ指定部分。要素の幅に関する定義はこの値がベースになっている


マークアップの際は＜head＞タグ内へリンクを追加し、コンテナタグ＜div＞タグを記述する【3】。ここに定義するid名によって、要素の幅が自動的に決まる仕組みだ【4】。ただし、デフォルトではリキッドレイアウト（#doc3）で左右に10pxのマージンが生じ、固定幅だと要素がウインドウの中央に配置されてしまう【5】。コンテンツ全体を左寄せにする場合など、レイアウトによっては定義済みのスタイルを上書きしなければならない。


【3】コンテナタグの記述例。＜head＞では「reset-fontsgrids.css」をリンクさせている


【4】YUI Grids CSSでは4タイプから幅を選択できる


【5】マージンに関する定義個所。配置を変更する場合はこの内容を上書きしよう


また、ブラウザによる文字サイズの変更に合わせて要素の幅が変化するエラスティクレイアウトとなるため、背景画像でドロップシャドウを表現する際などに幅の可変へ対応させる工夫も必要だ。コンテンツ（div#bd）部分には、カラム数に応じて「.yui-g」で始まるclass属性を加えた＜div＞を記述する。この中に複数のdiv.yui-uを用意する【6】ことで、親要素に定義したclass名に合わせてカラムのサイズや配置が切り替わる【7】。


【6】.yui-gは1/2・1/2、.yui-gcは2/3・1/3に子要素（.yui-u）が分割される


【7】div.yui-gにdiv.yui-gをネストさせて1/4にするといった細分化も可能だ


ただし、最初の子要素のみ「.first」が必須となる点に注意しよう。なお、カラムの配置はfloatプロパティで行われているが、#bdおよび.yui-g～.yui-gfにclearfixハックが定義されているため、後続の要素で回り込みを解除する必要はない。また、メインコンテンツ（div#yui-main div.yui-b）とサイドバー（div.yui-b）を定義し、コンテナタグに「.yui-t」で始まるclass属性を加えることで、左右いずれかに固定幅のサイドバーを表示させることも可能だ【8】【9】。メインコンテンツ部分には前述のdiv.yui-gなどを定義し、意図した段組みを表現しよう。


【8】.yui-t1～.yui-t7には幅750pxが指定されているため、#doc～#doc4を定義した要素に追加する必要がある


【9】指定したclass名に合わせて、子・孫要素の幅や配置が切り替わる


余談になるが、2008年10月1日時点でプレビュー版のYUI 3.0【10】を確認したところ、一部のセレクタ名に変更が加えられ、idを利用したセレクタが廃止になるようだ。ライブラリ自体をアップグレードする場合には、コンテナタグやメインコンテンツ部分に記述したid属性を新しく用意されたclass属性に書き換えるなど、一部修正を加える必要があるので注意してほしい【11】。


【10】「YUI 3.x Preview」（developer.yahoo.com/yui/3/）のCSSGridsでは、固定幅のレイアウトも可能になるようだ


【11】【8】をYUI 3.0向けに修正した例。idがclassに置き換えられ、親要素に「.yui-grids」が必須となる



INDEX
POINT1　CSSフレームワークとは
POINT3　Blueprint CSSを利用する
POINT4　オンラインサービスによるカスタマイズ