css(スタイルシート)

div タグのスタイルシート表記でボックスを作る際、画像があると、枠線が画像の大きさに広がらずにおかしなボックスになることはありませんか？

そう、下図のように。

▼上記画像におけるcss

.researchlink{
    border:1px solid #333;
    margin:2px;
    padding:2px;
}

どうやら、デフォルトでは、文字の範囲だけが対象となり、画像の大きさは無視されているようです。

それならば、最低限、画像の大きさを確保しておきたいと考えたところ、便利なcss表記を見つけました。

• css

ロールオーバーでの画像切替をスタイルシートで簡単に実現する方法について。

ちょっと探した限り、どこにも載っていなかった簡単な方法があるのでご紹介。

ちなみに、どのような動きを実現するのかは一目見ていただければ一目瞭然なので、サンプルへのリンクを下記に記しておく。

▼こちらから飛んだ先で実現する動きを確認していただきたい
CSSで画像切替（ロールオーバー）の例

さて、上記リンク先の動きを実現しようとネットで検索をかけてみると、
当然ながら(?)、「a:hover」を用いるものが多く見られる。

それで、実現手段としては、「背景画像の位置をずらして表示する」
というものだ。

だけれども、この方式だと、第一に画像の大きさが２倍になり、読み込みが重くなりそうだし、
そもそも、画像を結合して一つにするのがめんどくさい。（やってみた ^^;）

そんな悩みを抱えていたある日、どこかで面白い記述方法を見つけた。
以後、その方法でcssによるロールオーバーでの画像切替を行っている。

→続きを読む：CSSで画像切替（ロールオーバー）

• css