可変レイアウトの一種:エラスティックレイアウトとは?

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

つい最近、『エラスティックレイアウト』というレイアウト手法を聞いたので、少し調べてみました。

■参考:ウノウラボ Unoh Labs: エラスティック・レイアウトのご紹介

Webページのレイアウトをする際には、大きく分けると「幅固定」と「幅可変」の2種類がありますが、『エラスティックレイアウト』とは、この2つのうちの「幅可変」のほうに属するレイアウト手法。ウインドウの幅に合わせて幅が可変する『リキッドレイアウト』に対し、『エラスティックレイアウト』は文字サイズを基準にして幅の可変を行うようです。

CSSで可変幅を設定するとき、リキッドは「%」指定ですが、エラスティックは「em」指定になっています。

■リキッドレイアウトの場合の例

#container {
  width: 70%;
}

■エラスティックレイアウトの場合の例

#container {
  max-width: 70em;
}

自分でも勉強を兼ねて簡単なサンプルを書いてみました→こちら
※ブラウザの文字サイズを変更すると、文字サイズとともに幅も変化します。幅は最大幅指定ではなく単純に「width:40em;」のような指定にしてみました。(ソースを見る場合は右クリックで)

ちなみにこのサンプルは中央寄せ表示にしているんですが、IEだと6でも7でも、文字サイズを初期状態から小さくしていく場合にのみ、なぜか中央寄せではなく左に寄っていきます。Firefoxでは問題なく常に中央寄せになったんですが、これもIEのバグなんでしょうか。それともCSSがいいかげんなせい?

今までほとんど幅固定でやっていたのでなかなか違和感がありました。幅固定に比べると当然柔軟性はあるんですが、初心者には扱いが難しそうです。ちゃんと最低幅と最大幅は指定しておかないと、小さくしすぎても大きくしすぎても読みづらくなりますね。最低幅と最大幅の設定に関しては、当ブログ過去エントリーの「IEでmin-widthやmax-widthを実現するCSSテクニック」が参考になると思います。

その他参考にしたページ
エラスティックレイアウトって何?:ITpro

▼スポンサードリンク

Posted at 2007年10月25日 | 記事URL | CSS | Trackback(0) | Comment(0) | Top↑
1つ後の記事:IE7(Internet Explorer 7)を大幅にカスタマイズ可能にするアドオン『IE7Pro』
1つ前の記事:MSN Japanのトップに「Live Searchで初音ミクを画像検索!」という表示があったので、色々なブラウザで閲覧してみた














管理者にだけ表示を許可する

トラックバックURL
→http://smallwebmemo.blog113.fc2.com/tb.php/123-8faf26c1
この記事にトラックバックする(FC2ブログユーザー)
Home