AIの添削で判明！初心者のHTMLコーディングの落とし穴

こんにちは！みとかです。

前回も記事にしました「中級編Exが全く終わらない件」で反省した通り、今回はHTMLをしっかり作り込むところからやり直しました。

とりあえず、TOPページのHTMLだけはなんとか形になってきたので、

という気持ちで、頼りのChatGPTさんにチェックをお願いしてみました。

すると、自分では気づいていなかったミスが思いのほかたくさん発覚…！

今回はその気づきを、シェアしていきたいと思います。

添削で気づいた5つの落とし穴

ChatGPTにチェックしてもらった結果、思っていた以上に基本的なところでつまずいていたことが発覚しました。
どれも「なんとなくやってたけど、実はNGだった」系のものばかり。順にご紹介します！

① class名がぐちゃぐちゃ問題

中級編Exを進める中で、まず最初に指摘されたのが「class名がぐちゃぐちゃすぎる」という問題でした。

私は「ac1」「ac1-1」「ac1-2」みたいに、どんどん番号を足して命名していました。
自分なりには「accordionの1個目かな？」「その中の要素かな？」くらいの感覚でつけていたんですが…

今あらためて見ると、

とツッコミたくなるものばかり。

今回一番やっちゃいけないミスをしていたのが、Swiperを使ってスライド風にしようとしていた箇所です。
swiper-slide1, swiper-slide2 みたいに番号をつけていて、
本来Swiperが自動で処理してくれるclass名（swiper-slide）を勝手に書き換えていました。

これは書き換えちゃいけないんですって。
だから動かなかったのね。

🧠 class名には「意味」と「役割」を

今回の学びとして大きかったのは、class名は“パーツの名前”であり“機能の名前”であるということ。

• 何のブロックなのか？
• その中のどんな要素なのか？
• 見た目やバリエーションはあるか？

こういう視点で命名する「BEM記法」を取り入れてみると、
コード全体がぐっと読みやすくなりました。

上記の「CSS設計完全ガイド」は１年前に読んでいたのですが、すっかり忘れて感覚で設計してしまいました。
BEM記法が一番理解しやすく、メジャーな記法なようなので読み直しました↑

💡 こんな感じにclass名を変更

ChatGPTさんは「何のためのブロックなのか」「どの要素なのかが見ただけで伝わるもの」に変更してくれました。

今後は「なんとなくの数字」じゃなくて、「誰が見ても意味の伝わるclass名」を意識していきたいと思います！

② HTML構造ミス地獄

class名の次にボコボコに指摘されたのが、HTMLの構造そのものが間違ってるという点でした。

具体的には…

❌<ul> の中に <div> 入れちゃってる問題

私、こんなふうに書いてたんです：

❌Before：
<ul class=”nav__list”>
　<div class=”nav-accordion__section”> …</div>
</ul>

一発アウトです！

<ul> や <ol> の中には、<li> しか入れちゃダメだということです。
ここに <div> をぶち込んでしまったせいで、ブラウザの解釈も崩れ、スタイルもぐちゃぐちゃになりました。

正しくは、こう👇

⭕After：
<ul class=”nav__list”>
　<li><div class=”nav-accordion__section”> …</div></li>
</ul>

または、そもそも<ul>が必要な構造でなければ、<div>でグルーピングしてしまってOKとのことです。

❌ <dd> に <li> をネストしてる問題

また、こういったミスもしていました。

❌Before：
<dd class=”ac1__li”>
　<li>会社概要</li>
</dd>

<li> は <ul> か <ol> の中でしか生きられないタグなのに、なぜか<dd> の中に入れてしまっています。

コピペしたり色々している間に、おかしなコードを組んでしまったようです。

💡 正しくはこう！

⭕After：
<ul class=”ac1__li”>
　<li>会社概要</li>
　<li>安全への取り組み</li>
</ul>

🧠 「なんとなく」でタグを使うのは危険！

正直言うと、タグの意味とか構造はそこまで気にせず、「見た目が見本通りになればOK！」というテンションで書いてしまってました。

でも、HTMLの正しい構造が崩れると、

• ブラウザの解釈がズレる
• CSSが効かない／崩れる
• SEOやアクセシビリティにも悪影響

…と、実害がめちゃくちゃ大きいのです。

しかもそれが一見分かりにくいから、直すのに時間がかかります。
だからこそ、まずはHTMLの基本的なルールに立ち返ることがすごく大事だなと痛感しました。

まとめ：HTMLは“構造”が命っぽい

今回チェックしてもらって分かったことは、「HTMLの構造が正しくないと、CSSやJS以前の問題になる」ということです。

• <ul> の中に <div> を入れてはいけない
• li の位置が違うとマークアップが崩れる
• class名が意味を持ってないと、自分ですら管理できなくなる

とにかく、“なんとなく動いてる”では通用しないという現実を突きつけられました。

CSSで「ピクセル単位でズレる」問題が本当に解決したかどうかまでは、まだ分かりません。
これは、最終的に完成させてみないと見えてこない課題かもしれませんね。
また進捗があったら報告します！