Yahoo! UI Libraryで簡単に2カラムレイアウト
Yahoo! UI Library（以下YUI）のCSS Gridsが便利でよく使っているので簡単に紹介してみる。
YUIを使うとサイドバーつけたりとかでよく使う2カラムのレイアウトがさくっとできる。
次はコピペするだけで試せるサンプルコード。（grids.cssが入手済みじゃないとダメか）
<html>
<head>
<title>YUI Grids CSS </title>
<link rel="stylesheet" type="text/css" href="grids.css">
</head>
<body>
<div id="doc" class="yui-t1">
<div id="hd"><!-- ヘッダ --></div>
<div id="bd">
<div id="yui-main">
<div class="yui-b" style="border: 1px solid #000;">
本文ほげほげ
</div>
</div>
<div class="yui-b" style="border: 1px solid #000;">
この部分は
<!-- .yui-t1,.yui-t2,.yui-t3では左に表示 -->
<!-- .yui-t4,.yui-t5,.yui-t6では右に表示 -->
</div>
</div>
<div id="ft"><!-- フッタ --></div>
</div>
</body>
</html>yui-t1の数字のところを1～7まで変えるだけでいろいろかわるのでちょっと面白い。
またその手前のdocをdoc2,doc3,doc4と変えることでページの横幅が変わる。
これだけでもう手探りで使っていけると思うのだけど以下一応解説。
- Yahoo! UI Libraryの入手
- 基本のHTML構造を作る
- ページの横幅を決める
- 基本のレイアウトを決める（1カラム or 2カラム）
Yahoo! UI Libraryの入手
ライブラリの入手は以下から。これを書いてる時点でのバージョンは2.5.1。
The Yahoo! User Interface Library (YUI)
この中に含まれているgrids.cssかreset-fonts-grids.cssを読み込んで使う。
ここではどちらを使ってもよい。
基本のHTML構造を作る
YUIのCSS Gridsを使うにはそれに沿ったidやclassを持ったHTML構造にする必要がある。
基本は見たまま以下の通り。
<html>
<head>
<title>YUI Grids CSS </title>
<link rel="stylesheet" type="text/css" href="grids.css">
</head>
<body>
<div id="doc">
<div id="hd"><!-- ヘッダ --></div>
<div id="bd"><!-- 本文 --></div>
<div id="ft"><!-- フッタ --></div>
</div>
</body>
</html>ここでの要点はこれだけ↓。
- docというidを持ったdivを作る。この要素がページ全体を囲む。
- その中にhd、bd、ftというidをもったdivを作る。それぞれコンテンツのヘッダ、本文、フッタになる。
ページの横幅を決める
ページ全体を囲むdiv要素のidを変えるとページの横幅が決まる。
<div id="doc2">| doc | 横幅 750px |
| doc2 | 横幅 950px |
| doc3 | 横幅 100% |
| doc4 | 横幅 974px (2.3.0以降) |
基本のレイアウトを決める（1カラム or 2カラム）
ページ全体を囲むdiv要素にclassを指定することで基本的な1カラムもしくは2カラムのレイアウトができる。
<div id="doc" class="yui-t1">指定可能なバリエーションは以下の通り。
| .yui-t1 | 2カラム 左160px |
| .yui-t2 | 2カラム 左180px |
| .yui-t3 | 2カラム 左300px |
| .yui-t4 | 2カラム 右180px |
| .yui-t5 | 2カラム 右240px |
| .yui-t6 | 2カラム 右300px |
| .yui-t7 | 1カラム |
2カラムのレイアウトにした場合はbdの中身に以下のようなHTML構造にする。
yui-mainというidを持ったdiv要素１つとyui-bというclassを持ったdiv要素が２つ追加になる。
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<!-- 本文ほげほげ -->
</div>
</div>
<div class="yui-b">
<!-- この部分は -->
<!-- .yui-t1,.yui-t2,.yui-t3では左に表示 -->
<!-- .yui-t4,.yui-t5,.yui-t6では右に表示 -->
</div>
</div>yui-mainがページメイン要素であることを示している。たぶん。
yui-bのbはブロックであることを示している。たぶん。
自分も最初こういうところで考えたけどあまり深くに考えずお約束的に覚えてしまうのがよいと思われる。
追記
続編っぽいの書きました。
