最近、新人から助けを求められたときによくあるミスの例をまとめてみました。
コーディングは細かい仕事なので、凡ミスでも慣れていないと見つけられなかったりします（私はよく凡ミス沼にはまります）。気を落とさず落ち着いて確認していきましょう！
はじめに
検証ツールの使い方
コーディング時には検証ツールが必須なので使い方を確認しましょう。
私も細かい使い方は詳しくないのでコーディング時によく使うところだけ。
Chromeの場合は右クリックで「検証」または「F12」で検証ツールを立ち上げることができます。（他のブラウザでもだいたい同じ）
よく使うのは下記です。
1.「Elements」タブ・左側HTMLのソースコード確認画面
2.「Elements」タブ・右側のcssコード確認画面
3. 要素指定ツール
4. デバイスツールバー
1.「Elements」タブ・左側HTMLのソースコード確認画面
HTMLソースの確認や、編集のプレビューができます。
2.「Elements」タブ・右側のcssコード確認画面
cssの確認や、編集のプレビューができます。
指定しているid、classの確認や指定しているスタイルのオン・オフ・追加を試せます。
スタイルの右側から記述されているスタイルシートと行数がわかります。「style.css:8」と書いてあったら、そのclassはstyle.cssの8行目に記述されているということです。
3. 要素指定ツール
特定の箇所を確認したいときはこの矢印でクリックします。
4. デバイスツールバー
スマートフォンやタブレットなどでの表示を確認する時はここから切り替えます。PCの指定が残ってしまうことがあるので切り替え後に一旦ページを読み込み直すのがおすすめです。
ミスを見つける時の確認方法
HTMLを見てみる
バリデート（構文エラーチェック）ツールで記述ミスがないか確認。
使用しているエディターに構文チェック機能があれば入れておくのがおすすめです。（拡張機能としてインストールしたり、環境設定でできたり、エディターによります）
cssを見てみる
１、検証ツールを開いてcssが効いていなかったり、崩れている箇所を要素指定ツールで指定
２、その要素周辺のcssがちゃんとcssコード確認画面に表示されるか確認
→表示されていなかったらclassやcssが指定できていないということ
３、要素指定ツールでボックス（要素指定ツールで触れると色がつく範囲）やcss見ながら思うような指定ができているか確認
※手順ではHTMLの構文チェックをしてからcssを書いていくのが正しいのでHTML→cssの順にしていますが、個人的には「３」のボックス要素の確認をしたときにボックスの範囲がおかしかったらHTMLが間違っているということなのでcss→HTMLの順で確認したほうが見つけやすいように思います。
最初は見つけずらいかもしれませんが慣れていきましょう。
よくあるミスの例
スペルミスをしていないか
一番多いかもしれないのがスペルミスです。私も「絶対あってる！」と思ってたら間違えてた・・ということがしばしば。
・id、class名
・スタイル名
・スタイルのコロン（:）とセミコロン（;）
・半角スペースやハイフン（-）
これらは間違えやすいのでなるべくエディターの予測入力やコピペを使うようにしましょう。
閉じタグ／閉じカッコはあるか
意外と気付きづらいHTMLの閉じタグ、cssの閉じカッコ忘れ。
・divの閉じタグ
・メディアクエリの閉じカッコ（最後2個重なるのを忘れがち）
上記が間違いやすいです。コードを書くときはかたまりごとにインデントを使って、見やすく成形する癖をつけると間違えにくくなります。
入れ子構造になっているか
前述の閉じタグ忘れと近いですが、閉じタグが余分についていたり、入れ子にしたタグと入れ違ってしまうこともあります。また、並列のつもりの段落（<p>）と画像を入れ子にしてしまう、といった構造を間違えてしまうことも。
こちらも前述と同様にインデントを使って成形すると間違えにくくなります。
キャッシュを削除したか
意外と盲点なのがキャッシュ。キャッシュとは、毎回ページを読み込むごとに新しくサイトのデータを取得すると負荷がかかるので、一度訪問したサイトのデータを一時保存しておく仕組みです。
キャッシュが残っているとHTMLやcssを更新しても一度読み込んだデータが上書きされません。更新が反映されていないのかな？と感じたらブラウザのキャッシュを削除したり、違うブラウザで確認してみてください。
（ちゃんとしたサイトの場合はサーバー側のキャッシュを残していることがあるので、ブラウザだけでなくサーバー側のキャッシュの削除が必要です。）
親or子にかける指定を間違えていないか
フレックスボックスのような親子関係があって成り立つcssもあります。親にかける指定と子にかける指定を間違えている場合もあるので確認してみましょう。
・フレックスボックス
・floatの解除
・position
コーディングは1文字間違えるだけでうまくいかなくなってしまうので最初のうちはミスを見つけづらいかもしれません。
ミスを早く見つけるコツとしては、慣れるまでは一気にコーディングせずにこまめに確認しながら進めることでしょうか。
私も先輩から教わったのですが、プログラミングになると全部組んでからバグを見つけるのが大変なのでこまめに思うような動きになっているか確認しながら進めているそうです。ベテランでもいきなり完璧に組めるわけではないんですね。
コーディングも全部組んでから手戻りになるともったいないので確認しながらを癖づけしていくといいと思います。
