ひげろぐ » Yahoo!-UI-Library http://brass.to/blog 技術者として仕事人としての思うところや覚え書きやらです Fri, 30 Jul 2010 10:07:43 +0000 http://wordpress.org/?v=2.8.4 ja hourly 1 Yahoo! UI Libraryで3カラムレイアウトとかも http://brass.to/blog/yui_css_grids_2.html http://brass.to/blog/yui_css_grids_2.html#comments Sun, 13 Apr 2008 08:36:40 +0000 akahige http://brass.to/blog/yui_css_grids_2.html Yahoo! UI Libraryで簡単に2カラムレイアウトの続き。
もうちょっとCSS Gridsの世界に踏み込むと3カラムのレイアウトとかそれ以上に複雑なレイアウトを作ることができる。
これもまたそんなに難しくはない。

グリッドでブロック要素を任意に横分割

ブロック要素の中に以下のHTMLを書くとブロック要素がさっくりと横分割される。
これを使うことによって3カラムレイアウトとか簡単にできる。

<div class="yui-g">
  <div class="yui-u first"></div>
  <div class="yui-u"></div>
</div>

class名を変えることで分割割合を変えられる。

.yui-g 1/2 – 1/2
.yui-gb 1/3 – 1/3 – 1/3（3分割）
.yui-gc 2/3 – 1/3
.yui-gd 1/3 – 2/3
.yui-ge 3/4 – 1/4
.yui-gf 1/4 – 3/4

.yui-gbを使った3分割の時は以下のような構造にする。

<div class="yui-gb">
  <div class="yui-u first"></div>
  <div class="yui-u"></div>
  <div class="yui-u"></div>
</div>

このときyui-gとかyui-uを指定した要素にmarginやpaddingを設定してしまうとレイアウトが崩れるのでそれだけ注意。

入れ子も自由自在。

<div class="yui-g">
  <div class="yui-u first">
    <div class="yui-g">
      <div class="yui-u first"></div>
      <div class="yui-u"></div>
    </div>
  </div>
  <div class="yui-u"></div>
</div>

これを応用すると複雑なレイアウトも割と簡単。
YUI素敵だ。

参考

]]> http://brass.to/blog/yui_css_grids_2.html/feed 0 Yahoo! UI Libraryで簡単に2カラムレイアウト http://brass.to/blog/yui_css_grids.html http://brass.to/blog/yui_css_grids.html#comments Wed, 26 Mar 2008 14:42:11 +0000 akahige http://brass.to/blog/yui_css_grids.html 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はブロックであることを示している。たぶん。

自分も最初こういうところで考えたけどあまり深くに考えずお約束的に覚えてしまうのがよいと思われる。

追記

続編っぽいの書きました。

Yahoo! UI Libraryで3カラムレイアウトとかも

]]> http://brass.to/blog/yui_css_grids.html/feed 0