エラスティックデザイン

NO IMAGE

だいたい固定幅デザインで構築していくのですが、
ブラウザに合わせてサイズを可変したいという要望があり、いまごろ挑戦する事に。

可変と言うと%で調整するリキッドデザインかなーと思いましたが
エラスティックという手もあるのだよね。

エラステッィクはレイアウト全体を拡大したり縮小したりするレイアウト。

①固定幅
pxで指定し、ディスプレイの解像度の違いに関わらず、こちらが意図したとおりのレイアウトのまま表示されるので制作しやすい
ワイドモニターで見ると、左右の余白が目立つ。

②リキッド
widthはユーザーによって異なり、
ユーザー側の環境に合わせて調節されるので、ユーザーフレンドリーである一方、
ユーザー側の環境でどのように表示されているかが把握しにくく、
デザイン案のまま表示されない場合がある。(ようするに制作がめんどい・・・)
横に広がりすぎて1行あたりの文字数が増え、読みづらくなることも考えられる。

③エラスティック
エラスティックは固定とリキッドのいいとこどりといわれている
emでサイズ指定して、文字のサイズに合わせて拡大縮小される
bodyのfont-sizeを62.5%に設定しておくと、1em=10pxになるんだとか。
これで少しは作りやすくなるかな。

CSS+htmlカテゴリの最新記事