【CSS】ホバーエフェクトを使用してユーザーに印象を残す方法

2024年1月1日

Matoiです。
カーソルをあてた時に色が変わったり、形を変化させるWEBデザイン術を解説していきます。

初心者でも簡単にできるようにお願いします

マウスポインターを要素にかざすなど、ユーザーによる何らかの操作を必要とするものをユーザー操作擬似クラスと呼びます。これらはCSSコードによって画像や文字に対してカーソルをあてたときだけ変化をさせることが可能になります。

マウスポインターを要素にかざすなど、ユーザーによる何らかの操作を必要とするものをユーザー操作擬似クラスと呼びます。

これらはCSSコードによって画像や文字に対してカーソルをあてたときだけ変化をさせることが可能になります。

いくつかの擬似クラスが存在しますが、この記事ではいくつかあるユーザー操作擬似クラスの中から

「:hover」の解説をしていきます。

コピペだけで対応が可能になるようにHTML、CSSコードを貼り付けていきます。

一部「div」コードを変更させる必要がありますので気をつけてコピペをしていくようにお願いします。

hoverを利用する

:hoverはマウスポインターをその項目にかざした場合に反応させる擬似クラスです。

擬似クラスとは、セレクターに付加するキーワードであり、選択された要素に対して特定の状態を指定する。

:hoverはどのような場合に使用させるのか？

例えば文字や画像にリンクをつけたい場合は「a:hover」を使用！！

リンクとは？URLとの違いはあるの？: リンクは別の場所に移動するための入り口です。URLは「Webページの住所のようなもので、そのWEBがネットワーク上のどこにあるかを示すもの」です。

「hover」を使うと他にどのようなデザインができるのか？

カーソルをあてた際にこんなことができるようになる

別の文字色を変えることができる

下線などが現れる

背景色が出る

文字や画像がふわっと浮き上がったり、動きをつけれる

画像を明るくしたり、暗くすることが可能

画像に文字を載せることが可能

他にもたくさんの使い道があるので基礎を把握してしまえば簡単です。
コピペした後でもアレンジしてみましょう。

この記事で使用するHTMLコードは下記内容です。（一部pタグ内のテキスト文に変更があります。）

<div id="sample">
<p>sample</p>
</div>

色を変える

最初は文字色を変化させる方法です。

単色変化

sample

CSSコード

#sample-1 p:hover{
  color: red;
}

グラデーションにする

グラデーションカラー

CSSコード

#sample p:hover{
　-webkit-background-clip: text;
　color: transparent;
　background-image: linear-gradient(135deg, #ffec61, #f321d7);
  -webkit-background-clip: text;
}

-webkit-background-clip: text　⇒　背景を文字の形に切り取る

<p></p>にhoverを設定してしまうと他の文字も同じように色を変化させてしまうので、<div></div>要素を使用することで特定の要素の文字のみ色を変えることが可能になります。

下線を引く

① 上から線がフェードイン

sample

CSSコード

#sample p {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color:#000;
}
#sample p::after {
　position: absolute;
  bottom: 2px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #333;
  opacity: 0;
  visibility: hidden;
  transition: .3s;
}

#sample p:hover::after {
　bottom: -4px;
  opacity: 1;
  visibility: visible;
}

text-decoration: none で非表示にしておく

② 下から線がフェードイン

sample

CSSコード

#sample p {
	position: relative;
  display: inline-block;
  text-decoration: none;
  color:#000;
}

#sample p::after {
  position: absolute;
  bottom: -8px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #333;
  opacity: 0;
  visibility: hidden;
  transition: .3s;
}
#sample p:hover::after {
  bottom: -4px;
  opacity: 1;
  visibility: visible;
}

③ 中央から線が伸びる

sample

CSSコード

#sample p {
    display: inline-block;
	position: relative;
	color: #555;
 	text-decoration: none;
}
#sample p:after {
    content: "";
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 100%;
	height: 3px;
	background: #555;
	transform: scale(0, 1);
	transition: 0.4s;
}
#sample p:hover:after {
	transform: scale(1);
}

④ 左から線が伸びる

sample

CSSコード

#sample p {
    display: inline-block;
	position: relative;
	color: #555;
 	text-decoration: none;	
}

#sample p:after{
	content: "";
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 100%;
	height: 3px;
	background: #555;
	transform: scale(0, 1);
	transform-origin: left;
	transition: 0.4s;
}
#sample p:hover:after {
	transform: scale(1);
}

④ 右から線が伸びる

sample

CSSコード

#sample p {
    display: inline-block;
	position: relative;
	color: #555;
 	text-decoration: none;	
}

#sample p:after{
	content: "";
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 100%;
	height: 3px;
	background: #555;
	transform: scale(0, 1);
	transform-origin: right;
	transition: 0.4s;
}
#sample p:hover:after {
	transform: scale(1);
}

下からブロックが出てくる

sample

CSSコード

#sample{
    text-align:center;
	width:200px;
	margin:0 auto;
}
#sample p {
  font-size:24px;
  position: relative;
  text-decoration: none;/*デフォルトで下線を非表示*/
  color: inherit;
  margin-bottom: 1rem;
}

#sample p:after{
  position: absolute;
  bottom: -10px;
  left: 0;
  content: '';
  width: 100%;
  height: 0; /*下線の太さ*/
  background: #5B718F; /*下線の色*/
  transition: all .3s; /*アニメーション速度*/
}
#sample-8 p:hover:after {
  height: 8px;
}

この記事では簡単な下線や文字色を変化させる内容ですが、次回は画像がおしゃれに変化する方法を解説していきます。

CSS基礎知識

独自のウエブサイトを作成。CSS初心者のためのステップバイステップ – Matoiの合言葉 CSSとは何か？これからアレンジしてデザインを構築したいと考えている方はぜひ参考にしてください。初めての方は

おしゃれな見出し作成方法

WEBデザイン見出し特集！！魅力的な見出しの作り方とテクニック – Matoiの合言葉おしゃれ見出しデザイン背景や線は単色設定をしていましたが、ここからはデザインしてみましょう。下線デザイン