マウスをのせると画像が動く:CSS小技

ブログが作りたい!CSSの小技 > マウスをのせると画像が動く:CSS小技

マウスをのせると画像が動く:CSS小技

マウスをのせると画像が動く:CSS小技

CSSの小技(3)

今回の CSSの小技は、マウスのカーソルを画像の上にのせたときに、画像を動かす方法です。これは、目にしたことがある人も多いのではないかしら。

前回同様、リンク付き画像に、何かおもしろみのある効果を加えたいときなどに役立ちます。


「マウスをのせると画像が動く」とは?

例えば、リンク付きの画像に、マウスのカーソルをのせると、次のように画像が動きます。(5pxほど右下に動かしています)

マウスをのせると画像が動く

この CSSの小技を使うと、リンク付き画像は、ボタンを押したときのような感覚をえることができます。

うまくレイアウトすれば、ナビゲーションメニューなどにも利用できますから、使いどころの多い小技だと思います。

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


マウスをのせると画像が動く方法(1)

1:ソースコード

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

2:ポイント解説

ポイントは、「position」という配置方法にて、relative(相対配置)していることです。

リンク(a)の上に、マウスがのる(:hover)と、今ある場所から右下に、topとleftにて 5pxずつ動かしています。


マウスをのせると画像が動く方法(2)

1:ソースコード

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

2:ポイント解説

前述の方法より、もう少し細かな動きを指定する方法です。よりボタンを押している感覚に近くなるはずです。

リンク(a)の上に、マウスがのった(:hover)ときは、今ある場所から左上に、topとleftにて 1pxずつ動きます。

そして、リンク(a)をクリックした(:active)ときに、右下へtopとleftにて 5pxずつ動かしています。

クリックしたときに、すぐに次のページが表示されてしまうような場合は、何が起きているのか分からない可能性もあります。

前の記事へ
次の記事へ

次回予告

次回は、リンク付きの文字が、マウスのカーソルをのせると大きく表示される CSSの小技をご紹介します。


関連記事

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

作成日:2009/04/18 更新日:2009/04/28

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

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

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

No title

あ、この小技は私も使ったことありますよ。
動く分の幅を考えないで使って他の画像も動くという経験ありです・・・
この次のエントリーの文字が大きくなるも使い過ぎて見にくいと
言われたこともあったりして(^^;)

・・・私はいつも思うのですが、Kumacrowさんのイラストがかわいくて
今回のイチローとかも上手ですし、このセンスはもっと前面に押し出し
ていった方がよいのではないでしょうか?と余計なおせっかいですかね~

似顔絵

fuminchuさん、こんばんは!(・∀・)/
コメントありがとうございます。


使いどころが難しいですよね、たしかに。(´Д`;)

いちおう、positionでやると、
回りの画像には影響がでないはずです。(たぶん)

marginとかでやる方法もありますが、
こちらだと、回りも動いちゃいます。

あまり実用的じゃなかったかもしれませんね。
どちらも。(;´Д`)てへっ

とりあえず、いろいろ書いていく方向で考えています。


ほめていただいて恐縮です。ありがとうございます。
ここのところ、似顔絵がんばってます。ヾ(*´∀`*)ノ

なかなか似ないんすけどね。
麻生さんなんて、ただのちっさいおっさんやし。

しかし、どうやって前面に出していったらいいかしら。
(もっと、うまくなったらですけど)

う~む。考えてみます。(´Д`;)
ありがとうございます。

承認待ちコメント

このコメントは管理者の承認待ちです

コメントの投稿

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

トラックバック

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

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
ありのごとくあつまりて