Entry

ナビゲーション部分の変更

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

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

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

従来

20050706_position1.png

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

現在(IEの場合)

20050706_position2.png

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

現在(FireFoxの場合)

20050706_position3.png
20050706_position4.png

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

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

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

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

Comments (0 件)

コメントを残す

メールアドレスが公開されることはありません。