🐥

新人エンジニアによくあるHTML/CSSの間違い6選

2025/09/05に公開

2件

エンジニアになって8年目。最近は新人の研修や若手のコードレビューなど、中堅的な役割が多くなってきました。
彼らに教えたりレビュー指摘をしながら、「あ〜わたしも昔同じ間違いしてたな」「この間違いあるあるだな〜」と思うことがあります。
そこで、わたしが新人の時によくやった間違いをまとめます。参考になると嬉しいです。

 1. 効果のないCSSを書いちゃうデザインを再現しようとしてCSSをあーでもない、こーでもないといじくりまわすと、たいてい不要になったCSSが混在します。
このCSSって効果あるんだっけ？が気になる時は、Chromeの開発者ツールを開きましょう。
Element > Stylesを見てみると、効果のないCSSにはグレーの「i」マークがついています。position: staticの時はtopやleftは効果がない、と書いてます。
これを手がかりに、効果のないCSSを判断しましょう！

 2. left: 50%、top: 50% だけだと真ん中にならない要素を上下左右真ん中にしたいとき使いがちなのがposition: absoluteとleft: 50%、top: 50%。でもこれだけだと真ん中にはなりません。
.box {
  potision: absolute;
  left: 50%;
  top: 50%;
}
こんな感じで、boxの左上がちょうど真ん中に来てしまいます。
真ん中に表示したいときは、translateでbox自身の半分の高さと幅を引いてあげましょう。
.box {
  potision: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%; /* ✨これが重要 */
}

 3. ただ並べちゃう
こういうデザインがあったときは、<div>タグと<img>タグただ並べてマークアップするのではなく、意味のあるHTMLタグを使いましょう。
よく使うのは<ul>タグです。（参照：<ul>: 順序なしリスト要素 - MDN）
単純に<div>で並べてしまうと、それらがひとまとまりだよ〜という意味が薄れてしまいます。<ul>なら、全体が1つのリストだということを表現できます。
1番目、2番目など順番が意味を持つ場合は<ol>タグが良いです。（参照：<ol>: 順序付きリスト要素 - MDN）
タイトル＋説明が並んでいる場合は<dl>もあります。（参照：<dl>: 説明リスト要素 - MDN）

以下のような「住所：xxx」「電話番号：xxx」という情報の整理に便利です。

 4. 見た目に合わせてマークアップしちゃうHTMLとCSSは別々の役割があります。HTMLは文章、CSSは見た目を担当します。HTMLは文章なので、文字だけをみて自然な流れになるようにマークアップをするのが理想です。
要素が左右逆転しながら縦に並んでいるようなデザインの場合に、見た目に引きずられて↓のようなマークアップをしがちです。
<ul>
  <li>
    <!-- img → h3の順番 -->
    <img src="..." />
    <h3>遠くに見える海</h3>
  </li>
  <li>
    <!-- h3 → imgの順番 -->
    <h3>森へつづく一本道</h3>
    <img src="..." />
  </li>
</ul>
文章として違和感がないのは、「タイトル」→「画像」の順番ですよね。途中で順番が入れ替わるのも変です。
htmlは<h3> → <img>で統一して、CSSで見た目を整えるのが正解です。
li {
  display: flex;
}
li:nth-child(odd) {
  /* ✨1つおきに順番を入れ替える */
  flex-direction: row-reverse;
}

 5. line-heightをpx指定しちゃう文章の行の高さを設定するline-heightですが、その値の書き方は注意です。
px指定すると行の高さが固定されてしまい、font-sizeによっては広すぎたり重なって見えたりします。
line-height: 32px;
単位を指定しない場合、行の高さはfont-size * line-heightになります。font-sizeに対して相対的に変化するので違和感がなくなります。
line-height: 1.5;
MDNでも以下のように書かれています。（参照：line-height - MDN）
（単位なしが）line-heightを設定する好ましい方法です。

 6. opacityは子要素にも影響するコンテンツの上に半透明の要素を置くUIがあります。ハンバーガーメニューやオーバーレイなどが該当します。
半透明といえばopacityですが、これを親要素に使ってしまうと、子要素も半透明になってしまいます。中の文字なども色が薄くなって読みづらくなります。
<div class="overlay">
  <ul>
    <li>ホームにもどる</li>
    <li>ニュース</li>
    <li>会社概要</li>
    <li>お問い合わせ</li>
    <li>採用情報</li>
  </ul>
</div>
.overlay {
  opacity: 0.65;
  background: #222222;
}
ul > li {
  font-size: 24px;
  color: #ffffff;
} 
こんな感じで、親要素の.overlayにopacityを設定すると、子要素のliの文字も半透明になってしまいます。
opacityではなく、backgroundの色だけを半透明にするのが吉です。その時に便利なのがcolor-mixです。（参考：color-mix() - MDN）
.overlay {
  background: color-mix(in srgb, #222222 65%, transparent);
}
背景色だけを半透明にでき、子要素の色には影響しません。
以上です！