CSSだけで作る矢印のアニメーション方法を現役エンジニアが解説【初心者向け】
初心者向けにCSSだけで作る矢印のアニメーション方法について解説しています。最初にHTMLとCSSで矢印を作る場合の基本の書き方を説明します。次にjQueryを使って矢印を動かす方法をサンプルで見ていきましょう。
TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。
CSSだけで作る矢印のアニメーション方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。
CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。
なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。

今回は、CSSに関する内容だね!

どういう内容でしょうか?

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); }
表示結果
See the Pen
2020-06-18-sample11 by YOHEI INAI (@yohei_inai)
on CodePen.
[PR] HTML/CSSで挫折しない学習方法を動画で公開中
CSSのソース解説
aタグは、インライン要素なので、まずはブロックレベル要素にするための変更を加えます。
display: block;
次に、幅と高さをそれぞれ8pxの大きさに定めます。
width: 8px; height: 8px;
この正方形の要素の上部と右側に棒線の装飾を施します。
border-top: 1px solid #b0b0b0; border-right: 1px solid #b0b0b0;
形状としては、下図の表示になります。
さらに、45度の角度まで回転させることによって、右向きの矢印の形状になります。
transform: rotate(45deg);
矢印を動かしてみよう
変化を加えて結果までの過程(プロセス)を表現できるtransitionも設定しておいてから、クラス名の切り替えにてアニメーションを動作させれます。
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"); });
実行結果
See the Pen
2020-06-18-sample12 by YOHEI INAI (@yohei_inai)
on CodePen.
監修してくれたメンター
井内洋平
TechAcademyの現役メンター。 元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。 |

内容分かりやすくて良かったです!

ゆかりちゃんも分からないことがあったら質問してね!

分かりました。ありがとうございます!
TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。