Zenn
😈

初心者向け: CSS開発をちょっとやりやすくする*{outline:1px solid pink;}

2020/09/17に公開
CSS
HTML
初心者
tech

とっても初歩的なCSS開発のお話をしたいと思いま〜す🙋‍♀️

CSSはhtmlのブロックレベル要素とインライン要素の理解が不可欠

html要素がブロックレベルなのかインラインなのか。CSSではこれを把握しておく必要があります。
　
ブロックレベルとインラインのhtmlの違いを簡単にいうと、

  • ブロックレベル要素は divやp などの、そのままで幅100%になるもの。デフォのCSSはdiplsay: block;
  • インライン要素は aやspanやimg などの、幅が内容のサイズによるもの。デフォのCSSはdiplsay: inline;

という理解でいいと思います（tableはブロックレベルですがまた特殊）
あ、display: inline-block;という inlineとblockの間の子みたいなのもいますネ。
それにブロック要素の中にはインライン要素しかおいたらダメというルールもあります。
　
で、これらがどう画面に積み重ねられていくかを（床からでなく天井からですが）テトリスのように認識しながら書くと、非常にスムーズに、無駄なコードもなく書けるようになります。（私見です）

*{outline:1px solid pink;}

これは魔法の呪文です。
私はこれをCSSの先頭によく書きます。
これを書くことで、html要素がどこにどう居るか、全要素にピンクの枠線がついて考えやすくなります。（別にピンクじゃなくていいんですけど）

* は全称セレクタと言って、そのCSSが当たってる全てのhtml要素を意味します。
outline というCSSプロパティは、border みたいなモンですが、borderと違って幅をとりません [1]。なので、outlineを当ててもレイアウト崩れがおきず、非常に便利です。。

この魔法の呪文をページに当てるとこの通り。

いや〜綺麗なCSSですね！

応用編

他にも

.hogehoge, .hogehoge *{
	outline: 1px solid skyblue;
}

みたいに要素を絞り込むのも良いですし（よくやります）、
インライン要素とブロックレベル要素の違いを覚え中…なんて人は

/* ブロックレベル要素はピンク */
address,blockquote,div,dl,fieldset,form,h1,h2,h3,h4,h5,h6,header,hr,li,main,ol,p,pre,table,ul,button{
	outline: 1px solid pink;
}

/* インライン要素は水色 */
a,b,br,cite,code,em,i,img,input,label,select,small,span,strong,sub,sup,textarea{
	outline: 2px solid skyblue;
}

なんてのも良いと思います。⬇️こんな感じになりますネ。
覚えなくていーです。コピペコピペ。

今回の参考記事はこちら（英語）

脚注

  1. 幅400pxの要素に outline: 1px すると、400pxのまま。
    幅400pxの要素に border: 1px すると、402pxになります。（400pxにする方法もあるけど置いといて） ↩︎

Discussion