site_make

リキッドレイアウト

2015-02-22

リキッドレイアウト

liquidlayout

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

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

作り方

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


 div {
	width:100%;
 }

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

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

参考サイト

copyright 2018 eo
  プロフィール  PR:無料HP  綜合自動車学校  専門学校 学費  タイヤ 低価格  カーナビ 持ち込み  タイヤ VOXY 格安  インテリア 専門学校  激安中古ホイール  ルチル  白井 リフォーム  株エヴァンジェリスト  ヴォルヴォ 中古  名簿業者