Firefoxを使ってWebページのデザインを探る

Firefoxを使いWebページを開いた状態でF12を押すとWeb開発ツールが出てくる

ツール内のインスペクタを開き下のソース部にマウスを乗せると記述に対応している箇所がブラウザ部に色付きの範囲として描写される

また、ツールの右側のボックスモデルを見れば範囲のマージン等を視覚的に捉えやすい

これを用いればソースを大量に読み解かなくとも比較的楽にデザインの把握が可能になる