前回の続き。
ポイントのふたつめは、未対応のIE6との兼ね合いである。position:fixed、透過PNGのどちらも対応しないIE6のために、まず、position:absoluteと通常のGIFでメニューを配置し、そのあとに、fixedになるところだけ子セレクタや隣接セレクタなどIE6よけを用いてposition:fixedと透過PNGを指定する。これで、モダンブラウザユーザーには上部メニューの固定や透過PNGの恩恵が得られる一方で、IE6では透過も固定もされず、メニュー部も一緒にスクロールするようになる。ページを開いたときは、IE6も各モダンブラウザも同じ見た目になる。
ロゴ部分。サンプルではただのテキストにしているが、普通は画像を用いることになろう。
#logo {
position: absolute;
top: 0;
left: 0;
margin: 0;
width: 759px;
height: 96px;
background-color: #357bc4;
background-image: url(images/back-logo.gif);
background-repeat: repeat-x;
}
head+body #logo {
position: fixed;
}上部メニュー部分。IE6はアルファチャンネルつきPNGの表示に問題があるので、透過しないバージョン（back-mainnav.gif）と透過するバージョン（back-mainnav.png）の両方を用意する。
#mainnav {
position: absolute;
left: 0;
top: 96px;
width: 759px;
height: 34px;
background-image: url(images/back-mainnav.gif);
background-repeat: repeat-x;
}
head+body #mainnav {
position: fixed;
background-image: url(images/back-mainnav.png);
}本文、サイドメニューやフッターはfloatで組んでいる。上部だけposition:absolute/fixedを使っているので、その分ヘッダーのposition:absolute/fixedを指定しない部分にpadding-topを指定する。
ポイントの最後は、発生するさまざまな問題への対処だ。
大きいのは、文書内アンカーに到達できるか、という問題である。文書内のアンカーへ飛ぶ際、そのままだとアンカーは画面の一番上に表示されてしまい、position:fixedを指定したメニューの裏に隠れてしまう。これがフレームと違う一番大きなところだろう。
メニューの裏に隠れてしまう(240 by 148 pixels, 5.9KB)
メニューの下側にテキストをうまく持ってくるためには、padding-topが必要になる。marginだと意味がないし、paddingでもMacIE5だとうまくいかなかったりするので、いろいろ考える必要が出てくる。たとえば、画面の先頭へのリンクをはる場合は、absolute/fixedを指定しない#headerにメニューの高さ分のpaddingを指定する。
画面の先頭へリンクをはる場合(240 by 210 pixels, 6.9KB)
次に、それに加え、たとえば本文の最初のh2要素にid（#contenttitle）をつけて、そこにリンクをはる場合を考えてみよう。この場合も、リンクに飛んだ際テキストが出るためには、padding-topをメニューの高さ分確保する必要がある。
本文の最初のh2要素にリンクをはる場合 (240 by 210 pixels, 6.8KB)
当然、これだとh1（ページのタイトル）とh2（#contenttitle）の間が開きすぎてしまうので、負のmargin-topを指定して上部の文章との幅を狭めることが必要になる。たとえば以下の例のように。
head+body #contenttitle {
padding-top: 130px;
margin-top: -110px;
}すると、今度は本文中の#contenttitleの上部、たとえばパンくずリスト中のリンクがマウスで選択できなくなる（IE7）。アンカーになるところのz-indexを1にし、本文にposition:relativeとz-index:2を指定するなど対処が必要だ。
さらに、負のmargin-topを使う場合は印刷時にSafariではまる。これについてはADP: 負のマージンとSafariの話を参照の上、回避されたい。
以上のように、考えなければならないことはいくつもある。単に、透過PNGを用意して貼り付ければいいだけではない。なので、期待したほどはすぐには普及しないかもしれないが、フレームの時代のことを考えると、ロゴや上部メニューを常に表示することに対するデザイン側の需要はかなりあると思っている。レイアウトで可能な選択肢の一つとして無理のない使い方ができるよう、このエントリだけでなく、問題を克服するための情報がいろいろ出てきてくれることを望んでいる。
トラックバックURL: http://adp.daa.jp/cgi/mt2/mt-tb.cgi/644