site_make

リキッドレイアウト

2015-02-22

リキッドレイアウト

liquidlayout

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

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

作り方

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


 div {
	width:100%;
 }

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

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

参考サイト

copyright 2018 eo
  プロフィール  PR:無料HP  度あり カラコン  製菓 専門学校  16インチタイヤなら  中古ホイール 愛媛  タイヤ WISH 激安  東京 専門学校 資格  モンキー 中古パーツ  タイガーアイ  業務用食品  TMJ投資顧問 口コミ  ランドクルーザー トヨタ 中古  名簿販売