気付くと「gap」を多用するようになっていました

こんにちは。かずです。

記事とは少し関係ないのですが、最近思うことがあります。
AIにコーディングをさせる事が増えてきた昨今ですが、メンテナンス性を考えると、やはり人が書いたコードの方が読みやすいと感じることも多いなと感じます。
ですが、メンテナンスまで任せっきりにするのはまだ少し怖いなーと思う今日このごろです。

とまあ小難しいことはさておき、今回はCSSの話です。

自分の中で、昔より明らかに使う機会が増えたプロパティがあります。

それは「gap」です。

少し前までは余白といえば「margin」が当たり前でした。
でも最近は、新しくレイアウトを組むときは「gap」を使うことがかなり増えました。

今回は、それを自然と多用するようになった理由を書いてみます。

余白といえば「margin」

以前は要素同士の余白も、とりあえずマージンを付けることがほとんどでした。
むしろそれしかなかったと言っても過言ではありません。

要素を横に並べるなら、「margin-right」をつけ、右端になる要素には「margin-right: 0;」で打ち消す。
数が増えて折り返しが発生するレイアウトなら「nth-child」を使って調整することが主流でした。

もちろん今でも問題なく使えますが、あとから修正すると少し分かりづらくなることもあります。
行に表示する要素の数が変わったりすることもありますしね。

要素同士の余白が判別しやすくなる

「gap」のいいところは、役割がとてもシンプルなことです。
例えば以下の感じです。

.box{
  display: flex;
  gap: 25px;
}

これだけで、「子要素同士の間隔」が決まります。
CSSを見返したときも、「あ、このレイアウトは25px間隔なんだな」とすぐに分かります。
余白の意味がコードから読み取りやすいのも、使いやすい理由の一つです。

似たような形で自分は以下をものすっごく愛用しています。

.box{
  display: flex;
  flex-direction: column;
  gap: 25px;
}

これだけで、子要素がどんな数になっても縦方向の間隔が一定に保たれます。
marginで間隔をつけると、margin-bottomを使い、最後の要素にだけmargin-bottom:0をつける必要がありますが、「gap」なら必要ないのでコードもシンプルでお気に入りです。

要素が増えても減っても気にならない

実務では、要素数が変わることはよくあります。
例えば、WordPressの記事一覧や、お知らせ、商品一覧などなど・・・

投稿数が増えたり減ったりしても、「gap」なら特別な調整をほぼ考えなくて済みます。
親要素のプロパティだけで管理するので、どのスタッフが見てもどこを調整すればいいかわかりやすいのもメリットです。

marginはもちろん必要

もちろん、「margin」が不要になったわけではありません。

セクション同士の間隔や、コンポーネント同士の距離、外側との余白といった
いわゆる外に向けた余白は、今でも「margin」がしっくりきます。

逆に、要素同士の間隔は「gap」。
そんな使い分けが、自分の中ではかなり定着してきました。

まとめ

gap は決して派手なプロパティではありません。
でも、実際に使うほど便利さを実感しています。
コードも読みやすくなりますし、要素数が変わっても崩れにくい。

小さな変化ですが、こういう積み重ねが、少しずつコーディングのしやすさにつながっている気がします。

それでは！