画像の透明度を変化させる:CSS小技

ブログが作りたい!CSSの小技 > 画像の透明度を変化させる:CSS小技

画像の透明度を変化させる:CSS小技

画像の透明度を変化させる:CSS小技

CSSの小技(2)

今回の CSSの小技は、マウスのカーソルを画像の上にのせたときに、画像を半透明に見せる方法です。

リンク付き画像に、何かおもしろみのある効果を加えたいときなどに役立ちます。「あまり嫌味のない効果」なので、好まれるのではないかしら。


「画像の透明度を変化させる」とは?

リンク付きの画像に、マウスのカーソルをのせると、次のように画像が半透明になったように見えます。

マウスをのせると画像が半透明になる

通例の状態では、画像は、リンク付きなのか?リンクが付いていないのか?分り難かったりします。

しかし、このような変化を与えておくと、マウスが画像の上を通過したときに、ユーザが「あれ?何かある?」と気付きやすくなります。

イメージし難い人は、サンプルを用意したので、良かったら実際にサンプルをご覧になってみてください。


画像の透明度を変化させる方法

1:ソースコード

(1)HTMLコード
(2)CSSコード

2:ポイント解説

ポイントは、リンク(a)付きの画像(img)の上に、マウスをのせた(:hover)ときに、透過度を変更させる「opacity」を使っていることです。

「opacity」の数値が小さいほど、不透明に見えます。試してみると分りますが、数値を 0(ゼロ)にすると画像は消えます。

3:CSSハック付

この「opacity」は、ほとんどのモダンブラウザでは対応しているのですが、残念ながら IEは対応していません。

そこで、IEのための記述「filter」を追加してあげる必要があります。勘の良い人は分ると思いますが、数値は 0.5のときは 50だし、0.1なら 10です。

追記(2009/05/15)、Firefox1.5以前に対応させるために「-moz-opacity」を入れておく方が良いようなので追加しました。


opacity使用時の留意点

今回の「opacity」については、次のことを理解した上で、ご利用ください。

  • 古いブラウザには、対応していない。
  • 「opacity」は、CSS3.0で導入される予定のプロパティです。CSS3.0が正式に勧告されるまでは、W3CのCSS検証サービスで不合格になります。(不合格だから何かデメリットがあるわけではありません)
  • 「filter」は、IE独自のプロパティですが、Mac版 IEでは、期待する動作がえられない場合があるようです。
  • 「filter」プロパティは、ブラウザのレンダリングに高い負荷をかける可能性がある。
  • widthを指定しないと、期待する動作がえられない場合があるようです。

参考になる記事

前の記事へ
次の記事へ

次回予告

次回は、リンクにマウスのカーソルをのせたときに画像が動く CSSの小技をご紹介します。


関連記事

CSSに関連する記事を、ご紹介します。

作成日:2009/04/17 更新日:2010/05/03

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

No title

なるほどあの効果は「opacity」なんですね!
しかもIE用の記述まで書いてありますね(^o^)丿
このIE用の記述っていつも悩むところなので、こういう風に記載して
いただけると助かります。
早速これ使わせていただきます!

IE8

fuminchuさん、おはようございます!(・∀・)/ぐもに
コメントありがとうございます。

CSS3になると、「opacity」とか、
いろいろと見た目の装飾が増えるみたいですね~。

しかし、IEが・・・。(´Д`;)いやーん

いちおうIETesterでチェックしたんですが、
IE8でも、「opacity」理解できないみたいです。

本物のIE8だと違ったりするのかもしれませんが。
う~む。(;´Д`)

ずっと探していた答えが、、

はじめまして、よくブログ拝見しています。イラストもかわいいし、文章が非常に丁寧で分かりやすし、とても良いブログですね。

僕もGIMPに関するブログを書いているのですが、全然うまく書けません。。こちらのブログを目標に頑張っていきたいです。

それで、ここからが本題なのですが、昔から画像をマウスーバーすると光るのはどうやるのかな?と疑問に思って検索していたのですが、「画像 マウスオーバー 光る」と検索していたので、全くたどり着けずにいました。

ずっと、解けなかった謎が解けました、ありがとうございます。感動したので、思わず勇気を出してコメントしてしまいました。

マウスオーバすると画像が光る

WgimPさん、こんにちは!( ・∀・)ノへろー
コメントありがとうございます。

GIMPの記事を扱っておられるのね。
NAVERまとめに追加しておきましたー。ヾ(*´∀`*)ノ

 『GIMPの使い方・情報サイト』
 →http://matome.naver.jp/odai/2124704591512293834

アクセスがちょびっとくらいは増えるかもー。


CSSの方は、なるほど「光る」という印象をもつものなのですね。
キーワードとして入れておこうと思います。

ありがとうございました。(´▽`)♪

個別指定

暇人さん、こんにちは!
コメントありがとうございます。

ごめんなさい。わたくしの読解力はとても残念な感じなので、
お話が十分理解できない状態で書きますけれども、

「個別に指定できれば、おそらく問題が解消できる」
とふんでいらっしゃるようなので、

そこにのっかって、個別指定のお話を書きますね。


現状のCSSを拝見したところ、おっしゃる通り、
「a:hover img」で指定していらっしゃいますね。

それを例えば、記事内の画像だけに、透過を指定したい場合は、
「a:hover .ently_body img」とすればOKかと思います。

あるいは、右側メニュー枠内の画像だけに、透過を指定したい場合は、
「a:hover #right img」ですかね。


各領域は、たいていdivタグによって囲まれているので、

そのdivタグについている「id」名、
もしくは「class」名で指定してあげれば、個別の指定ができます。


また、大変申し訳ないのですが、暇人さんのブログ、
あるいは記事の内容によっては、

精査した上で、コメントを削除させていただく場合があります。
ご了承いただきたく、よろしくお願い申し上げます。

> ありがとうございましす。
> やっと捜し求めていたものが見つかり
> 大変満足しております。
>
> 只一つだけどうしても管理人さんのサンプルみたいに
> 全部透明度を変化させるでもちろんなっているのでございましが、
> 自分のブログでやってみると一番下に少し余白?みたいになってしまします。
> 多分文字色リンク色、背景などを全体で
> 設定しているので、それが透明度にした時も残るんだと思いました。
> でも管理人さんのように個別記事にしても一方ではメニューバーなどは
> マウスを乗せたときに背景、リンク色などは出来ているので、
> その辺りが、どのように個別に指定していいのかが分らず、
> 今回連絡させて頂きました。お時間あるときにでもなんですけど、
> 見て頂ければ幸いです。
> そこから推測される問題点などを、アドバイス頂ければ
> 助かります。どうぞよろしくお願い致します。

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/483-54e348ee
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて