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

CSS

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

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

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


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

<1.固定幅レイアウト>

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

<3.グリッドレイアウト(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


CSSで画像をロールオーバー

trタグにborder



類似度ページランキング
順位 ページタイトル抜粋
1 「リキッド」とか「グリッド」とか 56
2 「ボタン」と「テキストリンク」の使い分け 28
3 スキップリンク 26
4 遠近グリッド はCS3にはないの? 24
5 「OOCSS」とは別の考え方? 19
6 「.epsファイル」はあらゆるグラフィックソフトで編集できるとは限らない 19
7 「position:absolute;」が分からなくなったときに見るエントリー 18
8 UIテキスト仕様調査「ログイン」 / 2018/2/17 18
9 「東京都」のカラーコード取得は難しい 18
10 Chrome でキャッシュを効かさない 17
11 Chrome で右クリックから保存しようとするとフリーズする → フォルダーオプションで「別のプロセスでフォルダーウィンドウを開く」 17
12 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) 17
13 「ホーム」に統一 17
14 トリミングする際、範囲を決定する入力ボックスが表示されなかったら 17
15 「名前を付けて保存」すると、「http://」からのパスがずれる 17
16 「Yahoo!検索(リアルタイム)」最強 17
17 PhotoShop CS3で、ドロップシャドウと、テキストを囲む色 16
18 「Bootstrapデザイン」✕「グラフ」 16
19 Chromeでリンク先ページを常に別タブで開くためには、「Ctrlキーを押しながらクリック」 16
20 olタグ装飾しようとしたら、「レスポンシブ」と「広告」影響により挫折 16
2025/3/10 23:29 更新
週間人気ページランキング / 3-3 → 3-9
順位 ページタイトル抜粋 アクセス数
1 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 7
2 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 6
2 RGB ⇔ Lab | 色変換(色) 6
3 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 5
3 このエントリーの結論 / 変更するまで /変更後 5
3 鉄道会社毎のカラーコード | カラーコード(色) 5
3 「東京都」のカラーコード取得は難しい | カラーコード(色) 5
4 色モデルイメージ図 | 色変換(色) 3
4 24ビットカラーにおけるHLS要素範囲 / 最小値 ~ 最大値 3
4 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 3
5 G'MIC | GIMP 系(ソフトウェア) 2
5 16進数カラーコード / 2進数 2
5 「bgcolor」「background-color」「background」の違い | CSS 2
5 「line-height」効果を打ち消すスタイルシートは、「line-height:normal; 2
5 「display:flex;」を設定している「
  • タグ」内の「タグ」クリック範囲を拡大する | Flexible Box Layout Module(CSS)
  • 2
    5 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 2
    5 FontAwesomeでアイコンが□(四角)になって表示されない Forbidden  | Font Awesome(フォント) 2
    6 「OOCSS」とは別の考え方? | 命名規則(コーディングルール) 1
    6 効果を打ち消すスタイルシート | CSS 1
    6 2系(Bootstrap) カテゴリー 1
    2025/3/10 1:01 更新