【プログラミング独学24日目】アニメーション
こんにちは、歯科衛生士・ママライターのミホです。以前から独学でWordPressを使ったサイト制作は行なってきたのですが、改めてプログラミングをしっかり学ぼうと思い学習を始めました。その記録や学習してわからなかったことなどをアウトプットしていきます。
私の今までの経歴は、以下で簡単に説明しています。元々医療従事者なのでわりと特殊な経歴かと思います。
https://chanmk.tokyo/programming_1/今後の目標は以下の通りで、忘れないためにも毎日書き留めておきます。
- プログラミング案件も受注できるようになりたい
- 歯科衛生士エンジニアを目指したい
- コーディングもライティングもできる歯科衛生士
【プログラミング独学24日目】学んだこと
今日もCSSの続きをやりました。昨日でflexbox編が終わったので、今日からアニメーション編です！flexboxといいアニメーションといい、よくホームページやLPなどで見るデザインが自分で作れて嬉しいです。
そして昨日とっっても使えそうな最高なサイトを見つけました。こういうのを探してたんですよね・・・！
どれだけHTMLやCSSを学んで理解ができていても、実践慣れしないとなかなか案件獲得には至れないと思っていました。例えば案件などで「自分で1からサイトを作ろう」となったときに、実践慣れしていないとコードやデザインのイメージもいまいち出てこないだろうし、学んだ知識の統合が進まないと思うんですよね。各分野で学んだ知識がそれぞれバラバラになっていて、現場で使えないというか。
ドットインストールでは「サイトを1から作ってみよう」というレッスンもあったのでなんとなく安心していたんですが、なにせ毎日あまり時間を取れていないので、そこに行き着くのを待ってたら遅いなと思っていました。ひとまずもう少しでCSS一通りの学習が終わるので、それが終わったら実際に上のサイトで練習して作っていきたいと思います。あとはコーディングの案件を得るためにポートフォリオをどう作っていくかですね・・・。
①アニメーション作成時の考え方
アニメーションを作成するときは、以下のような順で記述していくと良いです。
例えば変化前のCSSは以下の通りです。
<body>
<div class="box"></div>
</body>.box {
width:100px;
height:100px;
background:orange;
}変化後のCSSは以下の通り。
.box:hover {
border-radius:50%;
background:orange;
}「:hover」については以下で学んだ内容です。
「border-radius」は以下で学んだ内容でした。
②スタイル移行時を指定するtransitionプロパティ
変化前と変化後の記述が終わったら、変化前→変化後に移行する間のスタイルを指定します。このときに使われるのが「transitionプロパティ」です。
変化前の記述「.box」内に書き加えます。
.box {
width:100px;
height:100px;
background:orange;
transition-property:border-radius;
transition-duration:1s;
}「transition-property」ではどのように移行していくか指定します。今回の場合、最終目的地である変化後のスタイルが「border-radius」でありそこを目指していきため同じものを記述すればOKです。最終目的地の形と移行中の形を変えたい場合はそのように記述します。また「transition-duration」では、移行中のスタイル変化にかける時間を指定します。今回は1秒としています。
③アニメーション／移動
図形を移動させるアニメーションでは「translate」を使用します。
transform:translateX(100px);上のように書くとx軸方向（左から右）に100px移動させることができます。
transform:translateY(100px);上のように書くとy軸方向（上から下）に100px移動させることができます。
なおこれらはまとめて指定することもできます。
transform:translate(100px,100px);このように記述するとx軸方向（左から右）に100px＆y軸方向（上から下）に100px移動となるため、右斜め下に図形が移動します。
④アニメーション／回転
図形を回転させるアニメーションでは「rotate」を使用します。
transform:rotate(30deg);上のように書くと、図形と時計回りに30°回転させることができます。
⑤アニメーション／リサイズ
図形をリサイズさせる（サイズを変化させる）アニメーションでは「scale」を使用します。
transform:scaleX(2);上のように書くとx軸方向（横）に2倍の大きさへ変化させることができます。単位が付かないため注意が必要です。
transform:scaleY(0.5);上のように書くとy軸方向（縦）に半分の大きさへ変化させることができます。
なおこれらはまとめて指定することもできます。
transform:scale(2, 0.5);上記は以下のように「0」を抜いて記述してもOKです。また「,」を書かないと無効になりました。
transform:scale(2, .5);⑥アニメーション／複数指定
アニメーションはまとめて複数指定することができます。ただこのときは記述の順番に注意が必要です。
transform:translateX(100px) rotate(30deg);上のように記述すると、「x軸方向に100px動いてから30°回転」という意味になります。
transform:rotate(30deg) translateX(100px);しかし上のように記述すると、「30°回転してからx軸方向に100px動く」という意味になります。30°回転するとx軸の向きが水平ではなくなり斜めになるため、その方向へ図形が100px動くことになります。イメージとしては図形が回転しながら右下斜めへ動いていくイメージです。
【プログラミング独学24日目】わからなかったこと・調べてわかったこと
今日学んで疑問が残った部分は以下です。
- y軸方向＝下から上ではないのか？
- 回転は時計回りのみ？反時計回りは？
y軸方向＝下から上ではないのか？
図形を移動させるアニメーションで、「y軸方向に動かす」という説明で図形は上から下へ移動していました。数学で習った「x軸方向」は左から右、「y軸方向」は下から上だったよな？と思っていると、他の方が質問してくれていました。先生の回答は以下です。
PCでは左上を起点として考えることが多いため、「y軸方向」＝上から下となります。
参考ドットインストール
とってもすっきりしました。
回転は時計回りのみ？反時計回りは？
transform:rotate(30deg);上のように記述すると時計回りに30°回転するとのことでしたが、反時計回りは指定できないのか？と思いました。MDNで調べると以下のように書かれていました。
rotate( )の中の数が正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。
参考MDN
なるほど。とてもすっきりしました。
独学に限界を感じたらプログラミングスクールに通っても良いかなと思っています。「programmer college」は完全無料のプログラミングスクールで、レッスンだけでなく就活支援まで手厚くサポートしてくれるのが嬉しい点です。なぜ完全無料？怪しくない？と思いましたが、企業から協賛金を募ることで無料スクールが実現しているそうです。どの学習ソフトも有料なので、無料で学べてしかも就活直結ってありがたいですよね。
▼完全無料のプログラミングスクール