サイト模写の備忘録　CSS編(上級編)

こんにちは、関西在住で主夫歴５年越のYUJIです。

家事や子育てで、皆さんも毎日忙しい日々をお過ごしですか？

引き続き、有名な「Code-step」という学習サイトの模写における「HTML上級編」のうち、今回は、「CSS」言語の入力時における、初学者によくあるミスをお伝えます。

私は、CSS言語については、だんだんコードソースパターンを覚えていけるようになってきました。たとえば、「レスポンシブデザインでブラウザの幅が変わる際には、Widthやborder-bottomを少し触らなければならないだろうな」とか、「hamburgerメニューの処理には、hover時にopacityを薄くかける必要があるだろうな」というような、そんな感覚です。

学習を数ヶ月ほど継続すると、こうした体が（正確には頭が）覚えてくれるようになって、ちょっとづつ理解が進んできていることを体感できます。

今回の入力ミスについて（備忘録CSS）

今回の入力時におけるミス発生の状況は以下の通りです。

---

1. font-familyの ‘Source Sans Pro’ を小文字＋ダブルクォーテーションで誤入力。
2. #side-btnのz-indexが未設定
3. .bgの width:100vw; と hight:100vh; が いずれもpxでの誤記
4. .fadeinのtransformがtransitionと誤記
5. #navi width:100%;が100pxと誤記
6. 同じく#navi li の width:100%;が100pxと誤記
7. #mainvisual imgのwidth 100vh を vw と誤記
8. #information の info-date-en を info-dete-enと誤記
9. #acces .plade transform: 0.3s; を0.3msと誤記
10. #footer border-top を border-botomと誤記
11. SP内の#contact .btnのwidth:100%; を pxと誤記
12. SP内の一部で } が不足

---

　　

今後について

今回のミスは、従前と比べると、だいぶん改善されてきたかな、と実感しているところです。特に、自分でミスをしそうなコードを推測できるようになりましたので、それが誤記防止につながっているのかな、と思えるようになりました。

トレーニングって、従前に想定していなかった効果を返してくれるんだなあと感じているとことです。

とりあえず、これで2ヶ月の間、ずっと取り組んできたサイト模写の学習サイト「Code-step」を一旦離れて、次のステップに進めたら、と思います。
　

それでは、また。