YUI: CSS Grid Builder-Yahoo!Library Grid CSS対応ページが簡単にレイアウトできる

Yahoo! User Interface LibraryのYahoo! UI Library: Grids CSSレイアウトが簡単に作成できるサイトを発見!!

YUI: CSS Grid Builder
http://blog.davglass.com/files/yui/grids/

最新yui_0.12.0バージョンにも対応しています。これを使えば簡単にレイアウトを組むことができます。便利。

ページ幅もカスタムできるようになっていますので、好きなページ幅を指定することができます。好きなレイアウトにデザインして、最後に[show code]のボタンをクリックすれば、表示されているレイアウトのコードが生成されます。

基本的には、Yahoo! UI Library: Grids CSSからCSSファイルをダウンロードする必要があります。

Yahoo! UI Library: Grids CSS

yui_0.12.0バージョンからページ幅が3パターンから選べれるようになりました。自分のカスタムページ幅指定もできるようになっています。

  • 750px
  • 950px
  • 100%リキッドレイアウト
  • カスタムページ

Grids CSSの実装については、以前のエントリーを読んでもらえれば少しは理解しやすいと思います。Yahoo! UI Library Grids CSSを使ってページレイアウト

トラックバック(0)

このブログ記事を参照しているブログ一覧: YUI: CSS Grid Builder-Yahoo!Library Grid CSS対応ページが簡単にレイアウトできる

このブログ記事に対するトラックバックURL: http://weblibrary.s224.xrea.com/x/mt/mt-tb.cgi/224

コメントする

アイテム

  • ff-logo-big

    ff-logo-big: firefoxロゴ

  • fmtube_image

    fmtube_image: fmtubesキャッチイメージ

  • mock.jpg

    mock.jpg: fm+tubesのモックページ(デザインレイアウト)。最終的にはこのスタイルでマルチブログで展開してみる構想。

  • mtdeinfo

    mtdeinfo: Movabletypeを勉強するならこのサイト。サンプルファイルもあって、情報も探しやすいです。とてもきれいに情報表示されていて、とても参考になります。

  • mytumblr

    mytumblr: 個人の趣味でのtumblrです。女性のポートレートなんかがおおいです

  • caputure_contextmenu

    caputure_contextmenu: tumblr caputureを右クリックコンテキストメニューで選択する

  • tumblrgallery

    tumblrgallery: tumblrを使ってWEBデザインGalleryを簡単に作ってみました。

  • psdtuts

    psdtuts: http://psdtuts.com/のイメージ画像

  • designflavor.

    designflavor.: http://www.designflavr.com/のイメージ

  • entrymain_template

    entrymain_template: ブログ記事の概要は、インデックステンプレート、ブログ記事のリスト(アーカイブテンプレート)、検索結果(システムテンプレート)の3つのテンプレートで共通に使われています。それぞれのテンプレートでの表示内容の違いをイメージに表してみました。

このブログ記事について

このページは、スカイが2006年12月15日 10:51に書いたブログ記事です。

ひとつ前のブログ記事は「アップル福袋 2007 限定200個12/26まで」です。

次のブログ記事は「Adobe Photoshop CS3(ベータ版)リリース」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。