ISSEN 
はじめに
こんにちは、たくまです！
Web制作を始めたばかりの方にとって、HTMLやCSSは最初の登竜門ですよね。
ネットで見つけたサンプルコードをそのままコピペしたり、うまく表示されることだけを目的に書いたコードは、見た目は動いていても中身がめちゃくちゃ…なんてことがよくあります。
こうした「NG行動」は、保守性・拡張性・SEO・アクセシビリティに悪影響を与えるだけでなく、学習の妨げにもなります。
この記事では、初心者がやりがちなHTML・CSSのNG行動8選を取り上げ、それぞれの「なぜNGか」「どう直すか」説します。
各NG行動
NG1：<br>を連打してスペースを作る
<p>こんにちは<br><br><br>お元気ですか？</p>改善方法
<p>こんにちは</p>
<p>お元気ですか？</p>p {
margin-bottom: 1.5em;
}<br>は「行の切れ目」を示すものであり、文章の構造を区切る目的には向いていません。たとえば、小説やポエムのような一文ごとの改行には適していますが、見た目の余白目的で使用するのは避けましょう。CSSでスペースを設計する癖をつけると、レイアウトの柔軟性が劇的に高まります。
NG2：すべて<div>で囲う
<div class="header">見出し</div>
<div class="main">本文</div>改善方法
<header>見出し</header>
<main>本文</main>HTML5からは「意味のあるタグ（セマンティックタグ）」が豊富に用意されており、Googleのクローラーやスクリーンリーダーもこれらを理解して処理します。構造的に正しいタグを使うことで、検索エンジン対策やアクセシビリティの向上にもつながります。
NG3：インラインスタイルを多用する
<h1 style="color:red;">タイトル</h1>改善方法
<h1 class="main-title">タイトル</h1>.main-title {
color: red;
}インラインスタイルは「一度だけ」「急ぎで修正する」場合などに限って使うべきです。大量の要素にスタイルを適用する場合や、後からの調整が必要な場面ではスタイルの一元管理ができなくなり、大混乱の元になります。クラス設計とCSSファイルをしっかり分ける習慣を持ちましょう。
NG4：適当なクラス名（box1、testなど）
<div class="box1">内容</div>改善方法
<div class="product-card">内容</div>クラス名はコードを読む人へのメッセージでもあります。命名に意味があればあるほど、構造が直感的に理解できるようになります。BEM記法（例：.product__title--highlight）なども習得すると、大規模サイトにも対応しやすくなります。
上記のNG行動は特にネットのコードをコピペしたときにしがちなので注意しましょう。
NG5：画像にサイズ指定がない
<img src="sample.jpg" alt="画像">改善方法
<img src="sample.jpg" alt="画像" width="600" height="400">画像のサイズを指定しないと、ページの読み込み中に突然コンテンツがずれて表示されることがあります。これが「CLS（レイアウトのズレ）」というUX悪化の一因です。あらかじめサイズを指定することで、ページ全体が安定して表示されます。
NG6：!importantを多用する
.button {
color: white !important;
}改善方法
.btn-primary {
color: white;
}!importantは最終手段です。あまりにも多用すると、どのCSSが効いているのか分からなくなり、バグの温床になります。どうしても必要な場面（例：サードパーティCSSの上書きなど）以外は使わないようにしましょう。
NG7：背景画像に意味のある画像を使う
.hero {
background-image: url('main.jpg');
}改善方法
<img src="main.jpg" alt="製品Aのイメージ画像">背景画像にはaltが付けられないため、意味のある画像や情報を含む画像には不向きです。検索エンジンやスクリーンリーダーが画像の内容を理解できないため、重要な画像は<img>タグで扱いましょう。
NG8：スタイルにidを使用している
#header {
background-color: blue;
}改善方法
.header {
background-color: blue;
}idは1ページ内で唯一であるべきで、JavaScriptやアンカーリンクのターゲット用に使用するのが基本です。CSSはクラスベースで管理することで、再利用性が高まり、スタイル競合のトラブルも避けやすくなります。
おわりに
プログラミングやマークアップの世界では、「とりあえず動けばOK」な時期も必要です。しかし、次のステップに進むには「なぜその書き方をするのか」「なぜこれは避けるべきなのか」という視点が欠かせません。
今回紹介したNG行動は、ほんの一部です。学習を続けるうちに「最初にこれを知っておきたかった！」と思うような知識がどんどん出てくるでしょう。
HTMLやCSSは、見た目を整えるだけのものではありません。意味のあるタグ選び、構造的に正しいレイアウト、柔軟で保守しやすいスタイル——それらを実現することで、プロフェッショナルなWeb制作ができるようになります。
この記事をきっかけに、「なぜその書き方なのか？」という意識を持ってコーディングに取り組んでみてください。小さな意識の積み重ねが、確実なスキルアップにつながります。
