「リキッド」とか「グリッド」とか

「リキッド」と「グリッド」の違いがよく分かんないなァー、と思っていたけど、
参考になったサイトがあったので、メモ。▽Web制作者は知っておきたいwebサイトのレイアウト7選 | Design Spice
　 http://design-spice.com/2011/08/31/web-layout7/

よくまとめられてると思うけど、自分にはちょっと細か過ぎる。
クラブ音楽のジャンルがあまりに細分化専門化してると、分かりづらい感覚に似ている。


で、自分用のメモなので、
自分が分かるように記す。

＜１．固定幅レイアウト＞

＜２．リキッドレイアウト(Liquid Layout)＞
・要素の単位を%で指定。ブラウザサイズに合わせた情報量を提供することが可能

＜３．グリッドレイアウト(Glid Layout)＞
・架空の縦横線を下地とし、そこに出来たブロックごとに文字や画像などの要素を配置するレイアウト
→見た目がダサくて使いたくない




■候補外
＜レスポンシブwebデザイン(Responsive Web Design)＞
・CSS3のMedia Queriesを利用してディスプレイサイズに応じてデザインを変更
→CSS3はまだメインで利用しないので、パス

＜エラスティックレイアウト(Erastic Layout)＞
・要素の単位をemで指定
→メリットを感じない


■その他
＜フレキシブルレイアウト(Flexible Layout)＞
・リキッドレイアウトと同じで要素の単位を%で指定するだけでなく、最小幅と最大幅も指定。リキッドレイアウトのデメリットを改善したレイアウト
→オレの中ではこれもリキッドレイアウト。細分化し過ぎると分かんなくなるので…

＜可変グリッドレイアウト(Fluid Glid Layout)＞
・グリッドレイアウトとリキッドレイアウトを合わせたレイアウト
・グリッドベースのpxを%に変えることでグリッドの仕組を可変レイアウトに利用




まとめるとこんな感じ
▼現状＜リキッドレイアウト(Liquid Layout)＞
→リンク先のジャンル分けで言えば＜フレキシブルレイアウト(Flexible Layout)＞に該当

　　　↓

▼将来＜グリッドレイアウト(Glid Layout)＞
→リンク先のジャンル分けで言えば＜可変グリッドレイアウト(Fluid Glid Layout)＞に該当
→イメージしてるサイトは、先日、見つけた東京トヨペット。多分、このレイアウトに相当すると思うけど…
▽東京トヨペット_2011年8月20日 | DesignStyle
　 http://design.w4c.work/capture/photo.php?lid=117&cid=45