JDBな人生  専門的なことから日常的なことまで~ まぁ自由きままに書いていきます。
2017年05月 / 04月<< 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 >>06月

アクセスランキング

[ジャンルランキング]
コンピュータ
413位
アクセスランキングを見る>>

[サブジャンルランキング]
プログラミング
58位
アクセスランキングを見る>>

ロールオーバー処理の読み込み遅延

久々にWEB系の記事です。

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

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

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

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

続きは以下からどうぞ。
   CSS    TB(0)    CM(0)    EDIT    ページ↑

ロールオーバー効果をCSSで指定する方法

これまでロールオーバーの処理は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対策的には微妙かもしれませんが、とりあえずこれで実装できます。
   CSS    TB(0)    CM(0)    EDIT    ページ↑

行間や字と字の間隔を調整するCSS

最近、何だかんだで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;

そう多用するようなものでもないかもしれませんが、覚えておくと便利だと思います。
   CSS    TB(0)    CM(0)    EDIT    ページ↑

CSS3を使ってみる...text-shadow

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

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

text-shadow 1




使い方は、スタイルシートに、
text-shadow: 縦位置(0で本文と重なる) 横位置(左に同じ) ぼかしの度合い 色;

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

↑の画像の場合は、
text-shadow: 2px 2px 2px #000000;

と指定しています。

応用すれば、
text-shadow(2).png
のようなことも可能です。



サンプルソースは、「続きを読む」からお願いします。
   CSS    TB(0)    CM(0)    EDIT    ページ↑

CSS3を使ってみる...border-radius(2)

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

スタイルシートには、
border-radius: 左上 右上 右上 右下;

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

省略する場合は、
border-radius: 左上&右下 右上&左下:

と指定するか、
border-radius: 左上&右上&左下&右下

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

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

では。
   CSS    TB(0)    CM(0)    EDIT    ページ↑

プロフィール

JDB Luigi

Author:JDB Luigi
どこにでもいるようなありふれた人間・・・という訳でもなく、かと言って怪しい宗教を信仰する変人という訳でも無い。

基本的に掲載しているコード等は煮ていただいても焼いていただいても結構ですが、利用は自己責任にてお願いいします。
また、バグ・アドバイス等もしあればよろしくお願いします。