DesignWalker » リキッドデザイン http://www.designwalker.com ロサンゼルスで働くウェブデザイナーの日記。 Wed, 29 Jun 2011 06:24:51 +0000 ja hourly 1 http://wordpress.org/?v=3.0 リキッドデザインのサンプルレイアウト http://www.designwalker.com/2006/12/liquid-design.html http://www.designwalker.com/2006/12/liquid-design.html#comments Mon, 25 Dec 2006 10:50:26 +0000 admin http://new.designwalker.com/2006/12/%e3%83%aa%e3%82%ad%e3%83%83%e3%83%89%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%81%ae%e3%82%b5%e3%83%b3%e3%83%97%e3%83%ab%e3%83%ac%e3%82%a4%e3%82%a2%e3%82%a6%e3%83%88.html

先日2xup.orgさんの「一行あたりの文字数を制限するリキッドレイアウト」を読ませていただき、わたくしも実際にサンプルレイアウトを作ってみました～。

このブログで先日ご紹介した、「透過PNGをIE6以下のバージョンで綺麗に表示する方法」とあわせて、このリキッドレイアウトを使えば、デザインの幅も広がりそうですねぇ。。

っちゅうわけで、さっそく、サンプルレイアウトを。。。

1. 左サイドバーのリキッドレイアウト
左サイドバーのサンプルレイアウトですわ。
横幅はブラウザのサイズ80%に設定しております。
ブラウザの横幅を伸縮させればデザインもブラウザにあわせて伸縮するように設定。
←画像クリックでサンプル開きます。

2. 右サイドバーのリキッドレイアウト
右サイドバーのサンプルレイアウトですわ。
横幅はブラウザのサイズ80%に設定しております。
ブラウザの横幅を伸縮させればデザインもブラウザにあわせて伸縮するように設定。
←画像クリックでサンプル開きます。

3. ３カラムのリキッドレイアウト
３カラムのサンプルレイアウトですわ。
横幅はブラウザのサイズ80%に設定しております。
ブラウザの横幅を伸縮させればデザインもブラウザにあわせて伸縮するように設定。
←画像クリックでサンプル開きます。


]]> http://www.designwalker.com/2006/12/liquid-design.html/feed 0