ホームページの左右に余白ができる原因とは？CSSで横幅いっぱいに表示する方法を初心者向けに解説

久しぶりにホームページ制作をすると、「昔はこれでできたはずなのに、左右に余白ができる」「ロゴ画像を画面いっぱいに広げられない」と悩むことがあります。

特に最近のHTMLやCSSは、昔と比べてブラウザ標準スタイルやレスポンシブ対応が増えており、10年前の知識だけでは思った通りに表示されないことも少なくありません。

実際には、bodyタグやdiv要素に設定されたmargin・padding・max-widthなどが原因になっているケースがかなり多いです。

この記事では、ホームページの左右余白が消えない原因と、横幅いっぱいに表示する基本的なCSS調整方法を分かりやすく解説します。

まず確認したい「余白の原因」

左右の余白は、単純に画像サイズの問題ではなく、親要素側のCSSが原因であることが多いです。

特によくある原因は以下です。

特に初心者の頃は「画像が小さい」と思いがちですが、実際はCSSレイアウト側の問題であることが多いです。

左右余白を消したい場合、まず以下を確認します。

body {
  margin: 0;
  padding: 0;
}

ブラウザには最初からbodyへ余白が入っているため、これを消すだけで改善することがあります。

特に「左右に8pxくらい余白がある」場合は、ほぼbody marginが原因です。

画像だけ広げたい場合は、imgタグや親要素側も確認が必要です。

例えば以下のように設定します。

img {
  width: 100%;
  height: auto;
  display: block;
}

これで画像が親要素いっぱいまで広がります。

ただし、親要素側にmax-widthが設定されていると、それ以上は広がりません。

Bootstrap系テンプレートや最近のCSSでは、「container」というクラスが使われることが多いです。

このcontainerには横幅制限が入っていることがあります。

例えば以下のようなCSSです。

.container {
  max-width: 1200px;
  margin: 0 auto;
}

この場合、どれだけ画像を広げても1200px以上になりません。

.container {
  max-width: none;
  width: 100%;
}

またはcontainerを使わず別divへ画像を配置する方法もあります。

画像に小さい隙間が残る場合、imgタグがinline扱いになっていることがあります。

その場合は以下で改善することがあります。

img {
  display: block;
}

これは画像下にできる謎の隙間対策としてかなり有名です。

10年前のサイト制作では固定幅レイアウトが多かったですが、現在はスマホ対応が前提です。

そのため最近のCSSでは、以下のような設定が増えています。

つまり、「昔は余白ゼロだった」のに、今は自動的に余白が追加されることがあります。

最近のホームページ制作では、Chromeの開発者ツールを使うとかなり便利です。

F12キーを押すと、どの要素にmarginやpaddingが付いているか確認できます。

特に以下を確認すると原因特定しやすいです。

CSS変更前に「どの要素が余白を作っているのか」を見る癖をつけると修正しやすくなります。

ホームページの左右余白が消えない原因は、画像サイズではなくCSS側のmargin・padding・max-width設定であるケースが非常に多いです。

特にbody margin、container制限、imgタグのdisplay設定は初心者がつまずきやすいポイントです。

まずは「bodyのmargin:0」と「img width:100%」を試し、それでも改善しない場合は親要素のmax-widthを確認すると解決しやすくなります。

10年前と比べて現在はレスポンシブ前提のCSSが増えているため、「どの要素が余白を作っているか」を開発者ツールで確認するのが近道です。