【プログラミング独学25日目】アニメーション
こんにちは、歯科衛生士・ママライターのミホです。以前から独学でWordPressを使ったサイト制作は行なってきたのですが、改めてプログラミングをしっかり学ぼうと思い学習を始めました。その記録や学習してわからなかったことなどをアウトプットしていきます。
私の今までの経歴は、以下で簡単に説明しています。元々医療従事者なのでわりと特殊な経歴かと思います。
https://chanmk.tokyo/programming_1/今後の目標は以下の通りで、忘れないためにも毎日書き留めておきます。
- プログラミング案件も受注できるようになりたい
- 歯科衛生士エンジニアを目指したい
- コーディングもライティングもできる歯科衛生士
【プログラミング独学25日目】学んだこと
今日もCSSの続きをやりました。今日は夜しか時間が取れず、インプット・アウトプット量はかなり少ないです。
そして昨日の記事で紹介したコーディング学習サイトですが、昨日少しやってみようと思ったらデザインカンプを取得するのにAdobe XDの登録が必要でした・・・。
まだ完全にコーディングできるわけではなく、しかも1ページコーディングするのにかなり時間がかかると思っています。ましてやその練習にまだ1日1時間も割けそうにないので、ほんの1デザインカンプを得るためだけにAdobeの月額有料登録するのは・・・と思いやめてしまいました。ちょっとゆっくり考えます。
①アニメーション／動きの中心を変更する
アニメーションの基本は昨日学びました。
昨日学んだ図形の移動・回転・リサイズはいずれも、図形の中心を起点として動かしていました。このように図形の動きの起点を変えたいときは以下のように記述します。
.box {
transform-origin:top left;
}「transform-origin:top left;」と記述すると、図形の左上を起点として動きます。注意すべきなのは、変化前のセレクター（.box）に記述するということです。その下に変化後のCSSを記述するため、変化前のCSSに記述することで両方に適用される形となり正しく動作します。変化後のセレクター（.box:hoverなど）に記述すると正しく動作しないため注意しましょう。
また図形の移動を指定する「translate」では、起点となる位置を指定しても無効になる（＝影響を受けない）点にも注意が必要です。
②アニメーション／移動しながら色を変える
例えば変化前の図形はオレンジ色で、それを移動させながら青色に変化させたいときは以下のような記述になります。
.box {
width:100px;
height:100px;
background:orange;
transition-property:translate,background;
transition-duration:1s;
}
.box:hover {
transform:translateX(30px);
background:blue;
}注目すべきは以下の部分です。
transition-property:translate,background;元々あった「transition-property:translate;」だけでは色の変化について書かれていないため、色がパッと切り替わるようなアニメーションになります。これを他と同様徐々に変化させたければ、「,」で区切って「background」も書き加えます。
なお以下のように書いても同じように表示されます。
transition-property:all;これは指定したプロパティ全てを反映させるというものです。便利ですが1つ1つ明示すると誤った動きをすることもなく確実です。なお実はtransition-propertyはallが初期値であり、上記自体書かなくてもallとして反映されます。
③アニメーション／Chromeのバグ
実は上記のように色が変わるプロパティを記述すると、リロード時に色が一瞬パッと出てしまいます。これはChromeのバグで、リロード時にもtransitonが効いてしまうため起こっています。これを表示させないためにはHTMLに以下を書き加えます。
<script> </script>このバグはいつか直されるかもしれません。またこのようなバグがあることで大きな問題があるわけではありません。しかしデザイン上気になる人もいるため、修正されるまでは上のように対応すると良いでしょう。
【プログラミング独学25日目】わからなかったこと・調べてわかったこと
今日はインプットが少なかった分つまずくこともありませんでした。
ただ独学に限界を感じたら、プログラミングスクールに通っても良いかなと思っています。「programmer college」は完全無料のプログラミングスクールで、レッスンだけでなく就活支援まで手厚くサポートしてくれるのが嬉しい点です。なぜ完全無料？怪しくない？と思いましたが、企業から協賛金を募ることで無料スクールが実現しているそうです。どの学習ソフトも有料なので、無料で学べてしかも就活直結ってありがたいですよね。
▼完全無料のプログラミングスクール