TOPページへ

エラステックレイアウトsampleページ | 久保田涼子 Official Website

三段組エラスティックレイアウト
―2色の背景色をBOXの長さに関係なく均一に下まで伸ばす―

サンプルがあったら便利かな～。と思って作ってみました。（最終更新日：2008/05/28）


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

ブラウザの文字の大きさを変更したときに、全体のレイアウトを崩すことなく、ズームのようにレイアウトが伸びたり縮んだりする手法。
yahooや、MSNのトップページ、みずほ証券のページが例として挙げられる。
※px固定のレイアウトだと、文字を大きくした場合、レイアウトは縦幅しか伸びない。エラステックレイアウトは横幅も可変する。

★エラスティックレイアウトで作られたサイトのリンク集

【三段組エラスティックレイアウトを作る】

★今回のエラスティックレイアウトはYUIのGrid Builderをテンプレートにした。

YUI　Grid Builder：http://developer.yahoo.com/yui/grids/builder/

Toolbox内の設定は以下のように行った。
＊　Body size： 950px（＊今回は横幅がどこまででも小さくなるレイアウトではなく、950pxを最小値として踏みとどまる設定。）
＊　Body Columns：Sidebar left 180px
＊　Spilit Content：Row：2Column(75/25)

Show Codeを押し、コードを利用。
スタイルシートは、コード内に書かれてあるhttp://yui.yahooapis.com/2.5.1/build/reset-fonts-grids/reset-fonts-grids.cssを利用。

★YUIのソースを改良。

  • CSS内に書かれてある不要なCSSを削除。
  • HTMLとCSSのネーミングを変更。
  • 背景色対策のため、HTMLに<div>を追加
  • BOXの横幅指定がemになっているところを%に変更。
    （こうすることで、文字を小さくした場合も横幅は同じ比率で小さくなり、レイアウトが崩れない。）

☆レイアウト幅指定の注意点

  • 基本%、emを使う。
  • ブラウザによって数値の認識の仕方が微妙に違う。小数点第二位、第三位くらいまで書くと、あうことがある（例.15.65%や25.655%など）。
    どうにもならないときはハックで※対応。
  • IEはmax-width、min-widthを認識しないので、JavaScriptライブラリ、
    minmax.js　http://doxdesk.com/software/js/minmax.htmlを読み込んで制御

※ハック内の　*margin{ ...} の「*」はIE6とIE7に効かせているハック。

☆出来上がったレイアウトの構造

【三段組エラスティックレイアウトに背景をつける】

★背景色指定の考え方のコツ

油絵式に、下から上に順に塗っていく感覚で指定するとうまくいく。
たとえば、2カラムのレイアウトで左のナビ部分を青色に、右のコンテンツ部分を白くしたい場合。
ベースになる<div>の背景を青色にして、その上の<div>を白色にした後、その白色<div>を任意の大きさにしてfloatでずらし、下の青色を見せる。

★2色※の背景色をBOX内の内容の量に関係なく均一に下まで伸ばす

※ここでいう2色とは、下図の①(family-nav-area)、②(contents-wrapper03)の色部分のこと。

従来の「2色を一枚の背景画像にしてrepeat-yで流し込む」方法は、画像が可変しないので使用出来ない。
そこで考えたのが、背景画像とbackgroundの色を組み合わせた以下の方法。（※この方法だと、背景画像を指定するだけの余計な<div>が一つ増えるが、目をつぶることにする・・・。）

※画像クリックで拡大

contents-wrapper02に指定しているfamily-nav-areaの幅の背景画像（色：#666）は、IE用に1px長いものを用意する。
ハックでIEだけにその画像を読み込む。

★あとがき

以上の方法は、ネット上で公開されているエラスティックレイアウトのサイトを参考にして独自に応用したもの。
IE7からズーム機能が搭載されているので、今後エラスティックレイアウトの定着化があるか定かではないが、話の種に作成しても良いかも？

▲このページのトップに戻る