CSSで横幅を画面いっぱいにする方法｜はみ出しを防ぐ基本設定

ホームページを作っていると、

こうした悩みはとても多いです。

そこでこの記事では、CSS初心者でも分かるように、
横幅を画面いっぱいにする方法と、はみ出しを防ぐ基本設定を解説します。

横幅の崩れには、ほぼ決まった原因があるので、ぜひ最後までご覧くださいね！

CSSで横幅がうまく合わないよくある原因

まずは、CSSで横幅がうまく合わないよくある原因からご紹介します。

widthを固定している

.box {
  width: 1000px;
}

このような指定は、スマホでは画面からはみ出します。

大きな画像や表が原因

画像や表は、何もしないと横にはみ出しやすいです。

bodyや親要素の設定を見ていない

親の幅が決まっていると、子要素もそれ以上広がりません。

CSSで横幅を画面いっぱいにする基本の考え方

次に、CSSで横幅を画面いっぱいにする基本の考え方をお伝えします。

基本はとてもシンプルです。

• 画面いっぱいにしたい → 100%
• はみ出しを防ぎたい → max-width

「画面の幅」と「要素の幅」を分けて考えるのがポイントです。

width: 100% を使った基本設定

ここでは、width: 100% を使った基本設定をお伝えします。

まずは、基本形です。

.container {
  width: 100%;
}

これで、親要素の横幅いっぱいに広がります。

よくある勘違い

width: 100% は、
画面いっぱいではなく、親要素いっぱい です。

max-widthを使ってはみ出しを防ぐ方法（重要）

max-widthを使ってはみ出しを防ぐ方法をご紹介します。

横スクロールの一番多い原因は、画像です。

img {
  max-width: 100%;
  height: auto;
}

これを入れるだけで、

• 画面より大きい画像
• スマホではみ出す画像

を防ぐことができます。

body・htmlの横スクロールを防ぐ設定

ここでは、body・htmlの横スクロールを防ぐ設定をお伝えします。

初期余白を消す

body {
  margin: 0;
}

bodyには、最初から余白が入っています。
これを消すと、左右のズレが減ります。

横スクロールを止める方法

body {
  overflow-x: hidden;
}

どうしても原因が分からないときの、最終手段として使います。

表（テーブル）が横にはみ出るときの対処法

表（テーブル）が横にはみ出るときの対処法をお伝えします。

表は、スマホでははみ出しやすいです。

.table-wrap {
  overflow-x: auto;
}

<div class="table-wrap">
  <table>
    <!-- 表 -->
  </table>
</div>

これで、表だけ横スクロールできるようになります。

スマホで横スクロールが出るときのチェックポイント

スマホで横スクロールが出るときのチェックポイントをお伝えします。

横スクロールが出たら、次を確認しましょう。

• widthをpxで固定していないか
• 画像にmax-widthがあるか
• 表やボックスがはみ出していないか

ほとんどの場合、ここで見つかります。

よくある失敗と直し方

よくある失敗と直し方をご紹介します。

width: 100vw を使っている

.box {
  width: 100vw;
}

👉 スクロールバー分ではみ出すことがあります。
基本は 100% を使いましょう。

padding込みで横幅が大きくなっている

.box {
  width: 100%;
  padding: 20px;
}

👉 padding分ではみ出すことがあります。

1か所だけ固定幅が残っている

👉 全体を見直すと、原因が見つかります。

初心者向けの横幅設定まとめ（コピペ用）

最後に、初心者向けの横幅設定まとめをご紹介します。

基本レイアウト

.container {
  width: 100%;
}

画像用（必須）

img {
  max-width: 100%;
  height: auto;
}

bodyの基本設定

body {
  margin: 0;
}

まとめ

CSSで横幅を画面いっぱいにする方法｜はみ出しを防ぐ基本設定はいかがでしたでしょうか？

CSSで横幅を整えるポイントは、とてもシンプルです。

この3つを意識するだけで、
横スクロールの悩みはかなり減りますよ。

横スクロールが出てしまうと、とても使いづらいホームページになってしまいます。

パソコンとスマホで、横スクロールが出ていないことを確認してみてくださいね！
（トップページだけでなく、個別ページも必ず確認しましょう！）