TOK's WEB LAB

HTMLを書いていると、「なぜか表示されない」「レイアウトが崩れる」といった問題に直面することは多いです。
特に初心者のうちは、ちょっとした記述ミスが原因で思った通りに動かないケースがほとんどです。

この記事では、HTMLでよくあるミスとその解決方法を具体例付きで解説します。
エラーの原因を理解しながら、一つずつ確実に解決できるようになりましょう。

前提のお話

そもそもHTMLは、どんなに経験を積んだエンジニアであっても、意外と高い頻度で凡ミスが起こります。

最近ではAI生成によって多くの問題を解決できるようになりましたが、HTMLの基礎理解がなければ、AIの出力が正しいかどうかを判断することすら難しくなります。

そこで今回は、私自身も実務の中でよく経験するミスをもとに、具体的な原因と解決方法を紹介します。

画像が表示されない原因

パスミス

HTMLで最もよくあるトラブルの一つが、「画像が表示されない問題」です。

サーバー環境・ローカル環境に関わらず、まず最初に疑うべきなのはパスの指定ミスです。

特に相対パスで指定する場合は、HTMLやCSSファイルから見て、対象の画像フォルダがどの位置にあるのかを正しく把握しておく必要があります。

/img/sample.jpg → ルート基準（サイトの一番上から）
./img/sample.jpg → 今いる場所から
../img/sample.jpg → 1つ上の階層から

ファイル名の違い

VSCodeなどのエディターを使っている場合でも、ファイル名の間違いは意外と起こります。

このケースでは「画像が表示されない」というよりも、意図していた画像とは別のものが表示されているといった問題が発生しやすいのが特徴です。

ファイル名は後から見ても分かりやすいように、以下のようなルールで管理するのがおすすめです。

• ファイル名は用途にあった名前をつける
• 『about-list01_img』『about-list02_img』

このように、用途＋番号で整理しておくとミスを防ぎやすくなります。

拡張子違い

拡張子の違いは、一括でファイル管理や画像書き出しを行う際に起こりやすいミスです。

特にデザインツールから画像を書き出した場合や、複数ファイルをまとめて扱う場面で発生しやすくなります。

たとえば、実際のファイルが「.png」であるにもかかわらず、HTML側で「.jpg」と指定してしまうと、画像は正しく表示されません。

また、拡張子は見た目が似ているため見落としやすく、.jpg と .jpeg の違いや、.png との混在にも注意が必要です。

さらに、ファイル名は完全一致で判定されるため、「大文字・小文字」や「スペルの違い」も含めて正確に記述する必要があります。

カードリストの横並びが不自然なサイズになる

justify-content: space-between で横幅が崩れることがある

カードリストを横並びにする際、display: flex; と justify-content: space-between; を使うケースは多いです。

しかしこの方法は、要素数や画面幅によって余白のバランスが崩れやすく、カードが不自然に広がって見える原因になります。

特に、カードの幅が固定されていない状態で space-between を使うと、左右の余白が強調されてしまい、レイアウトが不安定になります。

grid や width 指定で安定させる

このような場合は、grid を使って列数を固定する方法が有効です。

また、flex を使用する場合でも、カードに width: 33.333%; のような幅を指定し、gap で余白を調整すると安定しやすくなります。

また、この時無限に横幅が伸びないよう、max-widthも指定しておくと良いです。

この辺りはデザインデータを確認し、レスポンシブ時の最大サイズに合わせておくと良いです。

見た目の余白を justify-content のみで調整するのではなく、要素の幅と余白を分けて設計することが重要です。

div要素の高さ調整がうまくできない

height を指定しても反映されない理由

div 要素の高さを調整しようとしても、思った通りに表示されないことがあります。

これは、親子関係やテキスト量、padding などの影響によるものです。

初心者のうちは、見た目を整えるために height を固定値で指定しがちですが、その結果、テキストがはみ出したり、レスポンシブ対応で崩れる原因になります。

高さを揃えるにはレイアウトで調整する

高さを揃えたい場合は、単純に height を指定するのではなく、レイアウト全体で調整する必要があります。

たとえば、親要素に display: flex; や display: grid; を指定することで、複数要素の高さを揃えやすくなります。

無理に高さを固定するのではなく、コンテンツに応じて伸びる設計か、レイアウトで揃えるかを選ぶことが重要です。

aタグをどこに設置するべきか迷う

リンクを一部に付けるか、全体に付けるかで迷いやすい

お知らせ一覧やカードリストを作るとき、a タグをどこに設置するべきか悩むことがあります。
タイトルだけをリンクにするのか、画像も含めたカード全体をリンクにするのかで迷う場面は多いです。

特に初心者は、「全部を囲っていいのか」「この書き方で問題ないのか」と不安になりやすいポイントです。

ユーザー視点で設計する

基本的には、ユーザーがどこをクリックすればよいか直感的に分かる設計が重要です。

カード全体が遷移対象であれば、カード全体を a タグで囲う方が自然な場合もあります。

ただし、リンク範囲が広すぎると誤クリックの原因になるため、内容に応じて最適な範囲を設計する必要があります。

見た目だけでなく、操作しやすさと意味の伝わりやすさを意識しましょう。

インライン要素とブロック要素の違いを理解する

表示崩れの原因は要素の性質かもしれない

HTMLでは、要素ごとに表示の性質が異なります。

この違いを理解していないと、「幅が効かない」「余白がつかない」といった問題が発生しやすくなります。

たとえば、span のようなインライン要素は幅や高さの指定が効きにくく、div のようなブロック要素は横幅いっぱいに広がるのが基本です。

要素の役割を理解するとミスが減る

インライン要素とブロック要素の違いを理解することで、表示の仕組みが把握しやすくなります。

また、CSSの display プロパティを使えば、要素の表示形式を変更することも可能です。

タグの名前だけでなく、どのように表示される要素なのかまで理解することが重要です。

初心者ほど「原因の切り分け」が重要

HTMLとCSSを分けて考える

実装中に問題が起きたときは、HTMLの構造に問題があるのか、CSSの指定に原因があるのかを分けて考えることが重要です。
これができるようになると、修正スピードが一気に上がります。

一つずつ検証する習慣をつける

複数のスタイルを同時に触ると、どの修正が効果を出したのか分かりにくくなります。
困ったときほど、一つずつ原因を確認しながら進めることが、結果的に最短の解決につながります。

おすすめはChromeの検証ツール（ディベロッパーツール）です。

• Mac：Cmd+Option+I
• Windows：Ctrl + Shift + I

まとめ

HTML/CSS初心者がつまずきやすいポイントは、単なる記述ミスだけではありません。

レイアウトの崩れや高さ調整、リンク設計、要素の表示ルールなど、実装を進める中で初めて気づく問題も多く存在します。

これらの問題は、原因を一つずつ整理していけば必ず解決できます。

見た目だけで判断するのではなく、HTMLの構造とCSSの役割を分けて考える習慣を身につけることで、実装の精度は大きく向上します。