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

どうも7noteです。初心者ならではのよくやってしまいがちな誤字集を作ってみました。スペルミスを減らす方法も！

初心者のうちはまだHTML・CSSに慣れていなくて「あれ、うまく効かないなぁ」なんて事が多いと思います。

そして原因を調べてるうちに、あることに気付きます。

「ここスペルミスってるやん。」

そんなあるあるを一覧にしてみました。
誤字を探すときに参考にしていただければと。

またスペルミスを減らす方法についても後半でまとめています！

HTML・CSSでやりがちな誤字

HTML編

◎ 正しいスペル	✕ 間違ったスペル	間違っている理由・補足
header	herder	「a」が「r」になってる
footer	fotter	「o」ではなく「t」が2個ある
nav	navi	「i」がいらない
table	tabre teble	「l」が「r」になってる 「a」が「e」になってる
form	from	「o」と「r」が逆になってる
button	botton buton	「u」が「o」になってる 「t」が抜けてる

CSS編

◎ 正しいスペル	✕ 間違ったスペル	間違っている理由・補足
margin	magin	「r」が抜けてる
important	inportant impotant	「m」が「n」になってる 「r」が抜けてる
center	centar centr	「e」が「a」になってる 「e」が抜けてる
background	backgraund	「o」が「a」になってる
border	barder	「o」が「a」になってる
linear-gradient	linar-gradient liner-gradient	「e」が抜けてる 「a」が抜けてる
font	fonts	「s」がいらない
height	hight	「e」が抜けてる
padding	pading	「d」が抜けてる
clear	cler	「a」が抜けてる
float	flort	「r」が「a」になってる
position	postion posision	「i」が抜けてる 「t」が「s」になってる
vertical-align	vartical-align	「e」が「a」になってる

クラス名・id名編

◎ 正しいスペル	✕ 間違ったスペル	間違っている理由・補足
data	deta date	「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制作のちょいテク詰め合わせ