日記のヘッダとフッタをCSSで固定表示にしてみた


ただし固定表示されるのは、IE以外のモダンブラウザ(Opera,Firefox,Safariなど)になります。(Safariは未確認。大丈夫だと思いたい)元のデザインが固定表示を想定していないため、境界をグラデーションでごまかしたりしてちょっと強引な感じです。

今回の固定表示は上記ページで紹介されているテクニックにインスパイアされました。本来ならそこのサンプルの様にIE6/IE7に対応させることも可能なはずなんですが、ここ「はてなダイアリー」にはIE後方互換モードとなる問題があるため、対応不可能でした。*1 *2
フレームっぽい表示にするテクニックは、他に「CSS Frames v2, full-height | 456 Berea Street」のコメントで紹介されている「Header, Footer and Scrollbar」も面白いです。こちらはスクロール範囲にのみバーが表示されるため、本当にフレームの様です。*3
ちなみにIE7(RC1)の後方互換モードは、ボックスモデルの解釈が異なるだけではなく、IE7で新たに対応となったCSSのプロパティやセレクタ類も全て無効となる模様。(IE6の後方互換とほぼ同じ。IE5.5相当か?)はてながいつまで標準を拒否して後方互換を引っ張り続けるつもりなのか少し気掛かりです。

*1:はてなアイデア

*2:2006-09-13 後方互換IEにも対応できました。詳細は「続・日記のヘッダとフッタをCSSで固定表示にしてみた - KAZUMiX memo」にて

*3:これも標準準拠モード用。後方互換ではNGのため、はてなでは使えない、残念