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

CSS

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

 状態:不明  閲覧数:6,704  投稿日: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/4/25 2:37 更新
週間人気ページランキング / 4-18 → 4-24
順位 ページタイトル抜粋 アクセス数
1 鉄道会社毎のカラーコード | カラーコード(色) 18
2 Inkscape | ソフトウェア 16
3 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 10
4 「東京都」のカラーコード取得は難しい | カラーコード(色) 8
5 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 5
5 効果を打ち消すスタイルシート | CSS 5
5 ツールチップが表示されないときー 5
6 「Create Link」代替拡張機能を探した結果は、「CopyTabTitleUrl」でした。 | CopyTabTitleUrl(Chrome 拡張機能) 4
6 「ログイン情報を保持」の名称 4
7 RGB ⇔ Lab | 色変換(色) 3
7 「bgcolor」「background-color」「background」の違い | CSS 3
7 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 3
7 ログイン 3
7 Design 0 3
7 他サイト調査(HTML) カテゴリー 3
8 font-familyには游ゴシックを指定しない | フォント 2
8 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 2
8 数値データ型(CSS) カテゴリー 2
8 max-width: 100%の効果を打ち消すには、max-width: none; | CSS 2
9 「油彩画」画像フィルタ実行例 | 画像フィルタ(画像) 1
2025/4/25 1:01 更新