
1ページ内に複数のh1タグは使ってよいのか?
- Coding
- HTML
WEB製作会社 ZIGZOWオフィシャルサイト WEBデザイナーのためのWordPress、コーディング、WEBデザイン、アフィリエイト、SEOなど解説ブログ兼。
2015.10.07
3421 view
WEB製作でナビボタンなどを背景画像でhoverでオンオフを切り替えるコーディングを行うことは多いと思います。
ただ、この背景画像を切り替えるコーディングには注意が必要です。
それは以下のような2枚の画像を用いて行った場合に起こる問題があります。
この2つの画像A、Bを用意してCSSで「hover」プロパティで切り替えた場合にhover用の画像はhoverの際に読み込むため一瞬画像が消えてしまいます。
おそらくCSSのコードは以下のようになっています。
1 2 3 4 5 6 |
.btn { background: url(images/AB.gif) no-repeat center center; } .btn:hover { background: url(images/B.gif) no-repeat center center; } |
0コンマ何秒のことなのですが、意外と気になるものです。
この問題はとても簡単に解決できます。
その方法は以下のように画像を1つにするだけです。
そしてその画像を以下のCSSのように「background-posishon」プロパティで切り替えます。
1 2 3 4 5 6 |
.btn { background: url(images/A.gif) no-repeat center left; } .btn:hover { background-position: center right; } |
こうすれば、画像がマウスオーバーで消えることもなくスムーズにON・OFFを切り替えることができますよ。
以上です。
関連記事
背景画像をhoverで切り替える時に読み込みで一瞬消えないようにする方法【html】
コメント