久々にWEB系の記事です。

最近、某カメラメーカー、P社のサイトを見たのですが、画像に設定されたリンクをクリックしようとマウスポインタを載せると画像が消えました。原因は、その画像（リンク）にロールオーバー処理が施されていることだということはすぐにわかりましたが、ユーザー体験の面ではあまり良いものとは言えませんね。

というわけで、「ロールオーバー時に画像が消える」という現象の解決策についての記事を書くことにしました。

どのような条件でこの現象が起こるのかということですが、「画像のキャッシュがあるかないか」がポイントです。あらかじめ画像を読み込んでおけば、画像が消えることはないようです。

その場合、どのタイミングで画像を読み込むか、ということが重要となります。

続きは以下からどうぞ。

続きを読む

これまでロールオーバーの処理はJSで行っていたんですが、CSSで簡単に行う方法を思いついたので紹介します。

a.r_o{
    display: block;
    background-image: url(blue.png);
    width: 80px;
    height: 25px;
}
a.r_o:link{
    background-image: url(blue.png);
}
a.r_o:hover{
    background-image: url(blue2.png);
}

「width: 80px;」「height: 25px;」の部分には使用する画像のサイズ、「url(blue.png)」は通常時の画像、「url(blue2.png)」はロールオーバー時の画像を指定してください。

実際のリンクでは、
「<a href="リンク先" class="r_o" title="リンク"> </a>」
みたいな感じで使います。

SEO対策的には微妙かもしれませんが、とりあえずこれで実装できます。

最近、何だかんだでWEBページの制作や修正をすることが多いんですが、二つ役立ったCSSがあったので紹介します。

1.「letter-spacing」
これは字と字の間隔を調整するときに使います。

letter-spacing: 0.1em;

letter-spacing: 0.5em;

letter-spacing: 10px;

2.「line-height」
これは行と行の間隔を調整するときに使います。

line-height: 10px;
line-height: 10px;
line-height: 10px;

line-height: 20px;
line-height: 20px;
line-height: 30px;

line-height: 30px;
line-height: 30px;
line-height: 30px;

そう多用するようなものでもないかもしれませんが、覚えておくと便利だと思います。

さて、今回は、text-shadow（文字に影をつける）を使ってみたいと思います。

しかし、現時点では、IE9.0では対応していないため、Firefox3.63で実験してみたいと思います。






使い方は、スタイルシートに、

text-shadow: 縦位置（0で本文と重なる） 横位置（左に同じ） ぼかしの度合い　色;

と単位付きで指定するだけです。

↑の画像の場合は、

text-shadow: 2px 2px 2px #000000;

と指定しています。

応用すれば、

のようなことも可能です。

---

サンプルソースは、「続きを読む」からお願いします。

続きを読む

そういえば、前回border-radiusを紹介しましたが、
使い方を書き忘れていました。

スタイルシートには、

border-radius: 左上　右上　右上　右下;

とそれぞれ指定すれば、角に丸みをつけることができます。

省略する場合は、

border-radius: 左上＆右下 右上＆左下:

と指定するか、

border-radius: 左上＆右上＆左下＆右下

で指定すれば、一括して設定できます。

単位は、[px]を使うのが最適だと思います。

では。