ハシウェブ

Web制作、プログラミングに関する情報を発信するブログ

【CSS】marginの効率的な使い方【コーディング】

【CSS】marginの効率的な使い方【コーディング】
目次
  1. marginは自分なりのルールをつくって運用するといい
  2. marginの使い方ルール
    1. できるかぎりmargin-bottomだけを使う
    2. margin-bottomは一番下には使用しない
    3. marginは入れ子構造のいちばん外で使う
  3. まとめ

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を打ち消すことができますが、あまりおすすめしません。

See the Pen XWbGxJp by hashi84 (@hashi84) on CodePen.

疑似要素:notを使えば、打ち消しをすることなく最後にmargin-bottomを無くすことができます。
:notはmarginに限らず結構使い勝手がいいです。

See the Pen BaNbOxq by hashi84 (@hashi84) on CodePen.

さらに親要素にclassを付与することで、別のところにも使いまわすことができます。

See the Pen vYOPVOa by hashi84 (@hashi84) on CodePen.

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についても、どうやったら効率的になるか、要素がなくなったとき、要素が増えたときにも困らない書き方をすると、よりよいコーディングができるのではないかと思います。