意外と知らないYUI CSS Builderの使い方と利点

YUIというと、Javascriptライブラリ鵜というイメージを持つ人も多いかもしれないですが、
ページレイアウトを簡単に変更できるCSSライブラリも提供しています。

YUI Grid CSS Document(英語)
にドキュメントは公開されているので、読めばわかるはずですが、
何分英語なので、とっつきにくい部分があると思います。

というわけで、初めての人は、YUI CSS Grid Builderというツールがあるので、
こちらをまず触ってみるのがおすすめ。

YUI CSS Grids Builderツールは、
HTMLページを作る際に必要な、以下の2つのことを決定するためのツールです。

1. ページ全体幅の決定
2. カラム数とナビの固定幅の決定

ページ全体幅は、
- 750px固定幅
- 950px固定幅
- 974px固定幅
- 100%幅
- カスタム幅固定
という選択肢があります。カスタム幅固定があるので、
ページ幅としては、必要なパターンが全てあると言えます。

カラム数やナビ幅は、
右、左ナビを自由に選択でき、かつ、そのナビの幅を
右は160px, 180px, 300px
左は180px, 240px, 300px
の中から選択することが出来ます。

YUI CSS Builderツール上は、
左右ナビの3カラムのページ、という選択肢がないように見えますが、
Body Columns → 「No columns」以外を選択
Split Content → 「2 Columns(25/75)」などを選択
することにより、擬似的に3カラムのページも表現できます。

ナビ幅は、ページ幅と違って、カスタム幅がないので、
細かいレベルでなんでも実現できる、という訳では無いですが、
事実上、上記のパターンでほぼ満足できるのではないかと思います。

で、一通り、好きなページ構成をこのツールで選択した後、
「show code」をして出てきたコードを「view plain」から
コピーして使えば、簡単に、好きなレイアウトでの
HTMLページの雛形を作ることができます。



現場のプロから学ぶＸＨＴＭＬ＋ＣＳＳ [本]

この時に重要なのが、2点あります。

まず1点。
レイアウトについて記述されているCSSファイルが、Yahoo!のサーバ上にあること。

「show code」を見て分かる通り、CSSのリンク先は

<link rel="stylesheet" href="http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css">

となっています。
これは、自分の管理してあるサーバではなく、
Yahoo!が保持するサーバにあるCSSファイルを自由に参照してよい、
という意味なので、開発者にとっては、導入するハードルが低い、と言えます。

次に、ページ全体幅やナビ幅を変更するときに、実際変わるHTMLコードは、

<div id="doc2" class="yui-t5">

の、idとclassの部分を

<div id="doc3" class="yui-t2">

と変えるだけで、変更可能、という点です。

これは、最近流行っている、css frameworkという考え方で、
あらかじめ利用しそうなCSSのクラスをすべて定義したCSSファイルをHTMLから読み込み、
HTMLのクラス名やID名を変更することにより、適用するデザインをかえて、
見た目を変更する、といった設計のCSSのことです。

このような設計のCSSは、デザインを変更したい時に、
いちいちCSSファイルの修正をする必要が無く、HTMLの（クラス名、ID名だけの）変更だけで
済むので、非常にエンジニアにとって直感的に理解しやすい、と言えます。

以上、2点が、自分がYUI CSSを利用している大きな理由です。

使ったことが無い人は、ぜひ、一度 YUI CSS Grid Builderを使ってみて、
体感し、実際に使ってみることをおすすめします。