yamaokaです。

エラスティック・レイアウトというwebサイトのレイアウト手法をご存知でしょうか？　 「エラスティック（elastic）」とは、ゴムのように弾力性がある状態のことです。 言い換えると「伸び縮みするレイアウト」になるでしょうか。

webサイトの代表的なレイアウト手法として、次の2つが挙げられるかと思います。

• 固定幅レイアウト
• リキッド・レイアウト

固定幅レイアウト

固定幅レイアウトでは、 コンテンツを格納するボックスの幅を以下のように絶対値で指定します。

div#container {
  width: 800px;
}

リキッド・レイアウト

リキッド・レイアウトでは、 コンテンツを格納するボックスの幅を以下のように相対値で指定します。

div#container {
  width: 80%;
}

エラスティック・レイアウト

では、エラスティック・レイアウトとはどのようなレイアウト手法なのでしょうか。 CSSを使用したサンプルの宝庫、CSS Zen Gardenに エラスティック・レイアウトの実際例があるので見てみましょう。

以下がそのサンプルを文字サイズを変更しつつ閲覧した場合のスクリーンショットです。 上から順に、文字のサイズを小、中、大と変更しています。


レイアウト例（小） posted by (C)フォト蔵


レイアウト例（中） posted by (C)フォト蔵


レイアウト例（大） posted by (C)フォト蔵

一見して気づくのは、それぞれが相似形のようになっている点です。 全体のレイアウトを保ったまま、文字のサイズが変更されているのがわかります。 ちょうどゴムを伸ばしたような感じですね。 どのようにしてこのレイアウトは実現されているのでしょうか。

エラスティック・レイアウトの場合、以下のように文字サイズ単位で最大幅を指定します。

div#container {
  max-width: 70em;
}

また、以下のように最小幅も同時に指定することでより細密なレイアウトを定義することもできます。

div#container {
  max-width: 70em;
  min-width: 60em;
}

IE6以前への対応

CSSのmax-width属性、min-width属性はほとんどのモダンブラウザでサポートされていますが、 残念なことにInternet Explorer 6（以下IE6）以前ではサポートされていません。 そのため、IE6にも対応するためには別の方法をとる必要があります。

IE6でもmax-width属性、min-width属性を動作させるためのJavaScriptライブラリ、 minmax.jsを利用するか、 下記のようにInternet Explorerでだけ動作するexpression属性を使うと エラスティックなレイアウトのようにすることができます。

* html div#container {
  width: expression(document.body.clientWidth < 600 ? "600px" :
    document.body.clientWidth > 800 ? "800px" : "auto");
}

アクセシビリティの問題

エラスティック・レイアウトはいいことづくめのように聞こえますが、もちろん欠点もあります。 レイアウトが文字のサイズに応じて決定されるため、文字のサイズを非常に大きな値にすると、 水平方向のスクロールバーが表示されるようになってしまいます。 そのままでは、弱視の方などにとってのアクセシビリティを欠くことになります。

画像の問題

また、文字のサイズを変更した場合に画像のサイズが変更されないという問題もあります。 swfIRなどのJavaScriptのライブラリを利用すればいいのですが、 画像を拡大した場合には解像度が低下してしまうので注意が必要です。 この問題に関しては、できるだけ影響しない範囲で画像を使うようにするしかありません。

まとめ

エラスティック・レイアウトはリキッド・レイアウトの一形態として捉えることができます。 しかし同時に、最大幅を文字のサイズに応じて決定することで、固定幅レイアウトの長所を取り入れているともいえます。 上記のような問題もありますが、新しいレイアウトの試みとして面白いのではないでしょうか。

参考

最後に、記事を書く上で参考にしたページを挙げておきます。

• 一行あたりの文字数を制限する elastic layout （エラステックレイアウト） - 2xup.org
• TRANS - 2xupで実装されているエラステックレイアウトを調べてみた。
• エラステックレイアウト(Elastic layouts)のメモ | Emotional Web
• エラステックレイアウトのメモ(その2) | Emotional Web
• WEBデザイン&AJAX: エラスティックレイアウト
• WEBデザイン&AJAX: エラスティックレイアウトでイメージを自動で拡大する方法
• Lucky bag::blog: 固定幅ベースの elastic レイアウトサンプル