HTML・CSSテックラボ

YUIのBase CSSとGrids CSS

Yahoo! UI Library(YUI)のCSSライブラリにはYUI Reset CSSとYUI Fonts CSS以外にも便利なライブラリがあります。

Base CSS

YUI Reset CSSでスタイルをリセットした後、見出しやリストなどにスタイルを新たに定義する作業が残っています。この作業を簡単にするのが『Base CSS(http://developer.yahoo.com/yui/base/)』です。

Base CSSは、見出しやリストなどの要素に新しいスタイルを定義しています。適度な余白や文字の大きさに調整されているので、これをベースに調整していくことで簡単にスタイルを再定義することができます。

Grids CSS

ページを作成する際、横幅を制限したり2段組みにしたりなど、レイアウトに良く使われる枠組みがあります。これをあらかじめ定義したのが『Grids CSS(http://developer.yahoo.com/yui/grids/)』です。

YUIのライブラリは次のようにまとめて参照することもできます。

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

関連記事