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

size.gif

imgも文字サイズによって拡大したい場合はFLASHとJavascriptを組み合わせたライブラリを使うことで実現します。エラスティックレイアウトでイメージを自動で拡大する方法

Related entries

Track back URL

http://u-ziq.com/cgi/mt/mt-tb.cgi/124

コメント

>>おぉ、本当によく勉強してるねー。いつも参考にさせてもらってますわ。

最近、クロスブラウザ、印刷用CSS、数々の壁にぶち当たりまくりなんで、何かそれらの問題を一掃できる技術がないものか……。


そうそう、Wordpress勉強してみたいと思います。商用ライセンスがタダってのが魅力的やね。

u_ziqはCSS NITEは来るんかね?

KOZZY>
行こうと思ってます。でも値段が下がらなかったらきついっすね。
たぶん行くと思いますよ。

Coments

▲TOP

FEED

RSS    

JOB INFO




ANNOUNCE

  • 現在はありません。イベント&セミナーなどのお知らせを掲載してほしい方はお問い合わせフォームよりお気軽にご連絡ください。

WHO IS WRITING

テクノラティお気に入りに追加する

WEBデザインとシステムの共存、WEBストラテジーを考えた情報設計(IA)