この記事では、簡単なアニメーションを作れるhoverについて解説しています。
- 「ログインボタンが透けるのってどう書いてるの？」
- 「カーソルを合わせるだけで動きだすようにしたい」
- 「CSSでいろいろ試してみたい」
動きのあるおもしろい効果をCSSで手軽に作れたら便利ですよね。
そう思っている方のために、今回は以下の3つをご紹介します。
- hoverの特徴と使い方
- hoverとセットで使えるプロパティ6選
- hoverを使ったCSSアニメーション2選
また、記事で紹介しているコードはコピー可能です。
難しいところはコピペして、まずは感覚的に遊んでみてください！
hoverができること
まずはhoverの特徴と使い方を解説していきます！
1.マウスを乗せると動く！
hover(=ホバー)とは、 "マウスカーソルが要素に重なったときのアニメーション"です。
……とムズかしく言うより、体験してもらった方が早いかもしれませんね。
以下ブラウザ画面内の色付きボックスに、マウスカーソルを合わせてみてください。
よく”新規登録はこちら”とか”ログイン”のように、カーソルを乗せると半透明になるボタンなど見たことがあると思います。
このようにhoverはリンクを作るときに出番が多いです。
2.hoverの書き方
まずはhoverの書き方を見ていきましょう。
セレクタ {
プロパティ:値;
}
セレクタ:hover {
プロパティ:値;
}
hoverに関するポイントは2つ。
- セレクタ + :(=半角コロン) + hover
- "セレクタ"と"セレクタ:hover"には、全く同一のセレクタを指定
カンタンな例を用意したので、以下ブラウザ画面でホバーしてみてください。
■使用例
HTML
<a>20pxから40pxへ</a>
CSS
a {
font-size: 20px;
}
a:hover {
font-size: 40px;
}
文字が20pxから40pxにサイズアップする、非常にシンプルな例ですね。
- [通常時] → 文字サイズ20px
- [hover時] → 文字サイズ40px
"セレクタ:hover"の{ }波カッコ内には、"変化後のプロパティを書き込む"と考えればOKです。
hoverとセットで使えるCSSプロパティ6選
ここまではシンプルな例ばかりでしたが、できればもっと変化をつけたいですよね。
そこでここからは、hoverとセットで使えるCSSプロパティを6つご紹介します！
1.【透けさせる】opacity
opacityは要素全体を透けさせるプロパティです。
セレクタ {
opacity: 0〜1の数値;
}
[例]
div {
opacity: 0.5;
}
opacityの特徴は以下です。
- 文字や画像などに使える。
- 0(透明)〜1(不透明)の数値を指定。例えば0.5なら透明度が50%。
ホバーしたら半透明になったり、逆に浮かび上がったりするリンクボタンを、Webサイトでもよく見かけますよね。
■使用例
HTML
<a class="kanari">かなり透明</a>
<a class="sukoshi">すこし透明</a>
CSS
.kanari {
background: skyblue;
padding: 8px 16px;
}
.kanari:hover {
opacity: 0.3;
color: white;
}
.sukoshi {
background: mediumseagreen;
padding: 8px 16px;
}
.sukoshi:hover {
opacity: 0.7;
color: white;
}
2.【マウスカーソルを変える】cursor
cursorは、要素に触れたときマウスカーソルのカタチを変えるプロパティです。
セレクタ {
cursor: auto or default or pointer…他多数;
}
[例]
div {
cursor: pointer;
}
※左右にスクロールできます。
cursorの特徴や使い方は以下です。
- リンクにカーソルを当てても"指"にならないときpointerにする
- 多数の値があるが、一部のブラウザでは表示できないものもある。その場合は初期値autoになる。
3.【角を丸める】border-radius
border-radiusは、要素の角を丸くするプロパティです。
以下のように様々な指定方法があります。
■角4つまとめて指定
セレクタ {
border-radius:◯px or ◯% or ◯em;
}
[例]
div {
border-radius: 5px;
}
■角1つずつ指定(px、%、emなど)
セレクタ {
border-radius: 左上 右上 右下 左下;
}
[例]
div {
border-radius: 20% 20% 30% 40%;
}
border-radiusの特徴や使い方は以下です。
- 単位はpx、%、emなどを使う
- 軽く丸める程度ならまとめて指定で4〜7px
- 50%で円形も作れる
border-radiusはhoverしていないセレクタでもよく使われ、borderやbackgroundなどとも相性バツグンです。
■使用例
HTML
<a class="corner">コーナーチェンジ</a>
<a class="round">マル</a>
CSS
.corner {
background: skyblue;
padding: 8px 16px;
}
.corner:hover {
border-radius: 10px;
color: white;
}
.round {
background: mediumseagreen;
padding: 32px;
}
.round:hover {
border-radius: 50%;
color: white;
}
4.【影を出す】box-shadow
box-shadowは要素に影を作り出すプロパティです。
セレクタ {
box-shadow: ◯px(右方向の影) ◯px(下方向の影) ◯px(影のぼかし具合) 色;
}
[例]
div {
box-shadow: 5px 0 3px red;
}
※左右にスクロールできます。
box-shadowの特徴や使い方は以下です。
- pxをマイナスで指定すると、左や上方向にも影を作れる
- 影のぼかし具合は省略してもOK
- セレクタでbox-shadowを設定して、セレクタ:hoverでbox-shadow: none;と設定すれば、ホバーしたときに影が消える
- transformと組み合わせると、リンクボタンを表現しやすい
transformプロパティもこのあとで紹介するので、ぜひ参考にしてみてください。
■使用例
HTML
<div class="bottom-up">ボトムアップ</div>
<div class="bottom-down">ボトムダウン</div>
CSS
.bottom-up {
background: skyblue;
padding: 8px 16px;
color: white;
}
.bottom-up:hover {
box-shadow: 0 5px 10px black;
transform: translate(0, -5px);
}
.bottom-down {
background: mediumseagreen;
padding: 8px 16px;
color: white;
box-shadow: 0 5px black;
}
.bottom-down:hover {
box-shadow: none;
transform: translate(0, 5px);
}
5.【移動・回転・拡大&縮小など】transform
transformは要素を好きな位置にズラしたり、回転させたり、拡大&縮小させたり、自由度の高いプロパティです。
■移動
セレクタ {
transform: translate(右方向◯px, 左方向◯px);
}
[例]
div {
transform: translate(5px, 0);
}
※左右にスクロールできます。
■回転
セレクタ {
transform: rotate(◯deg);
}
[例]
div {
transform: rotate(45deg);
}
■拡大&縮小
セレクタ {
transform: scale(縦◯倍, 横◯倍);
}
[例]
div {
transform: scale(0.5, 1.5);
}
transformの特徴や使い方は以下です。
- pxをマイナスで指定すると、左や上方向にも移動できる
- rotateは時計周りに角度をつけられて、マイナス指定もできる
- rotateX、rotateYとすると、X軸・Y軸での指定もできる
- たとえば拡大&縮小で"0.5"と指定するとき、0は省略できる → ".5"
■使用例
HTML
<div class="trans-late">うごく</div>
<div class="trans-rotate">かたむく</div>
<div class="trans-scale">ちいさくなる</div>
CSS
.trans-late {
background: skyblue;
padding: 16px;
color: white;
}
.trans-late:hover {
transform: translate(0, 40px);
}
.trans-rotate {
background: mediumseagreen;
padding: 16px;
color: white;
}
.trans-rotate:hover {
transform: rotate(30deg);
}
.trans-scale {
background: salmon;
padding: 16px;
color: white;
}
.trans-scale:hover {
transform: scale(.7, .7);
}
6.transition
transitionは、どれくらいの時間をかけて変化するか決めるプロパティです。
セレクタ {
transition: 変化の対象プロパティ 変化するまでの秒数◯s;
}
[例]
セレクタ {
transition: color 0.5s
}
※左右にスクロールできます。
transitionの特徴や使い方は以下です。
- "セレクタ"から"セレクタ:hover"までの変化の秒数を決める
- 通常hoverには書かない
- 変化の対象にallと書くと、すべてのプロパティを選べる
■使用例
HTML
<div class="only-background">色だけ変化</div>
<div class="all">すばやく大きくなる</div>
CSS
.only-background {
background: skyblue;
padding: 16px;
color: white;
transition: background 1s;
}
.only-background:hover {
background: red;
}
.all {
background: mediumseagreen;
padding: 16px;
color: white;
transition: all 0.2s;
}
.all:hover {
transform: scale(1.3, 1.3);
}
これまでのプロパティを組み合わせて、簡単なアニメーションを作ってみましょう！
1.コーナー&カラーチェンジ
コーナーと文字色&背景色が変わるホバーです。
HTML
<div class="corner-color">コーナー&色変化</div>
CSS
.corner-color {
cursor: pointer;
border: solid 1px black;
color: black;
padding: 32px;
transition: all 0.3s;
}
.corner-color:hover {
background: black;
color: white;
border-radius: 20px;
}
borderで中の文字を線で囲い、paddingで余白をつけてその線を大きく広げています。
transitionによって、.corner-colorの全プロパティが0.3秒かけてhoverで指定したプロパティに変化。
また、hoverで指定されていないcursorやborderも、消えてはいないですね。
2.文字だけ回転
中の文字だけ回転するホバーです。
HTML
<div><span class="font-round" >文字だけ回転</span></div>
CSS
div {
cursor: pointer;
border: solid 1px black;
padding: 32px;
}
.font-round {
display: inline-block;
color: black;
transition: all 1s;
}
.font-round:hover {
color: red;
transform: rotateX(360deg);
}
今回は文字をホバーしたときだけ反応させたいので、spanタグでテキスト部分を囲いました。
rotateXはX軸を起点に傾けるムズかしそうな値ですが、使ってみると案外カンタン。
また、transformはインライン要素には効かないので、インライン要素のspanタグをインラインブロック要素に変更しています。
この記事では、以下を中心にhoverをご紹介しました。
- hoverの特徴と使い方
- hoverとセットで使えるプロパティ6選
- hoverを使ったCSSアニメーション2選
hoverを使えるようになるだけで、デザインの幅が一気に広がります。
動きのあるサイト作りの第一歩として、ぜひhoverを習得してみてください！
