site_make

リキッドレイアウト

2015-02-22

リキッドレイアウト

liquidlayout

リキッドレイアウトとは可変グリッドなんかとも呼ばれます。
レスポンシブデザインでも種類がありまして、画面の幅に合わせて段階をつけてレイアウトを作るパターンとどの画面幅でも対応しようというパターンです。
リキッドレイアウトは可変グリッドと呼ばれるように画面幅に合わせてコンテンツの幅が変わる後者のパターンです。

今パソコンで見ている方はブラウザの幅を小さくしてみてください。スマホの方は横に傾けてください。画面幅に合わせて伸び縮みしましたよね。
これがリキッドレイアウトです。

作り方

まず、画面からはみ出さないようにweidthを「**px」ではなく「**%」で指定します。これは親要素に対しての%指定になることに注意してくださいね。ご先祖様がpx指定になっていると全部はみ出ることになってしまいますからw。


 div {
	width:100%;
 }

ポイントはちゃんと親要素から順番に指定していくことですね。
これにメディアクエリなどでブレイクポイント(画面幅がいくつになったとき)でスタイルを切り替えるなどを組み合わせてレスポンシブにしていきましょう。

当サイトは画面幅980px以上のデザインと画面幅480px以下のときにブレイクポイントをとって、その間のデザインはリキッドレイアウトで対応という感じになってます。

参考サイト

copyright 2017 eo
  プロフィール  PR:無料HP  湯沢自動車学校  ゲーム 制作  IID  中古ホイール 三重  タイヤ 格安  Webディレクター 専門学校  BATTLEZ  秩父自動車学校  水晶  長崎 合宿免許  音楽 専門学校 福岡  ランドクルーザー トヨタ 中古  リノベーションセミナー