[使えるCSSテクニックVol.2] CSSで実現するエラスティックレイアウト
前回ご好評をいただいた「使えるCSSテクニック」ですが、
今回は「使えるCSSテクニック Vol.2」として弊社デザイナーから前回同様、WEB制作で使えるCSSテクニックをご紹介していきます。
第1回は、エラスティックレイアウトについてです。
WEBサイトレイアウトでは以下のレイアウトが基本となっています。
- 固定（ソリッド）レイアウト
名前のとおり、横幅固定のレイアウトです。特に説明する必要もありませんね。 - 可変（リキッド）レイアウト
ブラウザのウィンドウサイズに合わせて、伸縮するレイアウト手法です。エラスティックレイアウトも、可変レイアウトの一種になります。
前置きはこの辺で。
エラスティックレイアウトについて
エラスティック【 elastic 】には、ゴムひも・しなやかな・伸び縮みするという意味があります。
ここで言うエラスティックは「伸び縮みする」という表現が一番近く、文字サイズの変更によってレイアウト幅が可変するものをエラスティックレイアウトと言います。
エラスティックレイアウトを採用している主なサイト
エラスティックレイアウトを採用しているサイトには以下のようなものがあります。
エラスティクレイアウトのCSS
CSS は以下の通りです（重要な箇所だけ抜粋）。
div#container {
max-width: 20em;
}
div#container p img {
max-width: 20em;
}エラスティックレイアウト場合、サイズの指定にemを利用するのが一般的です。
max-widthプロパティに表示したい文字数分をemの単位で設定します。
また画像についても CSSで設定することで、エラスティックに対応することができます。
max-widthおよびmin-widthプロパティですが、最近のモダンブラウザはほとんどサポートしていますが、 IE6では未対応のためIE6で実現するためには別途CSSハックでの処理やライブラリを使用してのmax-width設定が必要となりますのでご注意ください。
次回は、「 CSSを使った見栄えの良い見出し」です。お楽しみに！
