CSSだけで作る矢印のアニメーション方法を現役エンジニアが解説【初心者向け】

CSSだけで作る矢印のアニメーション方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

目次

• 基本となるHTMLとCSS
• CSSの解説
• アニメーションを追加して矢印を動かす方法
• まとめ
• CSSを学習中の方へ

そもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。

 

 

基本となるHTMLとCSS

まずは、矢印の形状を作りましょう。

基本となるHTMLとCSSは以下の通りです。

HTML

<a class="arrow"></a>

CSS

.arrow {
  display: block;
  width: 8px;
  height: 8px;
  border-top: 1px solid #b0b0b0;
  border-right: 1px solid #b0b0b0;
  transform: rotate(45deg);
}

 

以下はデモの表示です。

基本となるHTMLとCSSがセットされているのでCSSの値を変更し、「Result」の表示がどのように変わるか確認してみましょう。

デモの表示

See the Pen
by nomallica (@nomallica)
on CodePen.

 

CSSの解説

では、矢印の形状をCSSでどのように作っているのかをひも解いていきましょう。

 

まず、aタグはインライン要素なので、ブロックレベル要素にするために以下の指定をします。

display: block;

 

次に、要素の幅と高さがそれぞれ20pxの正方形になるように指定しています。

width: 20px;
height: 20px;

 

この正方形の上部と右側には、以下の指定で線が施されています。

border-top: 5px solid #666;
border-right: 5px solid #666;

 

これらの指定だけだと、表示は下の画像のような形状になります。

 

さらに、この要素を時計回りに45度回転させる以下の指定を加えることによって、右向きの矢印の形状になります。

transform: rotate(45deg);

 

このCSSでは結果的に、幅（width）の値が矢印の上の線の長さを、高さ（height）の値が矢印の下の線の長さを示しています。

線の太さや色なども、状況に応じてお好みで指定してみてください。

 

[PR] Webデザインで副業する方法とは

アニメーションを追加して矢印を動かす方法

上記CSSで作成した矢印にアニメーションを施し、動かしてみましょう。

今回は、クリックすると時計回りに45度回転して下向き矢印になる動作を追加します。

 

必要なHTMLとCSS、jQueryの記述を以下に示します。

HTML

<a class="arrow"></a>

CSS

.arrow {
  display: block;
  width: 8px;
  height: 8px;
  border-top: 1px solid #b0b0b0;
  border-right: 1px solid #b0b0b0;
  transform: rotate(45deg);
  transition: all 0.3s;
}

.arrow.rotate {
  transform: rotate(135deg);
}

jQuery

$(".arrow").on("click", function () {
   $(this).toggleClass("rotate");
});

 

CSSでは、.arrowに変化を加えて結果までの過程（プロセス）を表現できるtransitionプロパティを新たに追加しています。

さらに、要素を時計回りに45度回転させる指定を、新たなクラス名「rotate」に指定しました。

jQueryでは、クリックする度にクラス名「rotate」が付いたり外れたりするように、メソッド「toggleClass」を使っています。

 

デモの表示内の「Result」に表示されている矢印をクリックしてみてください。

さらに、CSSのtransitionやtransformプロパティの値を変更し、アニメーションがどのように変わるか確認してみましょう。

 

デモの表示

See the Pen
アニメーションを追加して矢印を動かす by nomallica (@nomallica)
on CodePen.

 

まとめ

本記事では、CSSで作成した矢印をアニメーションにする方法について解説しました。

CSSでは多角形や星形など、工夫次第で様々な図形を描画可能です。

さらにtransformプロパティで形状を変化させたり、一連のtransitionプロパティを用いることでどのように状態を変化させるかを設定できます。

アニメーション表現の第一歩として、ぜひマウスホバー時やクリック時の「あしらい」として取り入れてみてください。

要素をより魅力的に、より伝わりやすいものにすることができるかと思います。

 

 

CSSを学習中の方へ

これで解説は終了です、お疲れさまでした。

• つまずかず「効率的に」学びたい
• 副業や転職後の「現場で使える」知識やスキルを身につけたい

CSSを学習していて、このように思ったことはありませんか？

テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！