- 目次
marginは自分なりのルールをつくって運用するといい
- できるかぎりmargin-bottomだけ使う
- margin-bottomは一番下には使用しない
- marginは入れ子構造のいちばん外で使う
cssは少し勉強すれば誰でも簡単に使えますが､簡単であるがゆえに何のルールもなく自由に書いていくと変更等に対応することが難しくなります｡
複数人でのコーディング､大規模サイトのコーディングだと､特に一定のコーディングガイドラインをつくることが重要になります｡
marginの使い方ルール
できるかぎりmargin-bottomだけを使う
margin-tpoとmargin-bottomがかさなるとmarginの値が相殺されるので､実際の値がいくつなのかわかりにくくなります｡
See the Pen margin-top margin-bottom by hashi84 (@hashi84) on CodePen.
margin-bottomは一番下には使用しない
単純に連続する要素にmargin-bottomを使用すると最後のmargin-bottomが余分になることがよくあります｡
classを指定したり､last-childで打ち消したりすることが多いと思いますが､個人的には疑似要素:notを使って一つのcssで書いてしまいます｡
疑似要素:last-childを使って最後のmargin-bottomを打ち消すことができますが､あまりおすすめしません｡
疑似要素:notを使えば､打ち消しをすることなく最後にmargin-bottomを無くすことができます｡
:notはmarginに限らず結構使い勝手がいいです｡
scssのmixinを使ってclassをいくつかつくっておけば､簡単に間隔を簡単に変更することができます｡
See the Pen margin-bottom scss by hashi84 (@hashi84) on CodePen.
marginは入れ子構造のいちばん外で使う
入れ子の内側にたまたまあるmargin-bottomで隙間ができているのそれでいいのかもしれませんが､ulの下にもっと隙間を空けたいと思ったときにどこにmargin-bottomを使っていいのかわかりにくくなります｡
See the Pen margin 入れ子 by hashi84 (@hashi84) on CodePen.
最初はひと手間増える書き方ですが､外側にmargin-bottomを指定したほうがわかりやすく､修正もしやすいです｡
See the Pen margin 入れ子2 by hashi84 (@hashi84) on CodePen.
まとめ
とにかく､cssはあまり深く考えなくてもできてしまうので､自分なりのルールをつくることで効率よくコーディングすることができます｡
marginについても､どうやったら効率的になるか､要素がなくなったとき､要素が増えたときにも困らない書き方をすると､よりよいコーディングができるのではないかと思います｡
