MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

ボックスモデルの調査と編集

ボックスモデルの確認

要素選択ボタン を押しているとき、ページ上で要素にマウスポインターを載せると、要素の ボックスモデル をオーバーレイで表示します:

HTML ペインで要素のマークアップにマウスポインターを載せた場合も、同様にオーバーレイで表示します:

要素がインライン要素であり複数の行ボックスに分かれている場合は、要素を構成するそれぞれの行ボックスをハイライト表示します:

ボックスモデルビュー

要素を選択すると、ボックスモデルビュー でボックスモデルを詳しく調べることができます:

値にマウスポインターを載せると、その値がどのルールに由来するかを示すツールチップを表示します:

ボックスモデルビューでボックスモデルの一部にマウスポインターを載せると、ページ上で対応する部分をハイライト表示します:

ボックスモデルの編集

ボックスモデルビュー では値の編集も可能であり、変更結果はページへ即座に反映します:

ドキュメントのタグと貢献者

タグ: 
 このページの貢献者: yyss, jsx
 最終更新者: yyss,