IE7になるとposition:fixedと透過PNGがようやく使えるようになる。であれば、当然、上部メニューを固定させてさらに透過させよう、という考えも出てくる。フレームは他の問題が多くて使われなくなってきてしまったが、上部メニューの固定は相変わらず需要があると思う。今回はその特集。
ADPでやっているのをそのまま説明してもいいが、そちらはその他のしかけが多すぎるので、別にサンプルをデザインテンプレート1006としてダウンロードもできるようにした。実は、知人に頼まれて作るやつの土台になっているので、いつものより実用性重視なものになっている。どうぞ自由に使ったりいじったりしてください。
HTML側の構造は以下のとおりである。このうち、#logoと#mainnavにposition:fixedを指定する。その他は、h1までは上から順々に並べていき、#content, #subnavはどちらの高さが高くなっても大丈夫なようにfloatを使ってレイアウトする。
<div id="container">
<div id="header">
#logo
#mainnav
#breadcrumbs
</div>
<h1></h1>
<div id="content"></div>
<div id="subnav"></div>
<div id="footer"></div>
</div>大きなポイントは3つある。
ひとつめは、透過PNGの使いどころである。思ったより効果的な使い道が少ないのが実情だ。
透過PNGは、透けているとわからないとつまらない。スクロールなどで変化しないならば、もともと透過した結果の画像を作ってしまえばよい。このため、PNG使いました！というのがわかるようにするには、position:fixedを組み合わせてスクロールした際に透過具合が変化するようにするといい。
しかし、どこを透過させるかが重要になる。本文の背景を透過させると、本文が極端に読みにくくなってしまう。数年前ならいざ知らず、今は面白いからと言って使い勝手を極端に悪くすることはできないので、本文の背景は通常通り、単色のままにしておくのがいいだろう。
とすると、上部メニューを透けさせるのは（比較的）理にかなっている。今回の例やADPでは、メニューを透過させてロゴ部分を透過させていない。これは、特に企業サイトではロゴは重要なので邪魔しないほうがいいこと、部分だけの方が透過の効果がよくわかること、場合によってテキストを画像で隠すこともあるのでその覆いにできること（透過PNGでは隠すことができない）、の理由からだ。
メニュー部分を透過させるにしても、不透明度を80%以上にして、使い勝手が悪くなりすぎないようにしたい。また、後述するように、ページを開いた際、ページの先頭に戻ったときにはメニューの下に本文が来ないようにしている。
とにかく、透過PNGは使うだけで実際は邪魔なので、できるだけ邪魔にならないような形で邪魔をする（笑）ことが必要だ。
続きは次回。
トラックバックURL: http://adp.daa.jp/cgi/mt2/mt-tb.cgi/643
テレビでフラガールを見ながら書いたので、非常にわかりにくい文章になってしまいました。すみません。ちょろちょろ直します。