Webサイトを制作中に、なぜかうまく表示されないことはよくありますよね。最初のうちは簡単なミスを見落としがちです。実際によく質問される項目を、拙著「ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座」にてまとめています。その一部、特にHTML/CSSについて頻繁に聞かれるケースを紹介します。

↑私が10年以上利用している会計ソフト！

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

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

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

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

CSSが適用されない

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

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

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

画像が表示されない

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

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

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

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

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

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