コーディングの勉強

【30DAYSトライアル2nd】day17~26のアニメーションの付け方編で学んだこと

こんにちは。mito(@mito_works)です。

今回はコーディングのスキルアップのために挑戦している#30DAYSトライアルの記録を書きます。

30DAYSトライアルは、独学を前提としたプログラミング学習プログラムです。

#30daysトライアルとは何?どうやって始めるの?といった疑問をお持ちの方、こちらをご覧ください。

mito
mito
30DAYSトライアルの2ndステージ。いよいよ後半です。
momo
momo
2ndのDAY17~26はxDのデザインカンプからコーディングしたサイトにアニメーションをつけていったよ!

mito
mito
この10日間で学んだことや気づきをまとめます。

twitter投稿でふりかえる10日間の学び

twitterで投稿していた内容をまとめました。
どんなことが学べるのかの参考になれば幸いです。

DAY17『マウスホバー時の動きを付ける』

DAY18. 『Webフォント、デバイスフォントを理解する』

DAY19. 『コーディング後の品質を担保するテスト』

DAY20. 『スライダー(カルーセル)を作る』

jQuery、ダウンロードしたまま使うのではなく少しコードをカスタマイズして色や形を変えると印象が随分変わるのだなと思いました。

DAY21. 『スクロールに応じて要素を「フワッ」と登場させる』

動きが面白いなと思い、ブログにも使い方を書きました。

【簡単】wowで要素をふわっと表示させたりシュッと表示させるアニメーションをつけるこんにちは。mito(@mito_works)です。 今回は、jQueryのライブラリーを使って要素がふわっと登場するアニメーショ...

 

DAY22. 『スマホ時のドロワーメニューを作る』

 

メニューは特に“今の流行り”が一番反映されやすい部分だと思います。
色々なサイトを見てコーディングのストックを増やしておきたいです。

mito
mito
この辺りから徐々に課題をこなすだけではなく、真似したいサイトを見つけて自分で再現してみるというような遊び方ができるようになりました。

DAY23. 『スムーススクロールとフローティングアイテムを作る』

#30daysトライアルと並行して模写も行なっています。
そこでの学びとここでの学びがリンクした日でした。

【初心者向け】CSSで要素を横に並べるfloatの基本的な使い方を理解する!こんにちは。mito(@mito_works)です。 今回は、XDでデザインされたサイトを模写して学んだことをまとめます。 ...

DAY24. 『ページ内リンクでクリックした要素に対して下線を引く(クリックイベントの処理)』

 

コーディングをするだけでなく、次回同じようなコーディングをするときに使えるようにBoostnoteにコードをメモしています。

mito
mito
時間が経つとすぐ忘れてしまうので、すぐに参照できるメモをストックしていると時間の短縮になります!

DAY25. 『Q and Aをアコーディオンでコーディング』

DAY26. 『モーダルを作る』

Bootstrapの威力を感じました。
今後はコーディングするときにBootstrapを上手に活用して、コーディングを効率化しようと思いました。

10日間の気づき

脇道逸れると学びが増える!

このコードをbootstrapで書き直すとどうなるか?デザインや色味を変えるとどうか?動きをつけるとどうか?と色々試してみると、自分が知っている知識だけでは実現できないことがわかったり、使っているコードの理解が深まります。

効率化

Boostnoteがとても便利!

今までは、「あのときに使った書き方を参考にしよう」と思ったときに探すだけで一苦労でした。
Boostnoteに該当箇所だけ切り出してストックしておくと後々、参照がしやすく、便利です。

Bootstrapでレスポンシブのコーディングが楽になる!

やっとPCでの実装ができたと思っても、タブレットやスマホのレスポンシブ対応でつまずき、想像以上に時間を使ってしまうことが多々ありました。
Bootstrapをうまく活用し、PCを実装する段階からタブレットやスマホを意識した実装をしておくと、効率的です。

着眼点

サイトの細かいパーツの実装方法が気になるようになる!

「この閉じるの×印、レスポンシブで画面幅が変わってもずれないのはどうやって実装しているのだろう?」や「ハンバーガーメニュー内の文字がシュッと出てくるアニメーションはどのように設定しているのだろう?」とコードベースで動きや要素が気になるようになりました。

シャドウ、グラデーションの実現方法が気になるようになる!

デザインの観点で、画像やボタンなどの外側のシャドウの入れ方、背景グラデーションの色味と角度などもコードベースで気になります。

mito
mito
検証ツールをみる回数が増えました。自分でも使いたいと思ったものはBoostnoteにストックしています。

サイトを見たときにどの書き方の組み合わせかわかる機会が増える!

擬似要素を使って配置しているということや、flexを使っているなどどのようにコーディングされているか想像できる機会が増えました。

今後のスキルアップの方法

この10日間で基本的な実装方法は身についたのではないかと思います。

  1. 「この書き方とこの書き方の組み合わせだ!」とわかるものについてはもっと早くコーディングできるように繰り返し使うようにする
  2. 分からないものは覚えてストックしていく
momo
momo
この二つを繰り返すのがいいね!
mito
mito
しばらくは模写をして手持ちカードを増やしていきます。

 

ABOUT ME
mito
こんにちは!mitoです。 2児の母で、会社員。 現在は複業でWebデザイナーをしています。 2019年1月からWebデザインの勉強を始めました。 子育てをする中で、自分の生活に働き方を合わせたいと思うようになり、フリーランスを模索しています。 好奇心旺盛でやりたいこと多め、ワクワクすると止まれない性格です。 同じように一緒にチャレンジする人の背中そっと押せたり、励ましあえるようなブログになるといいなと思っています。