このブログは、MT（Movable Type[ムーバルタイプ] 3.31-ja）を導入して制作されています。デフォルト（初期設定）のレイアウトだとイマイチに思ったのでカスタムメイドでのレイアウトで制作してあります。ベースは、Yahoo! UI Libraryが公開されましたのでそちらのGrids CSSを使ってページレイアウトしています。
このYahoo! UI Library Grids CSSは、かなり使えるものだと思います。多くのユーザーを相手にアクセシビリティーを考えて設計されたCSSレイアウトなのでCSS（スタイルシート）を覚えようと思っている方にも参考にするととてもいい情報です。今回は、自分なりにこのYahoo! UI Library Grids CSSを解る範囲で説明・紹介いたします。
Yahoo! UI Library Grids CSS
かなり使えるCSSソースなので、是非DLしてお使いになることをオススメします。ソースのDL先は以下サイトからどうぞ
- Yahoo! UI Library Grids CSS
- http://developer.yahoo.com/yui/grids/index.html
簡単に導入メリットをあげておきます。英訳ができる方が訳表示してくれるときが来る日を楽しみにしております。
- A-grade browser ブラウザにて同等表示を可能としています。
- ユーザーのフォント表示指定に柔軟に対応できるようになっています。(フォント指定：em対応）
- 一つのCSSファイルで様々なレイアウトを制作することができます。
- 主要コンテンツ部分をソースにおいて上部に表示されるようにCSS設計されています。
- ライセンスはBSD licenseです。
A-grade browserの範囲がどれくらいかはわかりませんが、今提供されている最新版のブラウザであればほとんど同等表示されるという解釈でいいと思います。正直なところ、すべてのブラウザに対応して同等表示することは不可能に近いです。CSSハックなどのテクニックもありますが、今後のユーザーのコンテンツ利用を考えた場合、古いバージョンのブラウザでは表示不可能な場合がほとんどだと思われます。そうなれば、ブラウザもバージョンアップする必要性が高くなります。
Yahoo!がユーザーの利用ブラウザの統計からこのソースを公開しているので、最低限の設定だと思われます。フォント（文字）設定もemにて設定されていますので、ユーザーのフォント表示操作にも柔軟に対応できます。
このCSSの凄いところは、とてもシンプルなソースをベースに何通りのもレイアウトを作成できることです。また、主要コンテンツ部分がソース上で上位に表示されるように設定されていますので、検索ロボットのクローラーにもコンテンツがヒットされやすいです。
BSD licenseでのソース公開なのでクレジットを表記することで自由に使うことができます。
BSDライセンス 【BSD License】 オープンソースソフトウェアで使用されているライセンス体系のひとつ。無保証・免責を宣言し、再配布する際に著作権表示を行なうことのみを条件とする、極めて制限の緩いライセンスである。 著作権表示さえしておけば、BSDライセンスのコードを他のプログラムに組み込み、しかも組み込み後のコードを非公開にできるため、商用化のしやすいライセンスである。また、GPLのように再配布時のライセンス条件を制限することもない。 （引用：IT用語辞典）
Yahoo! UI Library Grids CSSベースソース
基本的なCSSソースは、3つあります。制作するXHTL文書から下記のCSS（スタイルシート）に外部リンクさせる必要があります。
- grids.css /レイアウト設定/
- fonts.css/フォント設定/
- reset.css/マークアップリセット設定/
通常のリンク指定コードは以下のようになります。<head>と</head>の間に以下の記述を追加します。
MTでオリジナルで使う場合は、ファイル名を【grids.css】から【styles-site.css】へファイル名を変更するか、新たに【styles-siteお好きな名前.css】にして登録し、そのファイルにリンクを貼り直します。
【grids.css】から【styles-site.css】へファイル名を変更もしくは【styles-siteネーム追加.css】で新たに登録
それからそのCSSコードの最上部に以下のコードを追加することで一つのCSSファイルで他のCSSファイルを読み込ませることができます。
@import url(font.css);
@import url(reset.css);
@import url(好きなファイル名.css);/*成形用スタイルシート*/
実際にオリジナルで各マークアップタグの設定は、【成形用スタイルシート】を用意してそちらで設定してゆくことでベースのCSS設定を壊すことなく、整頓してCSSを記述することができます。
ベースXHTML
基本的にレイアウトのベースは、ヘッダー部分（#hd）、ボディー部分（#bd）、フッター部分（#ft）に分けることができます。左図が表示された場合のレイアウトになります。以下がベースのソースになります。オレンジラインはページレイアウト全体を指し、下記のコードで"doc"部分となります。
ボディー部分（#bd）のベースレイアウト
ボディー部分（#bd）をいくつかのパターンでレイアウトが可能となります。基本的にYahoo! UI Library Grids CSSのサンプルページは、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：コラム指定無し：サンプルページへ
表示幅は最低表示幅指定されています。基本的には、％指定されていますのので、全体の表示幅を変更することで表示幅が変わります。全体の表示幅を変更したい場合は、CSSコードの中の#doc部分を変えることで可能となります。
一応基本の簡単XHTMLコードを表示しておきます。一番最初のdivのクラス指定を変更することで同じコードでも様々な表示が可能です。
CSSを見てみると上手くleft配置とright配置に設定されています。
#bd後にクリア（回り込み解除）設定していますのでレイアウトが崩れる心配もありません。
マルチコラム指定
基本のレイアウトは、上記の2コラムスタイルになります。その後のマルチコラムは、メインコンテンツ部分を使って表示させるようにします。
ベースのXHTMLコードは以下の<div id="yui-main"><div class="yui-b"></div></div>サンプルにある基本のパターンは10パターン用意されています。いくつかのパターンを組み合わせてマルチコラムレイアウトが可能になります。
yui-g：2分割表示（等幅）：
メインコンテンツを等幅に2分割します。サンプル | サンプル
yui-gb：3分割表示（等幅）：
メインコンテンツを等幅に3分割します。サンプル | サンプル
yui-gc：2分割表示（left:2/3、right:1/3）：
メインコンテンツをleft:2/3、right:1/3幅に2分割します。サンプル | サンプル
yui-gd：2分割表示（left:1/3、right:2/3）：
メインコンテンツをleft:2/3、right:1/3幅に2分割します。サンプル | サンプル
yui-g：4分割表示（等幅）：
メインコンテンツを等幅に4分割します。サンプル | サンプル
yui-g：3分割表示（left:1/2、center:1/4、right:1/4）：
メインコンテンツをleft:1/2、center:1/4、right:1/4に3分割します。サンプル | サンプル
yui-g：3分割表示（left:1/4、center:1/4、right:1/2）：
メインコンテンツをleft:1/2、center:1/4、right:1/2に3分割します。サンプル | サンプル
yui-ge：2分割表示（left:3/4、right:1/4）：
メインコンテンツをleft:3/4、right:1/4に2分割します。サンプル | サンプル
yui-gf：2分割表示（left:1/4、right:3/4）：
メインコンテンツをleft:1/4、right:3/4に2分割します。サンプル | サンプル
yui-gf：2分割表示（left:1/4、right:3/4）：
メインコンテンツをleft:1/4、right:3/4に2分割します。サンプル | サンプル
以上がYahoo! UI Library Grids CSSで説明されている内容を自分なりに簡単に説明してみました。grids.cssの中の個々の指定を把握することでいろんなレイアウトを表現することができると思います。
MTでレイアウトカスタマイズする場合は、デフォルトの状態で各ブロックをモジュール化して、Yahoo! UI Library Grids CSSをベースに配置してみるといいと思います。各ブロックの要素指定は、他のCSSファイルにて行うようにすることで後からの変更もわかりやすくなります。
気をつけること
ベースの各divクラスでmargin・padding指定をするとレイアウトが崩れます。ベースのdivクラスの中にもう一つのdivクラスを作ってからCSS指定することでレイアウトを崩すことなく表現が可能です。
ID指定でヘッダーボディーブロックにマージンが設定されています。オリジナルで指定したい場合は、以下のようにはずしてみてください。
また時間があれば、いろんなパターンのレイアウトをサンプルで作ってみます。また、Yahoo! UI Library Grids CSSのページをしっかりと読んでみるといいと思います。
コメントする