HTML/CSS初学者がつまづきやすい記述ミスと修正方法

ほんの一手間で劇的に変わる HTML & CSS と Web デザイン実践講座

記述したコードが反映されない

• ファイルが保存されていない
• 作業中のファイルとは別のファイルをプレビューしている
• コードのスペルミス

よくわからないけど表示が変

• 正しいタグや属性の記述になっていない → 記述方法の確認。リファレンスサイトも確認しましょう
• 開始タグと閉じタグの数が一致していない
• 閉じタグが正しい場所に記述されていない
• HTML の文法エラーがないかチェック
• デベロッパーツールで表示がおかしい箇所を検証する

CSS が適用されない

• HTML の head タグ内で CSS ファイルを読み込む指定をしていない
• CSS ファイルへのファイルパスが間違っている
• CSS のファイル名が間違っている

特定の箇所の CSS が適用されない

• HTML で指定したクラス名やタグ名と、CSS のセレクター名が一致していない
• クラス名やタグ名、セレクター名にスペルミスがある
• 値の後にセミコロン ; を記述していない
• HTML ファイルに全角スペースが混ざっている → エディターの画面で ⌘F（Windows なら Ctrl+F）で文字検索ができます。そこに全角スペースを入力すると発見できます。
• 正しいプロパティー、値の記述になっていない → 記述方法の確認。リファレンスサイトも確認しましょう。

画像が表示されない

• 画像のファイルパスが間違っている
• 画像のファイル名が半角英数字になっていない（環境によってはうまく表示されないことも）
• 画像のファイル名にスペースが入っている
• 指定している画像の拡張子が違う
• 画像が正常に保存されていない（画像ファイル自体が破損している可能性もあります）

プレビューで見ると謎の余白がある

• デベロッパーツールで余白がある部分を検証する。 margin や padding など、余白の指定が適用されていませんか？
• HTML ファイルに全角スペースが混ざっている → エディターの画面で ⌘F（Windows なら Ctrl+F）で文字検索ができます。そこに全角スペースを入力すると発見できます。

私に「お手本どおりに書いたのにうまくいきません！」と質問してくる多くの人がお手本どおりに書いていません。上記のようなスペルミス、記号が違う、記述漏れ、記述箇所が違う、全角スペースが混ざっている…など、自分で気づいていない記述ミスがほとんどです。

誰でも最初はそんなものです。私も勉強し始めた頃はセミコロンの書き忘れで一日つぶしたこともありましたよ w

すぐに誰かに聞くのではなく、まずはこれらのリストと照らし合わせながら、自力で解決を試みてください。誰かに教わるよりも、自分で解決した方が知識として定着しやすいです。一旦画面から離れてひと休憩はさんで見てみると、間違いに気づきやすかったりもしますね。エラーとうまく付き合って、焦らず地道にスキルアップしていきましょう！