余白はいつ生まれるのか

ABOUTこの記事をかいた人

フロントエンドエンジニア。

はい。今回はタイトルの通り余白が生まれるタイミングは一体いつなのかを考えていきます。

これを理解すれば、marginとpaddingのどっちを使うのが正しいか、あるいは他の方法を使うべきかを判断する基準を持つことができると思います。

より質の高いコーダーになりたいという方はぜひ一緒に考えていきましょう。

余白は、レイアウトをするときに初めて生まれる

例えばこんなサイトがあったとします。

このサイトから、パーツと思われるものを取り出してみましょう。

ヘッダー

ファーストビュー

カード

サイドバー

フッター

おそらくこの5パーツが思い浮かぶかと思います。

この時点でお気づきかと思いますが、余白が消滅しています。

サイトのレイアウト時にあった各種余白は、パーツにバラした瞬間どこかに行っているはずです。上下左右に余白がある状態でパーツとみなすことはないですよね。

逆に、パーツを単純に敷き詰めると余白は無い状態で配置することになります。

このような配置のサイトは現実的にはあまり無いですよね。やはりレイアウト時に余白が生まれていると言えそうです。

コードとしてどう表現するか

まず、大前提として「使い回しが発生するパーツでなければそこまで気にしない」という風に僕は考えています。上記の例で言えば、カード以外はページ内で1回しか使っていません。その場合は普通にmarginでパーツ間の余白を指定すれば良いでしょう。

一方カードはそうもいきません。例えばカードにmargin-leftを付けると全要素に左方向の余白がつくわけですから、見た目が崩れます。

カード間の余白をつけようとしたら、このように左に余計な余白が生まれてしまいましたね。

だからこそ「偶数番目のみmargin-leftをつける」という形でnth-childなどの擬似セレクタを使う例がよく見られるわけですが、正直コードが煩雑になりあまり良い方法ではないです。今ならもっと良い方法があります。

可能な限り親要素側で余白を定義する

余白がいつ生まれるかを考えると、そもそもパーツ自身に外側の余白を持たせること自体があまり良くなさそうです。

ではどこで余白を定義するのが良いでしょうか。パーツを内包する親要素がレイアウトを行なっている、と考えてみましょう。

例えば次のようなレイアウトを行うとします。

flexないしはgridレイアウトを使っていれば、column-gap/row-gapというプロパティが使えます。

横方向の余白はcolumn-gap、縦方向の余白はrow-gapで指定します。

HTML

gridの場合のスタイル

flexの場合のスタイル

このように、要素間の余白を親要素側が決めていますね。このような形であれば、.Container-Itemの方にnth-childで一部にのみ余白をつけたりする必要がありません。

また、このようなリスト表示でも応用できます。

これはマクドナルド公式サイト(https://www.mcdonalds.co.jp/)の新着情報のセクションです。

flexは縦方向のレイアウトも可能ですし、gridなら1列5行のgridと考えれば良いです。

親要素に以下のようなCSSの指定をするイメージです。

flexの場合

gridの場合

このようにすれば、ほとんどのレイアウトにおいて親要素から余白を定義することができます。

こうしておくことで、仮に子要素のクラスを複数の場所で使いたい時に余白が邪魔で困ることはありません。

ただし、この方法は各要素の余白が一定の場合のみ使えます。要素間の余白が全部一緒でない場合は他の方法を考えることになります。

dispaly: flexについてもっと詳しく知りたい方はこちらをご覧ください。

display、全部flexでいい説

2022年6月6日

余白に関することは一切ユーティリティクラスに追いやる

これは僕もまだ検討段階の話なので、どの程度やるべきかは議論の余地があると思います。

具体的に何をやるかというと、「余白に関する情報は余白に関することのみを書いたクラス(=ユーティリティクラス)をつけることで対応する」ということです。

例えば次のようなコードを書くことになります。

このように余白はパーツのクラスとは完全に別のものにし、レイアウトを行うタイミングで余白を決めるような書き方です。これであればより自由にレイアウトを行え、かつパーツの見た目に影響しない形が実現できます。

一方見た目、レイアウトに関する情報が別のところに記述されることになるので見通しは少々悪くなりそうです。使いすぎは良くなさそうですね。

ただ前提でお伝えした通り「使い回しが発生するパーツでなければそこまで気にしない」という方針なのでこれが必要になる場面自体はあまり多くないと思われます。

まとめ

というわけで余白はいつ生まれるのか、ひいては余白をどうコードで扱うべきかを考えてみました。

レイアウト時に余白が発生するということと、パーツの中に余白などの外部の情報を含めるのはまずいということはかなり正しいかなと考えています。

また、もっと言えば余白の扱いに関してはデザイナーさんと協力して構築した方が良いでしょう。そもそも余白を統一したほうがコード上では質が上がるということを知らない方もいます。

逆にその上で余白をずらしたデザインが良いと判断されることもあります。

プロジェクトごとに何を持って良しとするかは微妙に変わってきます。「何が正解かを覚える」というより、そういう目線を持って取り組むということが一番大切です。

margin: auto;の正体を暴く

2019年9月9日

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください