よくあるつまずき集

Webサイト制作を進める中で、思わぬところではまってしまう“あるある”なトラブルをまとめました。
「現象」「原因」「対策」の3ステップでサクッと解決へ導きますので、困ったときはここをチェック！
まずは目次から、自分がいま直面している項目へジャンプしてみてください。

STEP Amargin・paddingが効かない

visibility_off現象

要素に余白（margin/padding）を指定しても、スペースが空かない、または反映されない。

help_outline原因

その要素がdisplay: inlineのままになっている
親要素にoverflow: hiddenなどで切り詰められている
box-sizingがcontent-boxのままで余白分が幅に加算され、意図したサイズにならない

build対策

/* 要素をブロック表示に */
.element {
  display: block;
  margin: 16px 0;
  padding: 12px;
}

/* box-sizing を変更 */
* {
  box-sizing: border-box;
}

/* 親要素の overflow 見直し */
.container {
  overflow: visible;
}

詳細はこちら

STEP B画像がはみ出す・縮まない

visibility_off現象

画像を指定した幅以内に収めたいのに、コンテナからはみ出す。モバイル表示で画像が左右にはみ出してスクロールが発生する。

help_outline原因

デフォルトのimgはインライン要素かつ幅固定になりがちで、親幅に合わせて縮まない。

build対策

img {
  display: block;      /* ブロック化して余分な余白を消す */
  max-width: 100%;     /* 親要素の幅を超えない */
  height: auto;        /* アスペクト比を保って縮小 */
}

詳細はこちら

STEP CFlexboxで要素が縮まない／並びが乱れる

visibility_off現象

横並びにしたいのに、一部の子要素が縮まないままはみ出す。子要素同士の間隔が不揃い、並び順が乱れる。

help_outline原因

Flexアイテムの初期min-widthが自動でコンテンツ幅まで広がるため縮まらない。flexプロパティを指定しないと均等配置や縮み機能が働かない。

build対策

.flex-container {
  display: flex;
  gap: 20px;
}

.flex-item {
  flex: 1 1 0;   /* flex-grow:1, flex-shrink:1, flex-basis:0 */
  min-width: 0;  /* 強制的に親幅に合わせて縮む */
}

詳細はこちら

STEP Dリンクがクリックできない／ボタン化できない

visibility_off現象

リンクテキストの周囲をクリックしても反応しない。見た目はボタン風にしたいのに、<a>タグがテキストにしか適用されない。

help_outline原因

<a>はデフォルトでdisplay: inlineのため、文字列部分だけがクリック領域。ボタン表示用のCSS（パディング・背景色）がinline要素に適用されると余白部分が反応しない。

build対策

a.button {
  display: inline-block;    /* ブロック扱いにして余白全体を押せるように */
  padding: 0.8em 1.2em;
  background-color: #3498db;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
}
a.button:hover {
  background-color: #2980b9;
}

詳細はこちら

STEP Eフォントや文字サイズが反映されない

visibility_off現象

CSSで指定したフォントファミリーやfont-sizeが適用されない。見出しや本文の文字サイズだけがなぜか変わらない。

help_outline原因

CSSファイルの読み込み順序が後回しになっている。
指定したセレクタの優先度（Specificity）が不足している。
ブラウザのデフォルトスタイルや他のCSSに上書きされている。

build対策

/* ① style.css を<head>内で最後に読み込む */
/* ② より詳細なセレクタを使う */
h1.site-title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2rem;
}

/* ③ 必要なら !important を一時的に利用 */
p {
  font-size: 1rem !important;
}

詳細はこちら

STEP Fメディアクエリが無効化される

visibility_off現象

@media (max-width: 768px) 内のスタイルが適用されず、モバイルでレイアウトが崩れたまま。

help_outline原因

<meta name="viewport">タグがない、または設定が不適切。
メディアクエリを書いたCSSが最後に読み込まれていない。
クエリ式の書き方ミス（カンマの位置や括弧が正しくない）。

build対策

<!-- HTMLの<head>内に必ず記述 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

/* モバイルファーストの場合 */
@media screen and (max-width: 768px) {
  .container {
    padding: 0 1rem;
  }
}

/* あるいはPCファーストの場合 */
@media screen and (min-width: 769px) {
  .container {
    max-width: 960px;
  }
}

詳細はこちら