初案件の中で勉強になったこと（前回の続き）

さて、前回の続きとなります。

勉強になったこと
１．max-width
２．テーブル（表）
３．jQuery関連
４．クラス名の付け方
５．レスポンシブ対応

前回は「２．テーブル（表）」まで書いたので、今回は３つ目以下についてです。

３．jQuery関連

今回の案件の中でjQueryを使ったコーディングが登場しました。
・ハンバーガーメニュー
・トップへ戻る「固定ボタン」
・トップから○px以上スクロールするとヘッダーに背景色を付ける
・その他プラグイン

やはりまだまだjQueryは難しいですね。ほぼググってコピペしただけです。今回の案件を通して、jQueryをもっと重点的に勉強しようと思い、
「jQuery標準デザイン講座」という書籍を買うことにしました。
https://product.rakuten.co.jp/product/-/36939fff86335ba276204199f8582d0b/
勉強はこれからします。

４．クラス名の付け方

今回の初案件を通して、これが一番勉強になったことです。これまではHTMLを書いていくときに、何となく上から順番にクラス名を付けていっていました。したがって、CSSも上から順番に調整していました。

今回は、（姉のアドバイスがあり、）ページ全体を俯瞰した上で、フォントサイズやカラー、コンテナー幅などにおいて共通のものがあれば同じクラス名を付けておくことで、一つCSSを書くだけで他の部分も連動して変えられることを学びました。これからコーディングするときはまず始める前にページ全体を見て効率的にクラス名を付けていくことを意識して進めていきます！！

これは「当たり前」のことなのでしょうが、完全独学の私にとっては目から鱗でした。後述するレスポンシブ対応のときもラクに調整できました。

５．レスポンシブ対応
私はこれまでレスポンシブ対応に苦手意識を持っていました。
「みんなどうやってしてるんだろう。」
「絶対もっと効率のいいやり方があるはず。」
などと思いながらモヤモヤしていました。
しかし！今回の案件でそれが少しスッキリしました。

前述の通り、これまではページの上から一つ一つ順番にクラス名を付け、それぞれに対してCSSを書いてデザインを調整していたので、
やっとPC画面サイズの調整が完成しても、タブレット画面サイズにおいても、また上から一つ一つ調整をしていく必要がありました。（もちろんタブレット画面サイズ以外も同様。）

ところが、同じフォントサイズ、同じ文字色、同じ横幅のコンテナーについてはあらかじめ同一のクラス名を付けておけばいいことを今回学びました。レスポンシブ対応する際、一箇所を変更すれば他の箇所も連動して変更されました！

これでだいぶレスポンシブ対応がラクになりました。（いやぁ、もっと早く知りたかった！）

ということで、初案件を通して、これまでの疑問が解決できると同時に、新たな課題も見えてきました。いろんな方もおっしゃっているとおり、「自分でアウトプットしていく中で成長できる。」というのが身に染みてわかりました。引き続き、インプットをしながらアウトプットも積極的にやっていきます！

さて、次からは、先ほども書いたとおり、
「jQuery標準デザイン講座」という本を使って、jQueryをもっと使えるように勉強していきます。

それでは！（次回に続く）