CSS

公開日時：2022.06.24

最終更新日:2022/06/24

【初心者向け】疑似要素で線やボタンをアニメーションさせてみよう！

アイキャッチ

こんにちは！
ドラムやりすぎで左肘が痛いGlobal Web Designの福田です(笑)

みなさんはWeb制作でマウスオーバーしたときに

「aタグにボーダーをアニメーションさせたい！」
「ボタンをアニメーションさせたい！」

というときありませんか？

今回はそんな方に向けて、疑似要素の使い方と線やボタンのアニメーションの実装をご紹介します！

疑似要素

ボーダーやボタンのアニメーションをするときに必ず使うのが疑似要素です。
疑似要素とは、要素の一部に対してスタイルを適用できる指定方法です。
HTMLの要素を疑似的にCSSで設定するので、HTMLを書き足すことなく装飾を適用できます。

ここでは線やボタンのアニメーションによく使う疑似要素

  • before
  • after

をご紹介します。

before

「before」は選択した要素の前にコンテンツを追加します。

<p>こんにちは</p>
p::before{
  content: 'みなさん';
  color: red;
}

ブラウザで見ると

「::before」を使って、pタグの「こんちには」の前に「みなさん」をCSSで追加できました。
「content」にテキストなどを指定するときは「”」(シングルクォーテーション)「””」(ダブルクォーテーション)で囲みます。
また「font-size」や「color」などのプロパティは追加したコンテンツに適用されます。

after

「after」は選択した要素の後ろにコンテンツを追加します。

<p>こんにちは</p>
p::after{
  content: 'よろしくお願いします。';
  color: blue;
  font-size: 20px;
}

ブラウザで見ると

「::after」を使って、pタグの「こんちには」の後ろに「よろしくお願いします。」をCSSで追加できました。

「after」も「before」と同様に「font-size」や「color」などのプロパティは追加したコンテンツに適用されます。

「after」「before」共にかならず「content」の設定が必要になります。
「content」がないとHTMLに描画されません。

<p>こんにちは</p>
p::before{
  
}
p::after{

}

「content」がない場合

検証ツールで見てみると、「before」「after」の追加がされていません。
CSSを

p::before{
  content: '';
}
p::after{
  content: '';
}

にすると

「before」「after」が追加されていますね！
「before」「after」は必ず「content」を付けることを覚えておきましょう！

ボーダーのアニメーション

ここからは先ほどご紹介した疑似要素を使って、ボーダーをアニメーションさせていきます。
今回はaタグの下に線を入れて、そのaタグにマウスオーバーしたときに線をアニメーションさせていきます。
線を下に引ける「border-bottom」プロパティがありますが、アニメーションさせることができないので疑似クラスで線を作ってアニメーションさせていきます。

疑似要素で線をつくる

<a class="border">線をアニメーション</a>
.border{
  color: blue;
  padding-bottom: 5px;
  position: relative; /*::afterにabsoluteをかけるので設定*/
}
.border::after{
  content: ''; /* コンテンツを追加 */
  width: 100%; /* 線の幅 */
  height: 1px; /* 線の高さ */
  background-color: blue; /* 線の色 */
  position: absolute; /* position: relative;からの線の絶対位置 */
  bottom: 0; /* 線の位置 */
  left: 0; /* 線の位置 */
}

ブラウザで見てみると

疑似要素の「after」でaタグに線を引くことができました。

線をアニメーションさせるためのCSSを追記

次に線をアニメーションさせるためのCSSを追記します。

.border{
  color: blue;
  padding-bottom: 5px;
  position: relative; /*::afterにabsoluteをかけるので設定*/
}
.border::after{
  content: ''; /* コンテンツを追加 */
  width: 100%; /* 線の幅 */
  height: 1px; /* 線の高さ */
  background-color: blue; /* 線の色 */
  position: absolute; /* position: relative;からの線の絶対位置 */
  bottom: 0; /* 線の位置 */
  left: 0; /* 線の位置 */
  /* 追記 */
  transform: scale(0,1); /* 線のx軸の長さを0 */
  transition: .5s; /* 要素の変形する時間*/
  transform-origin: left top; /* 要素の座標の原点を設定*/
}

ブラウザで見てみると

線を消すことができました。

線は「transform: scale(0,1);」で消すことができます。
「transform: scale()」は要素の大きさを変えたいときにつかいます。
「transform: scale(X軸,Y軸);」と設定できるので、「transform: scale(0,1);」で横幅を0にしています。

「transform-origin」は要素の座標変換(transform)のときの原点を設定します。
今回は線を左から右にアニメーションさせたいので、「transform-origin: left top;」としています。

「transition: .5s;」はマウスオーバーした時の線が出てくる時間になります。
マウスオーバーをさせる疑似クラス「hover」を使うので、「hover」で定義したCSSまで0.5秒かけてアニメーションさせます。

疑似クラスhoverを使って線を出す

最後にカーソルが要素にマウスオーバーしたときの疑似クラス「hover」を使って線を出します。
CSSに追記します。

.border{
  color: blue;
  padding-bottom: 5px;
  position: relative; /*::afterにabsoluteをかけるので設定*/
}
.border::after{
  content: ''; /* コンテンツを追加 */
  width: 100%; /* 線の幅 */
  height: 1px; /* 線の高さ */
  background-color: blue; /* 線の色 */
  position: absolute; /* position: relative;からの線の絶対位置 */
  bottom: 0; /* 線の位置 */
  left: 0; /* 線の位置 */
  transform: scale(0,1); /* 線のx軸の長さを0 */
  transition: .5s; /* 要素の変形する時間*/
  transform-origin: left top; /* 要素の座標の原点を設定*/
}
/* 追記 */
.border:hover::after{
  transform: scale(1,1); /* 線のx軸の長さを1 */
}

