ナビゲーションの画像

ナビゲーションの画像

今回は前回の記事を題材にして、なぜ「画像を一枚にするのか？」っというところにスポットを当ててみます。

ナビゲーションを簡単に作ろうと思えば「id（#homeなど）ひとつに対して画像を作った方が早い」っというのは当然のことです。idに対してそのid用の画像を設定するだけで細かな設定が必要ありませんから。
もし、これがロールオーバーのアクションも何も設定しないのであればそれでも構わないのですが、たいていのホームページはロールオーバーのアクションをつけるのが至極当然な話です。
では、なぜロールオーバーするといけないのか？それはCSSだとロールオーバーする時に画像を読み込むための遅延が発生するからです。これはサーバやPC性能が悪いとかいうレベルの話ではなくどんな環境下でも起こるものです。まあ、なんだかんだ言うよりやってみましょう。

サンプル

どうでしょう？まあ、画像も小さいですし、そこそこのPC環境と接続環境であればそこまで気になるものでもないかもしれません。しかし、、ブラウザによっては、ロード中のアイコンがフェイバリットアイコンを表示している部分にちらちら表示されてあまり見栄えがよくありません。ものによっては、読み込みに時間がかかって画像自体がチラチラすることもあります。

これがロールオーバー時の画像も含めて一枚の画像になっていれば、最初にページを読み込んだ時点で読み込みが完了するのでこういった減少を回避することができます。

画像を一枚にするとファイルサイズが大きくなって結果ページの読み込みが遅くなるんじゃないの？っという議論が間々あるようですが、どちらにせよ最終的に読み込まなければいけないファイルサイズは違わないですし、ナビゲーションの画像を一枚の画像にしたぐらいで読み込に時間がかかるというようなことはないです。もし、ページの読み込みがあまりにも遅いという場合は、他の原因を考えるべきでしょう。

～08/10/12～

タグ: cssナビゲーション, cssメニュー, ナビゲーション, ナビゲーション画像

前の記事

次の記事

Comments

名前 (必須)

メールアドレス (必須)

コメント

	アイ・オー・データ機器 USB 2.0/1.1対応 フラッシュメモリー「ToteBag Smart」シリーズ 16GB ブルー TB-ATA16G/B
	洗練されたデザインとスライド式機構を備えた、アルミボディのUSBメモリーです。アルミ表面に鏡面仕上げを施すことで、アクセサリーのようなプレミアム感を実現しました。セキュリティ対策としてファイル暗号化ソフトの「QuickSecure」に対応しています。
	6,329円

関連記事

• ナビゲーションメニュー（実用編Ⅱ）
• ナビゲーションメニュー（実用編Ⅲ）
• ナビゲーションメニュー（実用編Ⅳ）
• ナビゲーションメニュー（応用編Ⅱ）

最近の記事

• CSSでグラデーションの背景
• ナビゲーションメニュー（実用編Ⅳ）
• ナビゲーションメニュー（実用編Ⅲ）
• ナビゲーションの画像
• ナビゲーションメニュー（実用編Ⅱ）
• ナビゲーションメニュー（実用編Ⅰ）
• ナビゲーションメニュー（応用編Ⅱ）
• ナビゲーションメニュー（応用編Ⅰ）
• ナビゲーションメニュー（基本Ⅲ）
• ナビゲーションメニュー（基本Ⅱ）