コーディングメソドロジー

第20回 CSSによるロールオーバー処理

グローバルナビゲーションやページ内のボタンなど、サイト上でクリックできる画像には、ほぼ全てと言ってもいいほどロールオーバーはよく使われています。よく見る処理ですが、そのコーディングにはいろいろな方法があります。
コーディングファクトリーでは、シンプルなソースコードで記述できることから、現在はCSSを使用したロールオーバーを使用することが主流となっています。今回はそんな中から、グローバルナビゲーションでよく使用されるロールオーバーの設定方法のいくつかをご紹介します。

背景を動かすロールオーバー

背景を動かすロールオーバー

背景に1枚画像を敷き、背景画像の座標を変更するタイプのロールオーバーで、CSS Spriteと呼ばれます。以前はよく使用されていましたが、Firefox2.Xの印刷で背景の縮小に対応できないという印刷上の問題や、IE6の透過PNG処理と重なると透過されなくなることがあるなどの理由で、現在はあまり使っておりません。

要素を消すロールオーバー

要素を消すロールオーバー

背景にオーバー用の画像を置き、マウスが乗った時にimg要素を見えなくする方法です(visibility:hidden;)。処理自体は単純なので、比較的古いブラウザでもバグが出にくかったり、JavaScriptと組みあわせても不測の挙動を起こしづらいという安定感があります。その半面、エンドユーザなどのCSSに不慣れな人が運用を行う際は、記述がわかりづらいかもしれません。

画像を動かすロールオーバー

画像を動かすロールオーバー

CSS Spriteを背景ではなくimg要素として配置し、a要素にネガティブ(マイナス方向の)マージンを指定して動かす方法で、最近、比較的流行しているコーディング方法です。
1枚画像で済むので画像の管理が楽でページ表示の際の読み込みも早いことや、JavaScriptとの併用でも特に問題が無いことが多いです。

今回はCSSのみでのロールオーバーの方法をご紹介しましたが、最近では、JavaScriptとの組み合わせで、瞬間的にではなくゆっくりとオーバー用の画像に変化したり、Flashと見間違うような大胆な挙動をさせるロールオーバーのサイトも出てきました。
コーディングにおいては、どれが正解でどれが間違いということはなく、運用後の更新の可能性や対応ブラウザなど、案件によって何を優先させるべきなのかということを考えて、適切なロールオーバーを選んでいける知識や経験が必要になってきていると感じています。

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム