エラスティックレイアウト
この間購入したXHTML+CSSの本で初めて知ったことがあったので、メモついでに。
このエラスティックレイアウトはユーザーの文字サイズ(ブラウジング環境)変更に伴い、
レイアウト全体が拡大縮小するように変化するレイアウト手法で、固定幅レイアウトと可変レイアウトの中間のようなものらしいです。
【設定方法】
使えそうな割に設定方法は簡単で、固定レイアウトを可変レイアウトにする際に、
Widthの単位を「px」から「%」に変えるのと同様にWidthの単位を「em」に変えるだけで変更可能です。
【単位・単位の変換方法】
「em」は、1文字分の長さを1emとする相対的な単位で、単位の変換方法としては、
例えば文字サイズが10pxの時、Width850pxを「em」単位に変換する場合は、850÷10=85 といった感じで85emとなります。
【注意点】
まれに文字サイズを大きくした場合、横スクロールが発生してしまうことがあるそうですが、
max-widthプロパティを指定して最大幅を持たせることで回避することが出来るそうです。
本のページに変更前と変更後のイメージがあったのですが、見栄えが大分違いました。
機会があれば一度試してみたいと思います。
このエラスティックレイアウトはユーザーの文字サイズ(ブラウジング環境)変更に伴い、
レイアウト全体が拡大縮小するように変化するレイアウト手法で、固定幅レイアウトと可変レイアウトの中間のようなものらしいです。
【設定方法】
使えそうな割に設定方法は簡単で、固定レイアウトを可変レイアウトにする際に、
Widthの単位を「px」から「%」に変えるのと同様にWidthの単位を「em」に変えるだけで変更可能です。
【単位・単位の変換方法】
「em」は、1文字分の長さを1emとする相対的な単位で、単位の変換方法としては、
例えば文字サイズが10pxの時、Width850pxを「em」単位に変換する場合は、850÷10=85 といった感じで85emとなります。
【注意点】
まれに文字サイズを大きくした場合、横スクロールが発生してしまうことがあるそうですが、
max-widthプロパティを指定して最大幅を持たせることで回避することが出来るそうです。
本のページに変更前と変更後のイメージがあったのですが、見栄えが大分違いました。
機会があれば一度試してみたいと思います。

