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

生徒

「先生！CSSでレイアウトを作っているんですが、どこがずれてるのか分からなくて困っています。」

先生

「そんな時はブラウザの『開発者ツール（デベロッパーツール）』を使うと便利ですよ。」

生徒

「開発者ツール？聞いたことはありますけど、どうやって使うんですか？」

先生

「実はクリックするだけでボックスの大きさやCSSの設定を目で見て確認できるんです。初心者の方でもすぐに使えますよ！」

1. ボックスレイアウトのデバッグとは？

「デバッグ」とは、プログラムやCSSの中にある間違いや不具合を見つけて直すことを指します。CSSのボックスレイアウトのデバッグでは、ページの各要素（ボックス）の「幅（width）」「高さ（height）」「余白（margin・padding）」「境界線（border）」などを確認し、思い通りに表示されているかチェックします。

ボックスモデルというのは、HTMLの各要素がどのような大きさや位置で構成されているかを表す考え方です。ウェブページを作るうえでとても大事な基礎になります。

2. 開発者ツール（デベロッパーツール）とは？

開発者ツールとは、Google ChromeやMicrosoft Edgeなどのブラウザに最初から入っている「ウェブページを解析・編集できるツール」です。特別なアプリを入れる必要はありません。

このツールを使うと、ページ内のHTMLやCSSをその場で確認できたり、どの要素がどんなスタイルで表示されているかを一目で確認できたりします。特に、ボックスのずれや余白の確認にとても便利です。

3. 開発者ツールの起動方法

開発者ツールを開く方法はいくつかありますが、最も簡単なのは右クリックから開く方法です。

Windowsの場合： ページ上で右クリック → 「検証」または「検査」をクリック
Macの場合： controlキーを押しながらクリック → 「検証」または「検査」をクリック
ショートカットキー： F12 または Ctrl + Shift + I（Macでは Command + Option + I）

これでブラウザの右側または下側に開発者ツールのパネルが表示されます。

4. 要素を選んでボックスモデルを確認しよう

ツールが開いたら、ページ内のどの部分がどのHTML要素なのかを確認してみましょう。

ツール上部にある「矢印のアイコン（要素選択ツール）」をクリックし、ページ上の要素をクリックして選択すると、その部分のHTMLとCSSが自動的に表示されます。

右側の「Styles（スタイル）」や「Computed（計算済み）」タブを見ると、ボックスモデルが図で表示されており、margin・border・padding・contentのサイズが色分けされています。

5. 具体的にボックスのズレを確認する方法

例えば、以下のようなボックスがあるとします。実際にブラウザツールで確認してみましょう。


<style>
.box {
    width: 200px;
    height: 100px;
    background-color: lightblue;
    border: 5px solid blue;
    margin: 20px;
    padding: 10px;
}
</style>

<div class="box">サンプルボックス</div>

ブラウザ表示

開発者ツールでこのボックスを選択すると、右側にボックスモデル図が表示されます。この図を見れば、margin（外側の余白）、border（枠線）、padding（内側の余白）、content（中身の領域）のそれぞれがどれだけの大きさなのかがすぐにわかります。

6. CSSの値をその場で変更して確認しよう

開発者ツールのもうひとつの便利な機能は、「リアルタイムでCSSを変更して確認できる」ことです。

たとえば、widthやmarginの数値をツール内で書き換えると、ページ上のデザインがその場で反映されます。ファイルを保存しなくてもすぐに確認できるため、デザイン調整の練習にも最適です。

数字を増やしたり減らしたりして、ボックスの動きを目で確認してみましょう。「marginを大きくすると外側の余白が広がる」、「paddingを増やすと内側の余白が広がる」という違いもすぐに理解できます。

7. レイアウトが崩れたときの確認ポイント

ボックスがずれて見えるときは、次のポイントをチェックしてみましょう。

marginが想定より大きい → ブラウザツールでmarginの数値を確認。
paddingの設定が原因 → contentが押し出されていないかチェック。
borderの太さが影響 → 枠線の分だけサイズが広がっていないか確認。
width・heightが固定 → レスポンシブ（画面サイズに合わせる）を考えるときは注意。

これらはすべて、開発者ツールのボックスモデル表示で確認できます。

8. 要素を強調表示して重なりを確認する

開発者ツールでは、要素をクリックするとページ上に色付きの枠が表示されます。これは、実際にどの範囲がそのボックスなのかを目で確認するための表示です。

例えば、2つのボックスが重なっているように見えるとき、この機能を使えばどちらのボックスが上にあるかを簡単に判別できます。


<style>
.box1 {
    width: 150px;
    height: 100px;
    background-color: pink;
    position: relative;
    top: 20px;
    left: 30px;
}

.box2 {
    width: 150px;
    height: 100px;
    background-color: lightgreen;
    position: relative;
    top: -40px;
    left: 80px;
}
</style>

<div class="box1">ボックス1</div>
<div class="box2">ボックス2</div>

ブラウザ表示

このような場合、開発者ツールでそれぞれのボックスを選択すると、どちらが上に重なっているかが視覚的に分かります。特にレイアウトが複雑になると、この機能はとても役立ちます。