ブラウザで見ると

線をアニメーションさせることができました。

疑似要素と疑似クラスはあわせて使うことができます。
「.border:hover::after」と書くことで「.border」を「:hover」したときの「::after」の指定ができます。
「transform: scale(1,1);」で横幅0だった線を「scale(1,1)」にすることで線を出しています。

ボタンのアニメーション

ボタンのアニメーションも線のアニメーションとほぼ変わらずに実装できます。

CSSで変化前のボタンを実装

まずは変化前のボタンを実装します。

<a class="button">ボタンをアニメーション</a>
.button{
  color: blue;
  width: 300px;
  height: 60px;
  line-height: 60px;
  border: solid 1px blue;
  display: inline-block;
  text-align: center;
  position: relative;
  transition: .5s;
}

ブラウザで見てみると、

マウスオーバーする前のボタンを実装できました。

beforeを使ってマウスオーバー後のボタンを実装

次にbeforeを使ってマウスオーバー後のボタンを実装します。

.button{
  color: blue;
  width: 300px;
  height: 60px;
  line-height: 60px;
  border: solid 1px blue;
  display: inline-block;
  text-align: center;
  position: relative;
  transition: .5s;
  /* 追記 */
  z-index: 10;
}
/* 追記 */
.button::before{
  content: ''; /* コンテンツを追加 */
  width: 100%; /* 線の幅 */
  height: 100%; /* 線の高さ */
  background-color: blue; /* 線の色 */
  position: absolute; /* position: relative;からの線の絶対位置 */
  top: 0; /* 線の位置 */
  left: 0; /* 線の位置 */
  z-index: -1;
}

ブラウザで見ると

「before」で要素が青く塗りつぶされました。
線のアニメーションと同様にボタンのアニメーションのCSSを追記します。

.button{
  color: blue;
  width: 300px;
  height: 60px;
  line-height: 60px;
  border: solid 1px blue;
  display: inline-block;
  text-align: center;
  position: relative;
  z-index: 10;
  transition: .5s;
}
.button::before{
  content: ''; /* コンテンツを追加 */
  width: 100%; /* 線の幅 */
  height: 100%; /* 線の高さ */
  background-color: blue; /* 線の色 */
  position: absolute; /* position: relative;からの線の絶対位置 */
  top: 0; /* 線の位置 */
  left: 0; /* 線の位置 */
  z-index: -1;
  /* 追記 */
  transform: scale(0,1); /* 線のx軸の長さを0 */
  transition: .5s; /* 要素の変形する時間*/
  transform-origin: left top; /* 要素の座標の原点を設定*/
}

ブラウザで見ると

線のときと同様に、「before」を青色の部分を「transform: scale(0,1)」で非表示にできました。

疑似クラスhoverを使ってボタンを完成

最後に疑似クラス「hover」を使ってボタンのアニメーションを実装していきます。

.button{
  color: blue;
  width: 300px;
  height: 60px;
  line-height: 60px;
  border: solid 1px blue;
  display: inline-block;
  text-align: center;
  position: relative;
  z-index: 10;
  transition: .5s;
}
.button::before{
  content: ''; /* コンテンツを追加 */
  width: 100%; /* 線の幅 */
  height: 100%; /* 線の高さ */
  background-color: blue; /* 線の色 */
  position: absolute; /* position: relative;からの線の絶対位置 */
  top: 0; /* 線の位置 */
  left: 0; /* 線の位置 */
  z-index: -1;
  transform: scale(0,1); /* 線のx軸の長さを0 */
  transition: .5s; /* 要素の変形する時間*/
  transform-origin: left top; /* 要素の座標の原点を設定*/
}
/* 追記 */
.button:hover{
  color: #fff; /* マウスオーバーしたときのaタグの色 */
}
.button:hover::before{
  transform: scale(1,1);
}

ブラウザで見ると

aタグの上にそのまま「before」の要素が重なると、文字が見えなくなってしまうため、「.button:hover」で文字の色を白にしています。

完成はこちらになります。

See the Pen css 疑似要素 by Fukuda Yuzuru (@fukuda-yuzuru) on CodePen.

まとめ

いかがでしたでしょうか？
今回は疑似要素を使って、線とボタンのアニメーションを実装しました。

aタグやボタンなど押せる部分はユーザーにわかりやすいように、「hover」を使って

「ここはクリックできますよ！」

とすることが多くなります。
疑似要素などを使うことで、アニメーションさせてあげることによってWebサイトに動きが出て、ユーザーも使いやすくなります。

疑似要素や疑似クラスはいろいろな部分で使われるので、今回の記事をキッカケに覚えていただると嬉しいです！

この記事を書いた人
福田　弦

福田 弦

2020年にGlobal Web Desingを立ち上げ。得意分野は、コーディング、CMS構築、ディレクション。現在はブログ、マーケティングなどを勉強中。趣味はドラム。

あわせて読みたい

アイキャッチ
ワイヤー
イラスト
フリーランス
img
レイアウト

SNSでシェア

Web制作に関するお悩みがある方はお気軽にご連絡下さい。

ご相談・お問い合わせ

メールでWeb制作に関して
相談や見積もり依頼をされたい方に、
お問い合わせフォームより
お問い合わせを承っております。
フォームからお問い合わせ下さい。

お問い合わせフォームへ