Webデザインのレイアウトをまとめる
レスポンシブwebデザイン(Responsive Web Design)
一つのソースでディスプレイの幅に合わせてデザインを最適化する方法
CSS3のMedia Queriesを利用してディスプレイサイズに応じてデザインを変更する
エラスティックレイアウト(Erastic Layout)
要素の単位をemで指定する
emは1文字分の幅なので文字の大きさを自由に変えてレイアウト幅を変更する
リキッドレイアウト(Liquid Layout)
要素の単位を%で指定する
ブラウザサイズによって相対的・可変的に幅が変わり、サイズに合わせて情報を提供できる
フレキシブルレイアウト(Flexible Layout)
リキッドレイアウトと同じで要素の単位を%で指定する、最小幅と最大幅を指定する
最大値と最小幅を指定してるため可読性やレイアウトの崩れをコントロールできる
固定幅レイアウト(Fixed Layout)
要素の単位をpxで指定する
レイアウト幅が固定され、意図した通りのレイアウトで表示される
グリッドレイアウト(Grid Layout)
架空の縦横線を下地とし、そこに出来たブロックごとに文字や画像などの要素を配置する
整った安定感のあるレイアウトになるが、多くのサイトで使われているので見慣れたレイアウトになる
可変グリッドレイアウト(Fluid Grid Layout)
グリッドベースのpxを%に変えて、グリッドの仕組を可変レイアウトにする
ブラウザサイズに合わせて整った要素が再配置されるので、正確に情報を伝えられる
コメントを残す