HTMLが複雑になってきたらCSSで外枠をつけてみましょう

ウェブページ制作のTIPSです。

HTMLが入れ子構造で複雑になってきた場合は、要素にアウトラインをつけて、要素の形を可視化するとわかりやすくなります。

CSSですべての要素にoutline: dashed;を指定するだけです。

すべての要素を表すセレクタは、アスタリスク（*）です。

* {
    outline: dashed;
}

サンプルコード

See the Pen
Untitled by MacLove (@maclove1)
on CodePen.