Melog

サイトのスタイルを一部変更しました。

1. サイトの上下にあったナビゲーションのうち、下の方を削除
2. ナビゲーションを、タイトル部分に移動
3. ナビゲーションの要素を一部変更
4. ナビゲーションのスタイルに、position:fixed;を指定

1番目と2番目の変更点は、大抵のブラウザで変化が分かる。4番目の変更点は、Internet Explorer使いの人には分からない。FirefoxやOpera、Safariといったブラウザでこのサイトをご覧になっている方には、何を目的としてこの変更を加えたのかがよく分かるはず。
解説しておくと、今回の変更は「position:fixed;」を指定することで、ナビゲーションを常にスクリーン上に表示させておくことが目的。IEの人には分からないので、一応スクリーンショットで比較。

従来

ナビゲーションが内側に収まっていた。

現在(IEの場合)

ナビゲーションが外側に突き抜けている（2番目の変更点の影響）。

現在(FireFoxの場合)

加えて、ナビゲーションがスクリーン上部に固定されている(4番目の変更点の影響)。

まぁそんなわけで、ユーザビリティを考慮し、ブラウザ間の互換性も考慮にいれたサイト構成を考えた結果、このようなスタイルに。ちなみに、1番目の変更点は重複を避けるため。3番目の変更点は、内容の意味により近い要素を用いる事を目的とした、自分のポリシー的な物なので、気にしなくていいです(笑)。

あと、ナビゲーションをわざわざ外側に突き出したのは、FirefoxとOperaの解釈の違いを吸収するため。従来の場合（ナビゲーションが内側に収まった状態）、Firefoxは「position:fixed;」とした上で「width: 100%;」を指定すると、ナビゲーションはスクリーンの横幅を基準に横幅100%、すなわちスクリーンの横幅全体に広がる形で表示される（これが自分の意図した表示方法）。しかしOperaは、横幅は本来の幅を基準にするため、「width: 100%」を指定しても横幅全体に広がらない（どちらの解釈が正しいのかは、よく分からない）。その違いを吸収するため、最初からナビゲーションが横幅全体に広がる形にした、という次第。

IEの人は、そのうちMicrosoftが出すIE7にバージョンアップした際に、この違いが分かるかと思います。スタイルシートにはこういった便利な手法もありますよ、と参考になれば幸いです。