ちょっと良いUIおれおれAdvent Calendar 2024 – 15日目

複数の要素を配列するとき、要素間の余白が必要です。それをどう管理するか。gap がおすすめです。

デモ：

親側で子の間隔を決める

かつては margin が基本的には唯一の選択肢でした。重複の打ち消しもありまあまあ便利ではありましたが、いくつかの問題もありました。例えば各要素（コンポーネント）が余白を持つため、レイアウト全体として統一することが困難であったという点です。再利用性が下がります。

Every Layout の Stack というパターンでは、要素ごとではなく親要素から各子要素間の余白を決定しています。現代では gap で実現できるでしょう。

/* 現代では使わない */
.stack > * + * {
  margin-block-start: 1.5rem;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

子要素自体は余白を持ちません。外余白をコンポーネントが持つと再利用が制限されてしまうので、親に持たせるこのやり方の方が良いですね。

入れ子にしても良い

大きな括りでは大きな余白にして、その中に小さな括りを複数持つようにすると管理が良い感じです。見出しの上部に大きめの余白ができるので。

親がいないときは margin で

Markdown から HTML を出力する場合は節ごとに括るという構造にはなりません。

こういうときは margin ですね。例えば今お読みの「ブログ記事本文」であればコンポーネントの再利用もそんなに重要ではなさそうだし。

おしまい

これもう手癖でやってるパターンなんですけど浸透してるんでしょうか。

参考