Trans

NPOやソーシャルビジネスの創業・経営・マネジメント

2xupで実装されているエラスティックレイアウトを調べてみた。

2xupさんのところで実装されているエラステックレイアウト(Elastic Layout)、もしくはエラステックデザイン、はたまたエラスティックレイアウトというのが気になってしょうがない。今年、アックゼロヨンでグランプリを受賞したみずほ証券でも、似たようなレイアウトが施されている。というわけで、またもや調べてみた。


と、調べてみたはいいものの、うまい具合に実装方法について解説されているサイトが見つからなかった。要は、widthやpadding、marginなどにem指定をして、フォントサイズを変更しても、それに応じてレイアウト幅が変更されるレイアウトのことを言うらしい。A List Apart: Articles: Elastic Designで発表されたのがどうも初めてのようだ。ちなみに、作者が作ったサンプルサイトもある。


でも、456 Berea Streetでよい感じに、自分のサイトをどうやってエラステックレイアウトにしているのかを解説している記事が見つかった。長文になるが、要約的に和訳してみた。和訳したのは、Fixed or fluid width? Elastic! | 456 Berea Streetという記事から。以下、抜粋だけれど、長文。


多くのウェブデザイナが毎回疑問を投げ掛けているのは、新しく始まる案件で、固定幅レイアウトにするか、リキッドレイアウトにするか、ということだ。この件の議論は、その多くが紛糾する。


サイトをリニューアルする際に、私なら、その代わりに固定幅もリキッドレイアウトもどちらのメリットも統合できるようなものを説明するだろう。その答えがエラステックレイアウトである。これは、別に新しいコンセプトではない。A List ApartでPatrick Griffithsが「Elastic Design」という言葉で紹介していたのだから。


この目的の簡単な説明をするためには、header、navigation、footerのHTML構造を外して、残った2つのカラムレイアウトである#mainと#sidebarに焦点を当てようと思う。

<div id="wrap">
	<div id="main"></div>
	<div id="sidebar"></div>
</div>

2つのカラムを作るために、2つの要素を別方向にフロートさせた。

#main {
float:left;
width:59%;
}
#sidebar {
float:right;
width:29%;
}

ここのwidthはブラウザのウィンドウ幅が変更された時に、2つのカラムが拡大するようにパーセントで指定している。


#wrapとこのカラムに若干のスペースを設けたいので、この2つのカラムにマージンを与えている。これは、マージンに柔軟性を与えるというのと、2つのカラムとマージンのトータルな幅を計算しやすいという理由から、パーセントで指定している。


この柔軟性があるマージンはリニューアルの際に書いた記事のコメントで、Richard Rutterが言っている「concertina padding」と同じものだ。

#main {
float:left;
width:59%;
margin:0 0 0 4%;
}
#sidebar {
float:right;
width:29%;
margin:0 2% 0 0;
}

これで、カラムとマージンは整った。このレイアウト幅は現在完全にリキッドである。そうであるが故に、自分のブラウザのウィンドウ幅を非常に大きく拡大し、コンテンツを読もうとする人にとって、新たな問題を引き起こしてしまう(要は、文章がめちゃくちゃ横に拡大してしまうということ)。


それを避けるために、CSSプロパティのmax-widthを#wrap要素に指定してやる。レイアウトのためにはmax-widthにピクセル単位で幅を指定してもよいのだが、その場合は文字サイズを小さくすればするほど1行あたりの文字数が増えてしまい、文字サイズを大きくすればするほど1行あたりの文字数が少なくなってしまうこという新たな問題が発生する。私は、文字サイズ関係なく、サイトを読みやすく、滞在しやすいような1行あたりの文字数にしておきたい。そこで、max-widthにはピクセル指定の代わりに、emを使うことによって、文字サイズが何であろうとも関係なくなるように、レイアウト幅を文字サイズと1行あたりの文字数に依存するようにした。

#wrap {
max-width:70em;
}

その際に、私はもう2つの指定も行っている。1つはレイアウトを中央寄せにするためのもの、もう1つは背景画像が両カラムでリピートされるようにするためのものだ。

#wrap {
margin:0 auto;
max-width:70em;
background:#fff url(/i/separator.gif) repeat-y 67% 0;
}

これでOK。この場合、疑問を持つかもしれない。なんで、レイアウトが小さくなるときのために、min-widthプロパティを使っていないんだ?ということに。私はこの理由が全くもって分からない。なんで、わざわざ人が好んで横のスクロールバーを使いたいがために、狭いブラウザのウィンドウにするんだ?そう、ナビバーはすごく狭いウィンドウも囲い込んじゃうだろう、でもそれが何?


おっと、あともう1つあった。ウィンドウズのIEについて。


IEはmax-widthに対応していないから、対応させてやらないといけない。私が選んだ方法は、マイクロソフトの特別なCSSを使う方法だ。その方法はCSS的にはinvalidで、私は自分のメインのCSSファイルはvalidにしておきたい。そこで、IE用にCSSファイルを分けて、IEだけがCSSファイルを読み込めるように、コメントを使ってやっている。それと、IEにはfloatされたボックスに、その方向にmarginを指定するとmarginが2倍になってしまうというバグがあるので、それへの対応もこのファイルに書いている。

#wrap {
width:expression(document.body.clientWidth > 900? "900px" : "auto");
}
#main {
display:inline;
}
#sidebar {
display:inline;
}

この#wrapルールはブラウザのウィンドウが900pxになるまで、フレキシブルに対応できる。けれど、IEユーザーには、単なる900pxまでのリキッドレイアウトであって、エラステックではない。モダンブラウザには問題ないのだけど、ないよりかはましだろう。


あなたがするべきことは、エラステックはconcertina padding and a maximum widthをすることなのだ。


以上が要約。といっても、ほとんど訳してしまったに違いないけれど。僕も本文を読んでいる中で、min-widthを指定していないのは何故だろう、と思っていた。で、現在のサイトのCSSを調べてみると、きっちり指定してあった。(関係している箇所のみ抜粋)

#wrap {
	margin:0 auto;
	padding:7px 15px 0;
	min-width:600px;
	max-width:70em;
}

#main {
	float:left;
	width:62%;
	margin:1em 0;
	overflow:hidden;
}

#content-secondary {
	float:right;
	width:33%;
	margin:1em 0 0;
}

何にせよ、A List Apartの記事が2004年1月、上記の記事が2005年4月。今まで知らなかったのが不思議なくらい。完全に見落としていたわけだ。情けない。。。


ちなみに、IEのマージンのバグについては、Internet Explorer (Windows) CSSバグリストに詳しく掲載されている。