unoh.github.com

エラスティック・レイアウトのご紹介

2007-04-03 07:01:47 +0000

yamaokaです。

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

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

固定幅レイアウト

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

div#container {
  width: 800px;
}
固定幅レイアウトの場合、ウィンドウや文字のサイズが変更されてもレイアウトの枠は変わりません。 したがって、ウィンドウを大きくすると表示されるエリアが小さくなってしまったり、 文字のサイズを変更すると外枠が変わらないので読みづらくなってしまったりします。

リキッド・レイアウト

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

div#container {
  width: 80%;
}
リキッド・レイアウトの場合、ウィンドウのサイズが変更されるとそれに応じてレイアウトも変化します。 ユーザーの環境に最適化した表示をさせることが可能です。 しかしウィンドウの幅が大きくなった場合に、レイアウトの横幅が伸びてしまい、 1行あたりの文字数が増えてしまった結果、やはり読みづらくなってしまう場合が多いです。

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

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

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

エラスティック・レイアウト例(小)
レイアウト例(小) posted by (C)フォト蔵

エラスティック・レイアウト例(中)
レイアウト例(中) posted by (C)フォト蔵

エラスティック・レイアウト例(大)
レイアウト例(大) posted by (C)フォト蔵

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

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

div#container {
  max-width: 70em;
}
このようにすることで、レイアウトの最大幅が文字のサイズと同期するようになります。 したがって、レイアウトがウィンドウの幅に左右されることなく、 幅が広がって1行あたりの文字数が増え、読みづらくなることを防ぐことができます。

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

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のライブラリを利用すればいいのですが、 画像を拡大した場合には解像度が低下してしまうので注意が必要です。 この問題に関しては、できるだけ影響しない範囲で画像を使うようにするしかありません。

まとめ

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

参考

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