スマホで画面が横揺れする？スクロール横溢れを防ぐCSS調整ポイント

スクロール横溢れを防ぐレイアウト調整のポイント

先生と生徒の会話形式で理解しよう

生徒

「スマホで自分のサイトを見ると、なぜか画面が左右にガタガタ動いてしまいます。これって何が原因なんですか？」

先生

「それは『横溢れ（よこあふれ）』という現象ですね。中身のパーツが、画面の横幅よりも大きくなってしまっているのが原因ですよ。」

生徒

「はみ出しているパーツがあるってことですね。でも、どれが犯人なのか見つけるのが難しそうです……。」

先生

「大丈夫です！横溢れを防ぐための基本ルールと、はみ出しを解消するコツを順番に解説していきますね。」

1. なぜWebサイトで横溢れが起きてしまうのか？

Webデザインにおいて、最も避けるべきことの一つが「意図しない横スクロール」です。本来、Webページは上から下へと読み進めるものですが、パーツが画面の右側に突き抜けてしまうと、スマホでは左右に画面が揺れる「横揺れ」が発生します。これはユーザーにとって非常にストレスが溜まる体験です。

この原因の多くは、画像や文字の箱に「固定の幅（px）」を指定してしまっていることにあります。例えば、スマホの画面幅が375pxしかないのに、400pxの画像を置いてしまうと、当然25px分が右側にはみ出します。この「はみ出し」を専門用語で「オーバーフロー」と呼びます。プログラミング未経験の方でも、このオーバーフローの仕組みを理解すれば、スマホでピッタリ収まる綺麗なサイトが作れるようになります。

2. 画像の横幅を100パーセントに設定して自動調整する

横溢れの犯人として最も多いのが「画像」です。デジタルカメラやスマホで撮った写真はサイズが非常に大きいため、そのまま貼り付けると確実に画面を突き抜けます。これを防ぐには、CSSで「画像は親の箱より大きくならないでね」という命令を出しておく必要があります。

具体的には「max-width: 100%;」という魔法の言葉を使います。これを使うと、画像は本来の大きさを保とうとしますが、もし表示する画面が画像より狭くなった場合は、画面の幅に合わせて自動的に縮んでくれます。パソコン初心者の方は、まずこの一行をすべての画像に適用する癖をつけるだけで、トラブルの半分以上を回避できます。


<style>
    .responsive-img {
        max-width: 100%; /* 親の幅を越えないようにする */
        height: auto;    /* 縦横の比率を崩さない */
        display: block;  /* 下の余計な隙間を消す */
        margin: 0 auto;  /* 中央に寄せる */
    }
</style>

<div style="width: 300px; border: 2px solid red;">
    <p>この赤い枠が画面の幅だとすると…</p>
    <img src="/img/sample150-100.jpg" class="responsive-img" alt="レスポンシブな画像">
</div>

ブラウザ表示

3. 文字の箱に余白（パディング）を入れる時の注意点

「文字の箱を幅100%にしたのに、なぜかはみ出す！」というのも初心者がよく陥る罠です。実は、CSSの標準的な計算方法では、幅（width）に加えて「内側の余白（padding）」や「枠線の太さ（border）」が外側に足されてしまうからです。例えば、幅100%の箱に左右20pxずつの余白をつけると、合計で「100% + 40px」の大きさになり、画面を突き抜けます。

これを解決するのが「box-sizing: border-box;（ボックス・サイジング：ボーダー・ボックス）」です。これを使うと、「指定した幅の中に、余白も枠線も全部含めて計算してね」という設定になります。今の時代のWeb制作では、すべての要素にこの設定をかけるのが常識となっています。これさえあれば、余白をどれだけつけても横溢れする心配はありません。


<style>
    .safe-box {
        width: 100%;
        padding: 50px;           /* たっぷり余白をつけても… */
        border: 10px solid blue; /* 太い枠線をつけても… */
        box-sizing: border-box;  /* 画面内に収まるように計算される！ */
        background-color: #f0f0f0;
    }
</style>

<div class="safe-box">
    余白や枠線を含めて、ぴったり画面幅に収まっています。
</div>

ブラウザ表示

4. 長い英単語やURLが画面を突き破るのを防ぐ

日本語の文章は適度なところで自動的に改行されますが、非常に長い英単語やURL（ホームページのアドレス）は、一つの塊とみなされて画面の外へ突き抜けてしまうことがあります。これも横溢れの意外な原因です。

