creatersnest114

ワンランク上を目指そう!CSSでマウスオーバーをデザインするチュートリアルまとめ


せっかく作ったWebサイトが、なんとなく味気ない、目新しさが感じられないと思ったら、
デザインを変えてしまうのではなくちょっとしたワンポイントを入れてあげると
いいかもしれません。
目立たないけど操作感を工夫することで、Webサイトの「おしゃれ感」、「イマドキ感」が得られます。
そんな「ちょっとした」工夫をいくつか紹介しましょう。

目次

【比較】覚えておきたいロールオーバー画像切替え 5つの手法(CSS?JS?onmouseover?)/Chrono Drive

【比較】覚えておきたいロールオーバー画像切替え 5つの手法(CSS?JS?onmouseover?)
http://html-coding.co.jp/knowhow/tips/rollover/

マウスオーバーはロールオーバーとも呼ばれることがあります。
その方法にはいくつかあるので、最初にしっかりメリット・デメリットや
ポイントを押さえておき、応用できるようにしておくといいですね。

 

CSSで実装する擬似クラス(:hover)を使ったマウスオーバー/Webfeelfee

CSSで実装する擬似クラス(:hover)を使ったマウスオーバー
http://webfeelfree.com/mouseover-css-hover/

マウスオーバーを可能にするには疑似クラス(:hover)を上手に
使いこなすのが大切です。
「あれ?うまくいかない」と断念しがちなhoverですが、
このサイトで基礎的な使い方やポイントを学びましょう。

 

CSSだけで画像に白い半透明のマウスオーバー/株式会社ゼノフィ

CSSだけで画像に白い半透明のマウスオーバー
https://www.xenophy.com/webdesign/4295

画像にマウスオーバーすると、半透明になるテクニック。
結構よく見かけますよね。
その方法をシンプルに教えてくれます。

 

cssの:hoverの色々な使い方/おーとえすとさいと

cssの:hoverの色々な使い方
http://o-ands.net/css_hover_howto/

マウスオーバーでの基本的な動作ですが、
ちょっとだけ位置をずらしたり、大きさを変更したり
簡単に覚えられる操作を学べます。

 

【CSS】画像をマウスオーバーしたときに効果を与えるメモ4つ/Web屋tm

【CSS】画像をマウスオーバーしたときに効果を与えるメモ4つ
http://webya-tm.com/archives/1703

4つの効果「半透明」「拡大」「移動」「回転」を、
マウスオーバーしたときの表現として使う方法を説明しています。
特に「移動」は、ブロック内での画像の移動なので、
画像の扱いに注意してみるといいでしょう。

 

CSSのみで実装するキャプションエフェクト 20/Nx World

CSSのみで実装するキャプションエフェクト 20
http://www.nxworld.net/tips/css-only-caption-effect.html

マウスオーバーしたときに、エフェクトと同時にキャプションが表示される動作を
まとめて紹介しています。
シャッターがおりてくるような動作、回転や拡大、縮小しながらテキストが現れるので、
さまざまなシーンで使えるテクニックです。

 

CSS3で画像をマウスオーバーするとボーダーがぐいってなるアニメーション/WEB PIXEL

CSS3で画像をマウスオーバーするとボーダーがぐいってなるアニメーション
http://www.webopixel.net/html-css/424.html

画像の上にマウスオーバーすると、画像の周りに
ボーダーが出現するという手法です。
Firefoxではちょっとガタガタしますが、試してみましょう。

 

CSSだけでマウスオーバーしたときに画像を白みがかったようにさせる/Qiita

CSSだけでマウスオーバーしたときに画像を白みがかったようにさせる
http://qiita.com/nobuko012/items/67ff921d2a4cf338e500

オンマウスしたときに、画像が薄くなるテクニックです。
背景色が白以外だとその色に薄くなります。
どうしても白みがかった状態にしたい場合の対処も記述されています。

 

CSS:オンマウス(hover)で画像をフェードする/designEDGE

CSS:オンマウス(hover)で画像をフェードする
http://edge.sincar.jp/web/css:オンマウス(hover)で画像をフェード/

オンマウス時、アウトマウス時に、画像が時間をかけて薄くなる
テクニックです。
アウトマウス時の対応策がわかりやすいです。

 

[CSS]サムネイルのマウスオーバーで指定場所に画像を拡大表示する方法/web覚書

