グローバルナビゲーシ...|独学でWebデザインの勉強をする人のためのまとめサイトです。


WordPressの準備・導入パターンとレンタルサーバー費用相場・比較表
WordPressの始め方、導入パターン・レンタルサーバーの費用相場、おすすめのレンタルサーバーを紹介

マンダラ塗り絵ダウンロードサイト
マンダラや幾何学模様、花、ボタニカルアートの塗り絵を配布中。






  • メニュー・ナビゲーション

グローバルナビゲーション 背景画像の表示位置(開始位置)を変える

リストに背景画像をつける

  1. a要素に背景画像の指定をします。表示位置は左上から開始されるように指定。
    background-position: left top;
  2. オンマウス時の背景画像の表示位置を右上から開始されるように指定します。
    background-position: right top;
  3. この仕組みは、単に背景画像の表示位置(開始位置)を変えることで実現しています。
    このように一枚の背景画像にしておけば、ブラウザはオンマウス時の背景画像を先読みしておけるため、画像を新たに読み直すといった必要がありません。
    →オンマウス時に瞬時に画像が切り替わる。
    もたつきのない軽快な動作を得ることができるテクニックです。

cssで背景画像の表示位置(開始位置)を変える仕組み

→デモサイトを見る

→背景画像部分のPSDファイルをダウンロードする

以下の「HTML」「CSS」それぞれのタブをクリックすると、ナビゲーション部分のコードを確認することができます。




Facebookページに「いいね!」をクリックしていただくと、当サイトの更新情報を受け取ることができるようになります。
ぜひ、「いいね!」していただけると嬉しいです!



Pagetop