サイト模写に多いミス CSS編

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

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

それでは、前回に続きとなりますが、今回は、サイト模写における「css」言語のよくあるミスをお伝えします。具体的には、「style.css」と呼ばれるファイル構成のコード作成時における発生しやすいミスを書いていきます。

まだまだ修行が足りないなと思う毎日ですが、継続して力をつけていきたいと思います。

具体的なミスを挙げてみました

今回の模写時に生じたミスは下記の通りでした。

---

1. 冒頭の@charset “UTF-8″が ‘UTH-8′(シングルクォーテーション)で記載していた(1)
2. justify-contentの設定不足(1)
3. width設定の％をpxで誤入力(2)
4. width設定のpxを%で誤入力(1)
5. #contactのCSSが不足(1)
6. #contactを#conctactと誤記(1)
7. border-top を margin-top で誤入力(1)
8. font-size を font-styleで誤入力(1)
9. menuクラスをmeunと誤記(1)
10. copyrightクラスをcoyrightと誤記(1)
11. 数字の8を0と誤記(1)
12. overflow-y を overflowと誤記(1)
13. bottomをtopと誤記(1)
14. hamburgerクラスをha,burgerと誤記(1)
15. translate を transrateと誤記(2)
16. rotate を totateと誤記(1)
17. 数字の 0 を o と誤記(1)
18. nth-last-child を nth-childと誤記(1)
19. figureクラスをsigureと誤記(1)
20. 関数calc()をclac()と誤記(3)
21. linkクラスをlinlと誤記(1)
22. border-rightをborder-leftと誤記(1)

---

繰り返してミスを生じさせているコード入力も多いかなと思いますので、もっと精度を上げていきたいと思います。特に、ブラインドタッチの精度が悪いと、隣接するキーを押してしまい、lとkなど、文字の配置によっては気づきにくいスペル間違いを生じさせかねません。こうしたスペル間違いは、発見するのも時間がかかってしまいます。

このようなミスは要注意ですね。

今後について

いかがでしたでしょうか。

今回のサイト模写で、Code-stepサイト上では「HTML中級編」が完了となります。
　
　

参考サイト　＞
「作って学ぶコーディング学習サイト」 https://code-step.com/

次は、いよいよ「HTML上級編」となりますので、気合を入れていきたいと思います！

それでは、また次回に。