[CSS]サムネイルのマウスオーバーで指定場所に画像を拡大表示する方法
http://singoro.net/note/mouse-over-css/

マウスオーバーしたら、他の場所に拡大画像が
表示されるようにするテクニックです。
JavaScriptもjQueryも使わないので、シンプルに記述したい方には
おすすめです。

 

CSS3: 画像にロールオーバーしたときテキストを表示する/FumioNonaka.com

CSS3: 画像にロールオーバーしたときテキストを表示する
http://www.fumiononaka.com/Business/html5/FN1503001.html
マウスオーバーした際にキャプションのテキストが表示されるテクニックですが、
このときの画像の動作にもいろいろ手を加えてみせることができます。
見せ方のいくつかを詳細に説明していますので、参考になりますね!

 

マウスオーバーした画像にレイアウトを崩さずにborderを表示するCSSの書き方/creative memomemo

マウスオーバーした画像にレイアウトを崩さずにborderを表示するCSSの書き方

http://creativememomemo.com/css_hover_img_border/
画像の周りに線(border)を表示させるテクニックを紹介しています。
やってみると意外にうまくいかないこともあるようなので、
レイアウトを崩さないポイントをつかんでおきましょう。

 

シンプルなのに効果的!CSS3トランジションを使ったマウスオーバーアニメーション11/Co-jin

シンプルなのに効果的!CSS3トランジションを使ったマウスオーバーアニメーション11

http://co-jin.net/web/simple-css3-transitions
CSS3のトランジション(transition)プロパティの使い方を
じっくりと説明しているWebページです。
楽しみながら研究するのに最適です。

 

CSSだけでhoverでキャプションがスライドして入ってくるアニメーションを作る方法/9nineBB

CSSだけでhoverでキャプションがスライドして入ってくるアニメーションを作る方法

http://9-bb.com/css/だけでhoverでキャプションがスライドして入ってく/
マウスオーバーで画像の中にキャプションがスライドするというアクションです。
CSSの原理を理解しておくことが、きれいなアニメーションにする
ポイントですね。

 

オンマウスでふんわり現れる!CSS3を使った吹き出しサンプル5つ/Webpark

オンマウスでふんわり現れる!CSS3を使った吹き出しサンプル5つ

http://weboook.blog22.fc2.com/blog-entry-369.html

マウスオーバーで吹き出しがさまざまな方法で現れるアクションです。
上下左右、回転したり、上下くるっとなったりなど、
見ていて楽しい表現方法のひとつですね。

 

マウスオーバー時にCSSアニメーションで画像付きキャプションを表示する方法/キャラチョコブックラボ通信。

マウスオーバー時にCSSアニメーションで画像付きキャプションを表示する方法

http://chocobanditz.com/blog/css_only_image-caption_hover-animation/

画像にキャプションだけでなく、
画像付きのキャプションが出現するアニメーションです。
プロフィール表示に適していますね。

 

imgタグを使ったCSSスプライトで画像切替え表示する方法-HTML&CSS小技Tips #001/キャラチョコブックラボ通信。

imgタグを使ったCSSスプライトで画像切替え表示する方法-HTML&CSS小技Tips #001

http://chocobanditz.com/blog/useful_html_css_tips_001/

cssスプライトとは、Webページの読み込みを早くする目的で
利用されるcssテクニックのことです。
サーバーへのリクエストを減らすことで、高速化が可能になります。

 

CSSのみでツールチップを表示/初心者Webデザイナーのためのガイドブック

CSSのみでツールチップを表示

http://kae.1banbo4.com/wp/archives/1173

マウスオーバーすると、小さな枠が出現して補足情報や
ヘルプのような役割をする吹き出し的なものがツールチップです。
使用するだけでも「親切なサイト」のイメージになりそうですね。

 

CSSだけでマウスオーバー時の画像の見せ方色々・アニメーションも出来きてアクセントに使える!!/ネットショップ運営の気になる備忘録

CSSだけでマウスオーバー時の画像の見せ方色々・アニメーションも出来きてアクセントに使える!!

http://peacepopo.net/blog-entry-115.html
マウスオーバー時の画像の見せ方に変化をつけると、
それなりにアクセントになりますね。
自分の作りたいWebページに合ったアクセントをつけたいものです。

 

マウスオーバーで円が広がるアニメーションのボタン/NAKAZI LAB.

マウスオーバーで円が広がるアニメーションのボタン

http://nakazilab.com/mouse-over-circle-spread-button/

