CSS変数で柔軟なマージン設定を実現しよう

要素（またはコンポーネント）自体にはマージンを持たせたくないですよね。要素が自身にマージンを持っていると他の場所で再利用した際に予期しない余白が生じレイアウトの調整が難しくなるからです。

しかし、状況に応じて各要素に異なるマージンを適用したい場合も多くあります。
この記事では要素自体にマージンを持たせず柔軟にマージンを設定する方法をご紹介します。

フクロウセレクタを使った基本的なマージン設定

フクロウセレクタ* + *を使用して、兄弟要素間のマージンを統一的に管理します。

* + * {
  margin-top: var(--_spacer, 50px);
}

• * + *は任意の要素の直後に続く任意の要素を選択します。これにより最初の要素以外にマージンを適用します。
• margin-top: var(--_spacer, 0);はCSS変数--_spacerが指定されていればその値をなければデフォルトの30pxを適用します。
  この設定により要素自体にはマージンを持たせず必要に応じて親要素や特定のコンテキストからマージンを指定できます。

要素ごとのマージンを指定

各要素で--_spacerを定義することでその要素に対して個別にマージンを調整できます。

h3 {
  --_spacer: 20px;
}
p {
  --_spacer: 10px;
}

例

フクロウセレクタを指定します。今回は<article>要素の直下の要素のみに適用されるようにします。

css

article > * + * {
  margin-top: var(--_spacer, 50px);
}
:where(p, h3){
  margin: 0;
}
p {
  --_spacer: 10px;
}
h3 {
  --_spacer: 20px;
}

このスタイルでは、<article>要素直下の要素にはmargin-topが適用されますが、<blockquote>要素内の要素には適用されません。

html

<article>
  <h2>大見出し1</h2>
  <p>これは段落1です</p>        <!--10px のマージンが適用 -->
  <p>これは段落2です</p>
  <h3>小見出し1</h3>           <!--20px のマージンが適用 -->
  <blockquote>
    <p>これは引用の段落1です</p>
    <p>これは引用の段落2です</p>  <!-- 0px のマージンが適用 -->
  </blockquote>
  <h2>大見出し2</h2>           <!--50px のマージンが適用 -->
</article>

この方法のメリット

• 要素自体にマージンを持たせない：再利用時に余計なマージンが適用されるのを防ぎます。
• 柔軟性の向上：親要素からの指定があるときだけマージンが適用されるためレイアウトの調整が容易になります。
• 一貫性のあるマージン管理：フクロウセレクタとCSS変数を組み合わせることでスタイルシートが整理されメンテナンス性が向上します。

まとめ

フクロウセレクタとCSS変数を組み合わせることで要素自体にマージンを持たせずに柔軟かつ一貫性のあるマージン管理が可能になります。

余談

フクロウセレクタと合わせて兄弟要素への指定を組み合わせることでより柔軟で強力な効果を発揮します。

h2 + * {
  --_sapcer: 10px;
}