#TOP



#CONTENT


Michael Paul Young
http://www.michaelpaulyoung.com

この間購入したXHTML+CSSの本で初めて知ったことがあったので、メモついでに。

このエラスティックレイアウトはユーザーの文字サイズ（ブラウジング環境）変更に伴い、
レイアウト全体が拡大縮小するように変化するレイアウト手法で、固定幅レイアウトと可変レイアウトの中間のようなものらしいです。


【設定方法】
使えそうな割に設定方法は簡単で、固定レイアウトを可変レイアウトにする際に、
Widthの単位を「px」から「％」に変えるのと同様にWidthの単位を「em」に変えるだけで変更可能です。


【単位・単位の変換方法】
「em」は、１文字分の長さを1emとする相対的な単位で、単位の変換方法としては、
例えば文字サイズが10pxの時、Width850pxを「em」単位に変換する場合は、850÷10=85 といった感じで85emとなります。


【注意点】
まれに文字サイズを大きくした場合、横スクロールが発生してしまうことがあるそうですが、
max-widthプロパティを指定して最大幅を持たせることで回避することが出来るそうです。


本のページに変更前と変更後のイメージがあったのですが、見栄えが大分違いました。
機会があれば一度試してみたいと思います。

このブログをリニューアルをするにあたり、マークアップに関して復習していたほうがいいと思い、復習用に本を一冊購入しました。

MｄN発行の「XHTML&CSSデザイン基本原則、これだけ。」という本で、「効果的かつ効率的なCSSレイアウトのために。これだけ読めばわかります、スタイルシートの現在。」と「初級者から今一度復習したいという中級者の復習向けに書かれている。」という謳い文句に惹かれました。笑

まぁ、なにはともあれ、せっかく買ったので買って満足という自身によくあるパターンに陥る前にしっかり復習したいと思います。