ブラウザでコードを覗く「デベロッパーツール」

ツールの起動方法

まずは、調査したいWebページをChromeで開き、以下のいずれかの操作を行います。

右クリックから： ページ上の調べたい場所で「検証」を選択。
ショートカット： F12 キー（または Ctrl + Shift + I）を押す。

主要な3つの機能

① Elements（要素） HTMLの構造を確認できます。タグを選択すると、その部分がブラウザ上で青くハイライトされます。

② Styles（スタイル）選択した要素に当たっているCSSを確認・編集できます。数値を書き換えて「お試し」のデザイン変更も可能です。

③ Device Mode（スマホ表示）画面左上のスマホ型アイコンを押すと、iPhoneやPixelなどの画面サイズで表示をシミュレートできます。

ここが便利！「ライブ編集」

デベロッパーツール上での変更は、元のファイルには保存されません。 だからこそ、安心して以下のような「実験」ができます。

文字の色を red に変えてみて、雰囲気がどう変わるか試す。
不要な <div> を Delete キーで消して、レイアウト崩れの原因を探す。
フォントサイズを 1px ずつ増やして、最適な読みやすさを探る。

.main-title {
color: #ffcc00;
font-size: 24px;
}

コーダーの必須テクニック：ボックスモデルの確認 Stylesパネルの下の方にある「四角い図形（ボックスモデル）」を見ると、その要素の margin / border / padding の実数値がひと目で分かります。「なぜか隙間が空く」というトラブルの9割はここで解決します。

まとめ

デベロッパーツールは、Webサイトの「カンニングペーパー」であり「実験室」です。他人のサイトを見て「このフォントは何だろう？」「どうやって横並びにしているんだろう？」と疑問に思ったら、すぐに右クリックして「検証」してみましょう。