シンプルなテキストのリンクにマウスオーバーすると、
ふわっと円が出現して広がっていくアニメーションです。
変わった表現でやわらかな印象を与えられます。

 

マウスオーバーでアニメーションしながら表示するメニュー/NAKAZI LAB.

マウスオーバーでアニメーションしながら表示するメニュー

http://nakazilab.com/mouse-over-animation-show-menu/

決めたれた範囲にオンマウスしたときに、
メニューがするっと表示されるアニメーションです。
CSSでもできる、シンプルなメニューです。

 

(K)ロールオーバー時に画像が拡大したり回転したりするCSS3を試した/WEB(K)Campus

(K)ロールオーバー時に画像が拡大したり回転したりするCSS3を試した

http://webkcampus.com/201503/1044/

マウスオーバー時に画像が拡大したり回転したりする
CSSのプロパティ「transition」「transform」について
実際に試しながら説明しています。

 

【css3】ボタンがキューブ状にクルッと回転するホバーエフェクト実装方法/Kawatama.net

【css3】ボタンがキューブ状にクルッと回転するホバーエフェクト実装方法

http://kawatama.net/web/1532

hoverを使ったいろいろなエフェクトの中でも、
キューブ状にくるっと回転するボタンを説明しています。
3D的に見えるだけでも、面白いですね。

 

基礎から学ぶCSS3で作るギミック、アニメーション transform transition animation編/mCPブログ

基礎から学ぶCSS3で作るギミック、アニメーション transform transition animation編

http://www.mao-engineer.jp/blog/css/274

CSSで作ることのできるアニメーションを、
これでもか!というくらい順序立てて説明しています。
読み物としても面白いです。

 

ワンポイントに使えるCSS3マウスオーバーアニメーション5種/Mx World

ワンポイントに使えるCSS3マウスオーバーアニメーション5種

http://www.webopixel.net/html-css/831.html

マウスオーバーで表現するアニメーションの中でも
一風変わった5種類のボタンです。
振動したり3D風に回転したり、見た目も楽しいアニメーションです。

 

CSS3のtransform:scale()でマウスオーバー時に画像を拡大させる!/WEB DESIGN MAGAZINE

CSS3のtransform:scale()でマウスオーバー時に画像を拡大させる!

http://webdesignmagazine.net/html-css/hover-transform-scale/

CSS3のtransform:scale()を使った、
マウスオーバーで画像を拡大するテクニックです。
JavaScriptなどを使わなくても実現できるようになりました。

 

マウスオーバーでシャッターのように開いて背景画像が現れるCSSの説明書/Web feelfree

マウスオーバーでシャッターのように開いて背景画像が現れるCSSの説明書

http://webfeelfree.com/css-open-like-a-shutter/
マウスオーバーして、キャプションが表示されるCSSは
既に紹介していますが、その逆バージョンです。
先にキャプションが表示されている状態から、シャッターの
ようにキャプションが消えて、画像が表示されるパターンです。

 

CSS3で画像にマウスオーバーした時に効果をつける/WEBLAB

CSS3で画像にマウスオーバーした時に効果をつける

http://www.weblab.co.jp/staff/html/2707.html

マウスオーバーした際に、画像がキラリと輝くような
アクションCSSを解説しています。
画像にアクセントをつけるのにぴったりですね。

 

Webテンプレート/テーブル/マウスオーバー/Tag index

Webテンプレート/テーブル/マウスオーバー

http://www.tagindex.com/template/table/hover.html

テーブルではありますが、セルのひとつにマウスオーバーしたときに
縦横列がわかりやすいよう、色がついてまわるというアクションです。
テーブルが大きくてわかりにくいときに使うとよさそうですね。

 

CSSだけで画像をグレースケール化する/NAKAZI LAB.

CSSだけで画像をグレースケール化する

http://nakazilab.com/only-css-gray-scale/

画像を加工編集することなく、CSSで画像をグレースケールに
するテクニックです。
オンマウスすると、カラーに変わってみえます。

 

まとめ

CSSのみで、さまざまなアニメーション、エフェクトができることが
おわかりになりましたでしょうか。

これらをマスターすれば、おのずと動きのある表現や楽しいWebページが
きっと作れるようになるはずです。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


NESTonlineBlog編集部

NESTonlineBlog編集部です。ご寄稿頂いた記事などを公開していきます。

Next Articleコピペで実装できちゃう!CSSで書かれた吹き出しまとめ