【初心者ならわかる】HTML・CSSのよくやりがちな誤字と、スペルミスを減らす方法

どうも7noteです。初心者ならではのよくやってしまいがちな誤字集を作ってみました。スペルミスを減らす方法も！ 初心者のうちはまだHTML・CSSに慣れていなくて「あれ、うまく効かないなぁ」なんて事が多いと思います。 そして原因を調べてるうちに、あることに気付きます。 「ここスペルミスってるやん。」 そんなあるあるを一覧にしてみました。 誤字を探すときに参考にしていただければと。 またスペルミスを減らす方法についても後半でまとめています！ HTML・CSSでやりがちな誤字 HTML編 ◎ 正しいスペル ✕ 間違ったスペル 間違っている理由・補足 header herder 「a」が「r」になってる footer fotter 「o」ではなく「t」が2個ある nav navi 「i」がいらない table tabreteble 「l」が「r」になってる「a」が「e」になってる form from 「o」と「r」が逆になってる button bottonbuton 「u」が「o」になってる「t」が抜けてる CSS編 ◎ 正しいスペル ✕ 間違ったスペル 間違っている理由・補足 margin magin 「r」が抜けてる important inportantimpotant 「m」が「n」になってる「r」が抜けてる center centarcentr 「e」が「a」になってる「e」が抜けてる background backgraund 「o」が「a」になってる border barder 「o」が「a」になってる linear-gradient linar-gradientliner-gradient 「e」が抜けてる「a」が抜けてる font fonts 「s」がいらない height hight 「e」が抜けてる padding pading 「d」が抜けてる clear cler 「a」が抜けてる float flort 「r」が「a」になってる position postionposision 「i」が抜けてる「t」が「s」になってる vertical-align vartical-align 「e」が「a」になってる クラス名・id名編 ◎ 正しいスペル ✕ 間違ったスペル 間違っている理由・補足 data detadate 「a」が「e」になっている menu manu 「e」が「a」になってる main mein 「a」が「e」になってる about abaut 「o」が「a」になってる archive arcive 「h」が抜けてる group grupe 「gr」しかあってない area aria 「e」が「i」になってる column colmun 「u」と「m」が逆になってる error erorr 「o」と「r」が逆になってる スペルミスを減らす方法 ▼ 見直す 必ずHTML側とCSS側両方見直しましょう。 指差しで確認したり、声に出してチェックしましょう。 ▼ コピペする 特にclass名なんかは必ずコピペして利用しましょう。 ▼ Emmetなどの入力補填ツールを使う 自動入力や、入力補填ツールを使いことで手入力をできる限り減らしましょう。 ミスだけでなく、時短にも繋がります。 ▼ 英単語を覚える 英語ができれば間違える数は減るでしょう。ただし日本人でも日本語を間違えることはあるので完璧には難しいです。 ▼ 経験を積む なれてくればミスは絶対に減ります。人間慣れればできるようになるものです。 ▼ プロパティ名などに色がつくエディタを使う エディタでスペルミスをしていれば気づくように、プロパティに色がつくエディタがあります。 そのようなエディタをつかっていれば、ミスしても気づきやすくなるのでオススメです。 まとめ 人間が手入力しているうちはミスはつきものです。 なんで間違えたんだろうと悔やむ時間があれば、「どうやったらミスが減らせるのか」を考えるのに時間を使ったほうが合理的でしょう。 ここで紹介した方法を使えば確実にミスは減っていくと思います。 少しずつHTML・CSSに慣れて行きましょう！ おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