Margin を上に取るか下に取るか問題について考える

JetTheme に変えて、１つ気づいたことがある。

要素の余白が基本的に margin-bottom で設計されている！！

ブログ全体の骨組みに関してはすでに完成されてるし、余白を調整したい部分は margin-bottom の値をちょろっと変えれば良いだけなので問題ない。

カスタマイズで戸惑ったのは、微調整したい記事内の要素の余白に関して。具体的には見出し、段落、リスト、画像、囲み枠... などの余白のこと。

この記事では、Margin のカスタマイズをしながら調べたことと、自分の検討結果をまとめる。

margin-bottom での余白指定は、もっとも一般的らしい

JetTheme のデフォルトでは、記事内の見出しと引用については top と bottom に余白が設定されている（見出しの上は padding）。一方、p タグ、ul タグ、ol タグ、li タグ、pre タグについては bottom のみ。

JetTheme の導入直後は以前のブログの margin の値をとりあえず引き継いでいたが、今回、余白をちゃんと設定しようと考えて、デフォルトが bottom ということでその値を調整することから始めた。

しかし、行き詰まった。なんかうまくいかない。なんか、違う。こうじゃない。margin-bottom の値を変えるだけじゃ思い通りにならない。と思った。

ふと、そもそも margin-bottom だけで余白を設定するって一般的なことなのか？ と思って調べてみた。すると、どうやらめちゃくちゃ一般的らしい。

まったく知らない話だったが、WEB 制作業界のなかでは margin を上と下のどっちに取るかというのは定期的に起こっている論争らしく、基本上派、基本下派などのポリシーが存在しているようだ。

そして、基本下派というのは基本上派よりも多いらしい、というのが今回いろんな記事を読み漁って自分が感じた印象だ。「基本」としているのは「基本的には下につけるが、場合によっては上も使う」という姿勢を表していて、100% 上か下だけで設計するのは無理という共通理解がある。

これまで私がどう設定していたかと言うと、特にポリシーなどなく上下両方に margin をつけておくケースが多かった。段落もリストも、囲み枠も、全部そう。margin が相殺されるっていうことは知っていて、そのうえで、上下に設定しておけば何が隣り合っても必ずその margin 以上は発生するから、それで良いっていう認識でいた。

自分のブログカスタマイズではその運用でこれまで不都合はなかったが、いろんな案件を扱うプロの間では、相殺前提で上下につけると一箇所の余白に対して２つの要素の設定を確認する必要があり、わかりにくくなるという認識があるようだった。確かに、それはある。それで、基本的には上か下かのどちらかで余白を取っていく、ということになるようだ。

margin-bottom が一般的な理由

margin-bottom がよく使われる理由としては、ウェブサイトは基本的に左上から下に下にと要素が敷き詰められていくため、余白は下側に取るのが自然、ということがあるようだった。
※その他にもいろんな意見あり

また、margin-top に統一すると一番上にいきなり余白が生じるから不自然ということがあるようだ。
※他にもいろんな意見あり

いろんな意見を読んだが、どれも納得できるものだ。

ちなみに、現在はどちら派でも :first-child や :last-child を使えば一番上・一番下の要素だけ余白を消せると考えて良いと思う。IE 8 では :last-child が非対応だったため、IE 8 対応が主流だった頃は margin-top を使って :first-child で消すという方法が有効だったようだ。（:first-child なら IE 8 も対応）

自分は、margin-top 派であることに気づいた

で。いろいろ調べて、margin は基本下派が多いらしいということや、各ポリシーの主張、その理由を理解した。

そのうえで、記事内要素の余白に関しては top を基本に指定してみた。前述のとおり bottom の指定でやりにくさを感じていたからだ。

結果、自分は margin-top のほうが使いやすいということに気づいた。え、こっちの方が思い通りになるじゃん！ と。基本上派で、たまに下も使う、というのが一番しっくりする形にできた。むやみに上下に指定するのはやめた。

margin-top が使いやすい理由

どうして margin-top のほうが使いやすく感じるんだろう。感覚人間なので、言語化が難しい。たぶん、記事本文内ではどの要素がどういう順番で並ぶかが不確定であることに関係があると思う。要素 A と要素 B が縦に並ぶとき、その間の余白は上にある A じゃなく下に来る B の性質によって決めたい。

また今回調べる中で知ったけど、margin-top を基本にしてると隣接セレクタを活用できるのが便利だと感じた。特定の要素、クラスが隣接したときだけ反映されるっていう指定方法で、基本は要素 B を margin-top:1rem とするけど、A と B が並んだときだけ B を margin-top:2rem にする、みたいな指定が可能になる。

これは margin-bottom だとできない。

隣接セレクタは、li タグの余白を調整するときなどにも使えるようで、li + li ｛margin-top:.5rem｝のようにすると、li と li の間だけ余白が設定される。:first-child や :last-child で最初や最後の余白を打ち消す必要がない。

margin-bottom を使いたいとき

こうして基本上派になったわけだが、margin-bottom を使いたいときもある。

今回実施した余白カスタマイズの中で言うと、たとえば「装飾を施している囲み枠の中の p タグ や li タグ」に関しては margin-bottom を採用し、最後の余白だけ :last-child で消した。

なぜそんな混ぜこぜにしたのか。感覚的にそうしたかったので、聞かれると困るんだけど、でもたぶんこういうことだと思う。

まぁ違和感を感じるのは CSS を書くときだけで、一度指定してしまえばあとはそんなこと意識することもないだろうから、時間が経ったらなんでこんな指定にしたんだろ？ って思ってしまうかもしれない。

隣接セレクタを使っても良かったんだけど、margin-bottom のほうが個人的にわかりやすかったので今回はそうした。

他には、画像の下には次の要素に関わらず少し余白を多めに取りたかったので margin-bottom を設定した。このくらいだろうか。

さいごに

別に WEB 制作を仕事にしてるわけではないし、自分のブログをカスタマイズするっていうだけで margin 上派や下派を決める必要はないと思うし、別に混ぜこぜにしてたって上下に設定してたって見た目が大丈夫であれば、自分がよければそれで問題ないわけだから、そんなに大げさに考えなくて良いとも思う。今回は、いろいろ調べて自分の中でなるほど〜と思うことが多かったのでこうして記事にしてみた。

今回の余白カスタマイズの前後で見た目はほとんど変わっておらず自己満足的な部分もおおいにあるが、とりあえず上を基本としたことでこれまで相殺されていたような不要な margin の指定は減ったし、シンプルに上だけ考えれば良いっていう思考になって設定がしやすくなったと思う。

おわり。

Twitter・Instagram の埋め込みが重いのは万能な遅延読み込みで解決

Twitter や Instagram の投稿をフツーに記事に埋め込むと、ページの表示速度が遅くなります。この記事では、スクロールに依存しない遅延読み込み方法を紹介します。

www.limosuki.com