elasticには「ゴムひも・弾力がある・融通のきく」といった意味があり、エラスティックレイアウトとは「伸び縮みする(融通がきく)レイアウト」といった意味になります。

なんでも「em」という単位があって「1em=1文字」らしいんですね。
で、サイトのレイアウトを行う際に%だったり、pix(ピクセル)で構成することが多いと思いますが、これは「文字数」で構成するらしいんですよ(例えば70emだった場合70文字数[Mサイズ]の幅のボックスができる)。
文字数で幅が決定されるため、例えばユーザー側で文字サイズを変更した場合、それに伴いボックスのサイズも変わるってことのようです(パッと思い浮かんだのはイラレの拡大ツール)。

このように文字数で幅を決めることにより、文字サイズを変更した際に起きるような「レイアウト崩れ」が防げるらしいんですよ。
レイアウトを保ったまま、文字サイズだけ変えて外側の枠が大きくなる、というとわかりやすいですかね。イラレのようです(DTP出身者の僕としてはどーしてもこれが浮かんでしまう)。

ただ、画像は大きくならないです(FlashとJavaScriptを使うと解決できるようですが・・・詳しくはuziqさん:WEBデザイン&AJAXで紹介されています。それでも解像度の問題とかはどうにもならないでしょうが)。

あと、どうやらIE7以降でないと動かないようですが、対処法(ウノウラボ:エラスティック・レイアウトのご紹介にて紹介されています)はあるようです。

高齢者の方への配慮やモニタサイズのバラつきなどを考えるとどうしても、こういった手法は取り入れざるを得ないだろうし、ユーザーのことを考えていないサイトはユーザーから受け入れられないと僕は思っています。

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください