YUI Library(CSS)を使ってみる(gridが便利)

CSSリセットというものを改めて勉強してみていろいろ比較した結果、YUI Libraryを使うことに
しました。Yahoo製で、実際にYahooで使われているようです。
また、一般サイトでも採用しているサイトが多く有るようです。

http://yuilibrary.com/

YUI Libraryはリセットはもちろん、fontなどある程度の基本設定をしてくれたり、divでの
レイアウトを簡単にできたりするオプションがあり、なかなかイージーそうです。
他にもjavascriptやajaxなどのライブラリもあるようですが、jqueryが慣れているので
今回はCSSのみを使用しました。

YUI Libraryを使用するには先ず以下のCSSを指定します。

<link rel="stylesheet" type="text/css"
href="http://yui.yahooapis.com/3.5.1/build/cssreset/cssreset-min.css" />
<link rel="stylesheet" type="text/css"
href="http://yui.yahooapis.com/3.5.1/build/cssfonts/cssfonts-min.css" />
<link rel="stylesheet" type="text/css"
href="http://yui.yahooapis.com/3.5.1/build/cssbase/cssbase-min.css" />
<link rel="stylesheet" type="text/css"
href="http://yui.yahooapis.com/3.5.1/build/cssgrids/grids-min.css" />

ダウンロードも出来ますが、改変などはしないのでURLをそのまま指定しました。
cssgrids以外でブラウザ間の違いをかなり吸収し、すぐに使える状態になっています。

グリッドでは、divを左右に並べるレイアウトを簡単に実装できます。
例えば次のようにすると、左がメニュー、右がメインというようなレイアウトが
簡単に配置できます。

<div class="yui3-g">
<div class="yui3-u-1-4" id="nav">メニューとか</div>
<div class="yui3-u-1-5" id="main">メイン画面</div>
</div>

yui3-gでグリッド全体、その子としてyui3-uから始まるクラスを指定します。
単にyui3-uだと幅は決まっていません。自分で幅をpx指定などします。
例のようにyui3-u-1-4だと全体の幅の1/4の幅となります。
yui3-u-3-4だと3/4です。
他には以下のページに書かれています。
CSS Grids http://yuilibrary.com/yui/docs/cssgrids/

簡単にdivを横並びにできるので、かなり楽です。
特に僕は最近HTMLをがっつりやり始めたのでとても助かります。
floatとか、、、CSS初心者は結構悩むんですよね。


すでに作ったサイトに適用するとなるとさすがに面倒ですが、新規にサイトを
作る場合は利用すると楽だと思います。
よろしければ、どうぞ。