ページは箱の重なりでできている

Elements パネルには、見ているページの設計図が表示されます。難しそうな記号の群れに見えますが、要は「箱の中に箱がある」構造です。三角の矢印を押すと中身が開き、閉じれば隠れます。すべてを読む必要はありません。

選択ツールが主役

左上の矢印アイコン（選択ツール）を押してからページ上の要素にマウスを乗せると、それが HTML のどこに当たるのかが即座にハイライトされます。「このボタンのこと」を正確に指すための一番早い方法です。

文言を試す

テキスト部分をダブルクリックすると、その場で書き換えられます。「この見出しをこう変えたい」を口で説明する代わりに、実際の画面で差し替えてスクリーンショットを撮る。これだけで提案の伝わり方が変わります。長い商品名を入れてレイアウトが崩れないか確かめる、といった使い方もできます。

変更は保存されない

ここでの書き換えは自分の画面だけのもので、再読み込みで消えます。だから安心して試せる一方で、「直しておいた」にはならないことだけは覚えておいてください。

• HTMLは「入れ子の箱」として読む
• 選択ツールで見たい箇所を指す
• 文言をその場で書き換えて確かめる