【初心者向け】CSSのよくあるハマりどころ5選

こんにちは。masaでございます。
CSSを書いていて「なんで効かないの？」と手が止まったことはありませんか？
実は、CSSで初心者がつまずくポイントはある程度パターンが決まっています。

この記事では、特にハマりやすい5つに絞って、原因と解決方法を解説します。

① z-indexが効かない

よくある状況

「前面に出したいのに、要素が後ろに隠れる…」

原因

z-indexを指定している要素に、positionが指定されていない。

解決方法

.box {
  position: relative;
  z-index: 10;
}

ポイント

• z-indexは要素の「重なり順」を決めるためもの
• ただし、position: relative / absolute / fixedが必要

z-indexには必ずposition！

② position: absoluteの位置がおかしい

よくある状況

「親の中に配置したいのに、画面の端に行ってしまう…」

原因

基準になる親にpositionがついていない。

解決方法

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 0;
  left: 0;
}

ポイント

• absoluteは「一番近いposition付きの親」が基準になる
• 親にposition: relativeをつけるのが基本

子は親を見て育つ！

③ 画像の下に謎の余白ができる

よくある状況

「なんだか画像の下にちょっと隙間ができる…」

原因

imgはデフォルトがinline要素のため、文字と同じ扱いになる。

解決方法

img {
  display: block;
}

ポイント

• inline要素は「文字の位置（ベースライン）」に揃う
• そのせいで余白ができる

画像はとりあえずdisplay: blockでOK！

④ widthがはみ出す

よくある状況

「width: 100%にしたのに、はみ出る…」

原因

paddingやborderが別で加算されている。

解決方法

* {
  box-sizing: border-box;
}

ポイント

• 初期状態は content-box（paddingは別計算）
• border-boxにすると全部まとめて計算される

最初に全体へ指定しておくのが定番！

⑤ flexで中央寄せできない

よくある状況

「中央にしたいのに、なぜかズレる…」

原因

justify-contentとalign-itemsの役割を混同している。

解決方法

.container {
  display: flex;
  justify-content: center; /* 横方向 */
  align-items: center;     /* 縦方向 */
}

ポイント

• justify-content → 横方向（主軸）
• align-items → 縦方向（交差軸）

flexは「向き」を意識するのがコツ！

コーディングを始めたばかりの頃は「なんで？」の連続です。
そのせいで作業時間が膨大になることも珍しくありません。
この記事が、少しでも皆様のつまずきを減らし、悩みの少ない快適なコーディングライフにつながることを切に願ってやまない日々を送り続けてまいります。
ではまた次回に！