Yahoo! UI Library Grids CSS

ヘッダー部分

CSS有効 | CSSファイルグリッド | CSSファイルフォント | CSSファイルリセット

メインコンテンツ
<div id="yui-main"><div class="yui-b"></div></div>

ボディー部分(#bd)をいくつかのパターンでレイアウトが可能となります。基本的に2コラムレイアウトがベースになります。この2コラムレイアウトをベースにして、3コラム、4コラム。5コラムなどマルチなレイアウトを表示することが可能になります。

まずベースレイアウトを指定します。予めボディー部分(#bd)のレイアウトは7パターン用意されています。 クラス要素指定で同じXHTMLコードでも様々なレイアウトを表示することが可能です。サンプルページもありますので確認してみてください。すべて同じXHTMLコードで制作されています。

  • yui-t1:右側メインコンテンツ/左側サイドコンテンツ表示:570px/160px
  • yui-t2:右側メインコンテンツ/左側サイドコンテンツ表示:550px/180px
  • yui-t3:右側メインコンテンツ/左側サイドコンテンツ表示:430px/300px
  • yui-t4:左側メインコンテンツ/右側サイドコンテンツ表示:180px/550px
  • yui-t5:左側メインコンテンツ/右側サイドコンテンツ表示:240px/490px
  • yui-t6:左側メインコンテンツ/右側サイドコンテンツ表示:300px/430px
  • yui-t7:コラム指定無し

サイドコンテンツ
<div class="yui-b"></div>

フッターコンテンツ