Feb08
エラスティックレイアウト
ブログのレイアウトをエラスティックレイアウトにしてみましたので、やり方を簡単にまとめて紹介しようと思います。
まずエラスティックレイアウトとは何かということからご説明します。
エラスティックレイアウトとは幅は固定ながらウィンドウサイズや文字サイズを変更することで固定幅が変化するレイアウトのことを指します。
参考にした2つのサイトをご紹介します。
2xupで実装されているエラステックレイアウトを調べてみた。をご参照ください。
一行あたりの文字数を制限する elastic layout （エラステックレイアウト）
まずは(X)HTMLの構造を以下だと想定します。
<div id="container"> <div id="main"></div> <div id="sidebar"></div> </div>
div#containerのmin-width、max-widthをemで指定します
これは文字サイズ変更でレイアウトが変わるようにするためです。IE6はmin-width、max-widthが効かないのでIE独自の指定した数値の幅まではフレキシブルに変動する機能を持つプロパティを指定します。
*html div#container{ /* IE6ハック */
width:expression(document.body.clientWidth > 960? "960px" : "auto");
}
div#container {
min-width:40em;
max-width:60em;
}
div#mainとdiv#sidebarのwidth、marginを％で指定します
これはdiv#containerの幅によってdiv#mainとdiv#sidebarのwidthを変動するようにさせるためです。div#containerの内部はリキッドレイアウトということですね。
div#main {
float:left;
width:59%;
margin:0 0 0 4%;
}
div#sidebar {
float:right;
width:29%;
margin:0 2% 0 0;
}
エラスティックレイアウトを実践するためにはプロパティの指定でem、%、 pxなどを併用して使用するため、これらの数字が一体どのくらいの幅なのか直感的にわかりにくいと思うので、近似値表を見つけたので、これを参考にしてください。
Approximate Conversion from Points to Pixels
imgも文字サイズによって拡大したい場合はFLASHとJavascriptを組み合わせたライブラリを使うことで実現します。エラスティックレイアウトでイメージを自動で拡大する方法
Coments
>>おぉ、本当によく勉強してるねー。いつも参考にさせてもらってますわ。
最近、クロスブラウザ、印刷用CSS、数々の壁にぶち当たりまくりなんで、何かそれらの問題を一掃できる技術がないものか……。
そうそう、Wordpress勉強してみたいと思います。商用ライセンスがタダってのが魅力的やね。
u_ziqはCSS NITEは来るんかね？
投稿者: KOZZY | 2007年2月10日 16:24
KOZZY>
行こうと思ってます。でも値段が下がらなかったらきついっすね。
たぶん行くと思いますよ。
投稿者: u-ziq | 2007年2月13日 10:19