Treat Myself

海外生活中アラサー女子の英語・プログラミング学習備忘録

【30DAYSトライアル 2nd】アニメーション編①のまとめ&感想(DAY17からDAY21)

スポンサーリンク

anime

アニメーションをとりいれてページに動きを付ける方法を学んでいきます。

 

 

Day17: ホーバーの動きを付ける

<課題>

 

<感想>

 マウスホーバー時の動きに加え、変化の移ろいを調整する「transition」や要素に動きを付ける「transform」も一緒に学ぶと理解も深まり、実践としてDay12で作った様々な種類のボタンにひとつずつ違う動きを付けてみました。

See the Pen Day12 Buttons (30days trial 2nd ) by Yaponka (@Yaponka) on CodePen.

 

サルワカさんとはにわまんさんの以下の記事を参考にしています↓

 

Day18: フォントを理解する

<課題>

 

<感想>

課題の中でこんな質問がありました↓

1. font-familyには、なぜ複数のフォントを書くの?
2. 記載する順番にはどういった意味があるの?
3. よく最後に登場する「sans-serif」と「serif」は何?

 

課題を終えるとこの質問に答えられるようになり、私なりの答えはこんな感じです↓

 

1の答え→ 閲覧者の使用しているOSによって表示されるフォントが違うため

2の答え→ 前に書かれたフォント指定が優先的に使用されるため、英語のフォントを先にしているすることで、英語表示の時のフォントと日本語表示の時のフォントを指定できる

3の答え→ 総称フォントファミリーの種類で、sans-serifはゴシック体フォント、serifは明朝体フォントである

 

Day19: コーディング品質テストの方法

<課題>

 

<感想>

チェック項目の一覧と、チェック方法で紹介されているURLはすべて確認して、ブックマークしました!

 

技術習得だけではなく 実際お仕事として案件をこなす上で知っておくべき知識まで得られるのが30DAYSトライアルのいいところですよね。

 

Day20: カールセルの実装方法

<課題>

 

<感想>

 30DAYSトライアル 2ndの中でスライダー実装が一番つまづきました。

YouTubeの動画をみて少し理解ができて、Swiperの使い方が丁寧に書かれている記事に救われました。

Swiperでつまづいたのは私だけかもしれませんが参考にした動画と記事を載せておきます。

 

 参考にしたYouTube動画(シリーズものです)↓

 

参考にした記事↓

garigaricode.com

 

Day21: 要素に動きを付ける

<課題>

 

<感想>

 DAY20のSwiperを使用したスライダー実装と同様に「animete.css」と「wow.js」がわかりやすく説明されている動画を見つけ、たった5分の動画ですがこれをみたらかなり理解できました。

 

かなりオススメです↓

 

それにしてもアニメーションの動きをひとつひとつ確認していたら目が回りました。。

そのことをTwitterでつぶやくと「時間をゆっくりで作成する」というワザを同期の方からコメントで教えて頂き、なるほどな〜、賢い!と思いました。

 

最後に

 独学で勉強してるとどうしても学習範囲に偏りがでたり、苦手なところは苦手なままになりがちですが、30DAYSトライアルをやっているおかげで、自己流の学習方法より偏らずに学習ができているなっと感じることができます。

 

*30DAYSトライアル2ndの他の課題と感想のまとめも気になる方はこちらの記事をどうぞ↓

treatmyself.hatenablog.jp

 

 

treatmyself.hatenablog.jp