記事一覧

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

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

続きを読む

ロールオーバー効果を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: ur...

続きを読む

行間や字と字の間隔を調整する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: 30p...

続きを読む

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

さて、今回は、text-shadow(文字に影をつける)を使ってみたいと思います。しかし、現時点では、IE9.0では対応していないため、Firefox3.63で実験してみたいと思います。使い方は、スタイルシートに、text-shadow: 縦位置(0で本文と重なる) 横位置(左に同じ) ぼかしの度合い 色;と単位付きで指定するだけです。↑の画像の場合は、text-shadow: 2px 2px 2px #000000;と指定しています。応用すれば、のようなことも可能です。サ...

続きを読む

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

そういえば、前回border-radiusを紹介しましたが、使い方を書き忘れていました。スタイルシートには、border-radius: 左上 右上 右上 右下;とそれぞれ指定すれば、角に丸みをつけることができます。省略する場合は、border-radius: 左上&右下 右上&左下:と指定するか、border-radius: 左上&右上&左下&右下で指定すれば、一括して設定できます。単位は、[px]を使うのが最適だと思います。では。...

続きを読む

プロフィール

JDB Luigi

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

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