どうも7noteです。HTML・CSS初心者は気をつけたい罠(トラップ)4選

始めたての頃には気付きにくい、参考書にも載ってない（小さくしか載ってない）HTML・CSSのトラップを紹介していきます。
初歩的だけど私自身悩んだりつまったりしたことがあったので、参考になれば嬉しいです。

HTML・CSSで陥りやすいトラップ4選

①インライン要素の間で改行してはならない

HTMLを記述する際、このような書き方はNGです。

<div>
    <span>あいう</span>
    <span>えお</span>
</div>

なぜいけないのか？こうなるからです。

--結果--
あいう えお

問題点として、エディタでインライン要素とインライン要素の間に改行を入れてしまうと実行結果側で約半角分の余白ができてしまいます。

対策方法

改行をコメントアウトで繋ぐ

<div>
  <span>あいう</span><!--
  --><span>えお</span>
</div>

--結果--
あいうえお

このようにして対処しましょう。
他の方法についてはこちら→https://naruweb.com/coding/inline_space/

②インライン要素には幅や高さを指定できない（※例外あり）

span {
    width: 100%; /* ← 効きません */
    height: 200px; /* ← これも効きません */
}

対処方法としては、displayの値をdisplay: inline-block;にするか、display: block;にする必要があります。
インライン要素に指定できないCSSはこちら→https://naruweb.com/coding/inline-ng/

③ディレクトリ構造・パスの書き方

cssファイルや画像を読み込む時に、ディレクトリ構造を理解できていないと読み込みたいファイルを読むことができません。

パスの書き方は3種類あります。

• https://www.xxxx.com/xxxx/image.jpg（絶対パス）
• ../image.jpg（相対パス）
• /xxxx/image.jpg（ルートパス）

その中でまた相対パスは3つの書き方があります。

• image.jpg（同階層の場所）
• ./image.jpg（呼び出し元と同じ場所）
• ../image.jpg（一つ上の階層）

「3つ上の階層のimagesフォルダの中」ならこう書きます。

../../../images/image.jpg

パスについてはこちら→https://naruweb.com/coding/path/

④line-heightの影響で余白の高さが変わる。

h1の文字の上に余白が40pxあったとします。margin-top: 40px;を指定したので大丈夫と思いきや、
40pxより少しおおきい余白ができてしまい、デザインと違う見た目になってしまうなんてことが起きます。

これはline-height分の見えない余白があるからです。
基本的に文字にはline-height（行間）が指定されており、文字の上下に余白があります。
そのため、文字が持つline-height分の余白とmarginが合計されて40px以上の余白ができてしまいます。

対策方法

line-height分を計算してmarginの値から引く方法があります。

line-heightと上手にお付き合いする方法はこちら→https://naruweb.com/coding/line-height/

まとめ

全て過去に詳しい記事を書いたので、細かい説明についてはそちらをご覧ください。
本には載っていないが、よく引っかかるトラップなので覚えておきたいところです。

おそまつ！