これを防ぐには、CSSで「言葉の途中でも無理やり改行してね」という指示を出します。「overflow-wrap: anywhere;」という命令を使うと、どんなに長い英単語でも、画面の端に来たら自動的に折れ曲がって表示されるようになります。お問い合わせフォームやブログのコメント欄など、ユーザーが自由に文字を入力する場所には必ず設定しておきたい安心の機能です。

5. はみ出した部分を隠すoverflow: hiddenの使い方

どうしてもデザインの都合上、一部がはみ出してしまう場合があります。そんな時の最終手段が「overflow: hidden;（オーバーフロー：ヒドゥン）」です。これは「箱からはみ出した部分は見えなくしてね」という命令です。これを使えば、たとえ中身がはみ出していても、画面の外に突き抜けることはなくなり、横揺れを強制的に止めることができます。

ただし、これを使いすぎると「本来見せるべき情報」まで隠れてしまう危険があります。例えば、ボタンの文字が半分消えてしまったり、重要な図が見えなくなったりします。基本は「はみ出さないように作る」ことが大切ですが、装飾用の画像などが少しだけはみ出してしまう場合には非常に有効なテクニックです。


<style>
    .clip-container {
        width: 100%;
        height: 150px;
        background-color: #eee;
        overflow: hidden; /* はみ出した中身を隠す */
        position: relative;
    }
    .circle-deco {
        width: 200px;
        height: 200px;
        background-color: orange;
        border-radius: 50%;
        position: absolute;
        right: -100px; /* 右側に半分はみ出させる */
    }
</style>

<div class="clip-container">
    <div class="circle-deco"></div>
    <p style="position:relative; z-index:1; padding:20px;">
        オレンジの円は半分はみ出していますが、画面の外には影響しません。
    </p>
</div>

ブラウザ表示

6. フレックスボックスでの折り返し設定を忘れない

複数のパーツを横に並べる「フレックスボックス（Flexbox）」を使っているときも注意が必要です。標準の設定では、パーツをできるだけ横一列に並べようとするため、数が増えると画面を突き抜けてしまいます。これを「flex-wrap: wrap;」という命令で「入り切らなくなったら次の行に移動してね」と指示することが大切です。

パソコンの大きな画面では3つ並び、スマホの狭い画面では自動で縦に3つ並ぶ。そんな賢いレイアウトを作るためには、この「折り返し設定」が欠かせません。プログラミング未経験の方が「並べること」に集中しすぎて忘れがちなポイントですが、レスポンシブデザインにおいては命綱とも言える設定です。

7. ネガティブマージンという「はみ出し」のテクニック

少し難しいテクニックですが、デザイン上の理由であえて左右の余白を無視して画面いっぱいに広げたい時に「マイナスの数字の余白（ネガティブマージン）」を使うことがあります。例えば左右に20pxの隙間があるページで、画像だけを画面の両端ピッタリまで広げたい時などです。

しかし、この設定は計算を間違えると簡単に横溢れを引き起こします。「左に20px広げたら、右も同じだけ広げる」といった正確な調整が必要です。初心者のうちは、無理にこれを使わず、まずは「画面の中に正しく収める」練習を積み重ねましょう。基礎がしっかりできてから、こうした応用技に挑戦するのが上達への近道です。

8. 開発者ツールではみ出した犯人を特定する方法

どれだけ気をつけても横溢れが起きてしまった時、どうやって犯人を探せばよいでしょうか。答えは、ブラウザに備わっている「デベロッパーツール（検証ツール）」にあります。パソコンで自分のサイトを開き、右クリックして「検証」を選ぶと、画面の裏側を覗くことができます。

ツールの中にある「要素を選択する矢印アイコン」を使い、画面上のパーツを一つずつ触ってみてください。青い枠線が画面の右端を越えて伸びているパーツがあれば、それが横溢れの原因です。また、HTML全体を囲む「body」タグに対して「outline: 1px solid red;」といったCSSを一時的にかけると、すべてのパーツの輪郭が赤く表示され、どこがはみ出しているか一目瞭然になります。この「犯人探し」もWeb制作の醍醐味の一つです！


<style>
    /* デバッグ用：はみ出しを見つけるためのテクニック */
    /* 実際には公開前に消しますが、制作中はこのように確認します */
    .debug-check * {
        outline: 1px solid red; /* すべての要素に赤い枠をつける */
    }
</style>

<div class="debug-check">
    <div style="width: 120%;">この箱がはみ出しの犯人です！</div>
</div>

ブラウザ表示

2026年最新スキルアップ・実践セミナー