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

生徒

「Bootstrapでレイアウトを作ったら、横にはみ出したり、列がギュウギュウになるんですが、これって普通なんですか？」

先生

「よくありますよ。特にコンテナや行、列のルールを知らないと起きやすいです。」

生徒

「パソコンもあまり触ったことがなくて、何が原因かわからなくて困っています…」

先生

「大丈夫です。今日は、列間の詰まりや横にはみ出すトラブルを、順番に確認する方法を説明します。」

1. Bootstrapのレイアウトでよく起きるトラブルとは

Bootstrapのコンテナとレイアウトでは、画面の横幅に合わせて自動で配置が整います。しかし、初心者の方が最初につまずきやすいのが、横にスクロールが出る「はみ出し」や、列と列の間が狭くなる「詰まり」です。これは、部屋に家具を置くときに、通路を考えずに並べてしまう状態と似ています。

Bootstrapでは、container、row、colという決まった箱を正しい順番で使うことが大切です。この順番が崩れると、見た目が一気に崩れてしまいます。

2. はみ出しの原因になりやすいoverflowとは

overflowとは、「中身が箱からはみ出したときにどうするか」という考え方です。箱より大きな荷物を無理やり入れると、外にはみ出しますよね。Webページでも同じで、横幅より大きな要素があると画面外にはみ出します。

Bootstrapのレイアウトトラブルでは、このoverflowが見えない形で起きていることが多く、まずは「どこがはみ出しているのか」を確認することが重要です。

3. containerとrowの基本ルールを再確認しよう

Bootstrapでは、必ずcontainerの中にrow、その中にcolを入れます。これはお弁当箱と仕切りの関係に似ています。大きな箱がcontainer、中の仕切りがrow、仕切りの中のおかずがcolです。


<div class="container">
    <div class="row">
        <div class="col">
            コンテンツ
        </div>
    </div>
</div>

ブラウザ表示

rowの外にcolを置いたり、containerを省略すると、列間が詰まったり、画面からはみ出す原因になります。

4. デバッグの第一歩は背景色を付けて確認すること

デバッグとは、どこが問題かを探す作業です。初心者の方には、箱ごとに色を付けて確認する方法がおすすめです。これは、段ボール箱に色テープを貼って、中身の位置を確認するようなイメージです。


<style>
    .container {
        background-color: #e3f2fd;
    }
    .row {
        background-color: #bbdefb;
    }
    .col {
        background-color: #90caf9;
    }
</style>

<div class="container">
    <div class="row">
        <div class="col">左</div>
        <div class="col">右</div>
    </div>
</div>

ブラウザ表示

色を付けることで、どの箱が画面からはみ出しているかが一目で分かります。

5. 横スクロールが出たときの確認ポイント

横にスクロールバーが出る場合、ほぼ確実にどこかが横幅を超えています。初心者の方は、画像や長い文字が原因になっていることが多いです。特に、画像はサイズを指定しないと大きくなりすぎることがあります。


<div class="container">
    <div class="row">
        <div class="col">
            <img src="/img/sample150-100.jpg" class="img-fluid">
        </div>
    </div>
</div>

ブラウザ表示

img-fluidを使うことで、画像がcontainerの幅に収まり、はみ出しを防ぐことができます。

6. 列間の詰まりは余白の考え方を理解する

列と列の間が狭いと感じる場合、それは余白が足りていない状態です。Bootstrapでは、あらかじめ余白が設定されていますが、独自にスタイルを追加すると消えてしまうことがあります。

人が並んで立つとき、間隔を空けないと窮屈ですよね。それと同じで、列にも適度な間隔が必要です。

7. overflowを使った応急処置の考え方

どうしても原因がすぐ分からない場合、一時的にoverflowを使ってはみ出しを隠すこともあります。ただし、これは根本的な解決ではありません。


<style>
    body {
        overflow-x: hidden;
    }
</style>

<div class="container">
    <div class="row">
        <div class="col">コンテンツ</div>
    </div>
</div>

ブラウザ表示

overflow-xを隠すと横スクロールは消えますが、原因は必ず別にあります。必ずcontainerとrowの構造を見直しましょう。