かんたんマルチカラムレイアウト。 - 青空を探す、旅の記録。

たまには、いつも使ってる技術の解説記事なんかも書いてみようかと思った。ので、今日はYUI Grids CSSのお話。
このダイアリーみたいに、メインコンテンツの横に細長いサイドバーが配置されてる２カラムレイアウトや、メインコンテンツを左右２本のサイドバーで挟む３カラムレイアウトってのは今や日常的に目にするものだけど、これっていざ自分で組んでみようとすると案外難しい。
そこで絶大な威力を発揮するのがhttp://developer.yahoo.com/yui/grids/。USのYahoo!が自社サイトでも使っているCSSライブラリのひとつで、様々なブラウザをサポート(Firefox, Safari, Opera, IE6/7)し、かんたんにマルチカラムレイアウトが組めるライブラリです。
では、実際に使ってみましょう。

レイアウトをGUIで決められる、「http://developer.yahoo.com/yui/grids/builder/」が用意されています。

Toolboxはドラッグして移動できます。

コンテンツを途中で分割したいときは、「Add Another Row」をクリックして追加。要らなければばってんで削除。

レイアウトが出来上がったら、「Show Code」をクリックしてHTMLコードを表示させます。

「view plain」を押せばポップアップウィンドウでHTMLコードだけを表示できるので、そこからコピーするとかんたん。

あとは、YOUR DATA GOES HEREってコメント行のところに内容を書き込んでいけばOK。ね、かんたんでしょ？
なお、Grid Builderが吐き出したコードはyui.yahooapis.comでホストされたCSSファイルを読み込むようになっているので、特にリンク先の書き換えを行わなくてもすぐに使えます。外部からの読み込みが気になるとか、自分とこのサーバはY!より速いぜ！って自信があるとかなら自前で配置したのに書き換えてももちろんOK。