Magical Margin Tips

今回はMarginの特徴を上手く理解し、
活用するためのテクニックをお伝えしたいと思います

【Ice Break 】 Margin と Paddingの違いついて

これ、CSS触る人は大抵ぶつかる問題ですね
おそらく数年前の私もぶつかってたと思います
MarginとPaddingを間違って使用してしまうと
レイアウトが恐ろしいことになってしまったり

そんなハードルの高さを払拭するために
最近某知事が【Social Distance】を良く連発されていますので、
それに例えようと思います

私達の間にはパーソナルスペースという
他人に近付かれると不快に感じる空間が存在しています。

※参考サイト

パーソナルスペースで例えるならば、
Marginが社会距離でPaddingが個体距離にあたります。
つまり【Social Distance】というのは
CSSでいうならば【Margin】を空けろということになります

......っていう話をさっき思いついたので適当に書いてみました

真面目に説明すると、
Paddingは私の領域、Marginは私とあなたの距離感なんですね。
もしくはPaddingは内側、Marginは外側
お隣さんでMarginが干渉し合うのは、個々に付けられると思っていても、
お互いの空間を共有し合う事があるからでしょうか......

という独特のCSS ruleが存在しますので、Margin不慣れな方は
【one way(単一方向) Margin】を心がけるようにしましょう
(上につけるなら他のお隣さんも上だけ、下につけるなら他のお隣さんも下だけ)

Margin Tips

さて本題ですが、今回はMarginの特徴を上手く理解し、
活用するためのテクニックをお伝えしたいと思います

Marginの特性を理解し、上手く活用できるようになれば
あなたも一人前のCSS使いと言えるでしょう

1. Negative Margin

知ってるか......Marginって負の値も使えるんだぜ......

っていうのがNegative Marginです。
Marginに負の値を入れることによって、
正の値を入れたときと逆に要素を動かすことができます。

こういうスマホサイトのデザインに遭遇したとします。

写真以外はみんなコンテンツ幅の中に収まっているのがわかるでしょうか？

わかりやすいように線を引いてみました。

ビジュアルをダイナミックに見せるため、写真をコンテンツ幅からはみ出させる手法は
ウェブデザインでよく遭遇することがあります。
こういうデザインをコーディングする場合、写真以外の要素にそれぞれコンテンツ幅用の余白を入れていては少し面倒ですよね
CSSの行数もかさんでしまいます。
できるなら親に一回入れるだけで済ましたい......

そんなあなたにおすすめなのがNegative Marginです
こんなふうに書けば......

/* 親 */.parent{padding-left:10px;padding-right:10px;}/* コンテンツ幅を無視したい要素 */.visual{margin-left:-10px;margin-right:-10px;}

写真だけはコンテンツ幅を無視し、
他の子要素はきっちりコンテンツ幅の中に収めることができます。
イレギュラーな要素がある際におすすめな手法です

※コンテンツ幅の余白などの数値は、他のページで使用する可能性が高いので
変数に入れて使うようにしたほうが分かりやすいですヨ

他にも

隣人が前の要素に食い込むような
オシャレなデザインにも活用することができますよ
(この場合はお知らせ部分のmargin-topにNegative Margin)

2. Marginの相殺

お隣さん同士の社会距離がぶつかりあった瞬間......そこで戦いが生まれます......
勝ち残れるのは、より多くの距離(Margin)を積んだ者だけ......

っていうのがMarginの相殺です

突然ですが、問題です
お隣さん同士のブロック要素(Aさん、Bさん)がお互いmarginを積んだとします。
Aさんはmargin-bottomに20px, Bさんはmargin-topに30px積みました。
さて二人の距離はどれくらい空くでしょうか？

正解は30pxです。50pxにはならないので注意です
(ちなみにborderを引いておくと戦闘回避することもできます )

詳しくはこちらの説明が分かりやすいです
https://coliss.com/articles/build-websites/operation/css/about-collapsing-margins.html

さて、このMarginの相殺ですが、一体何の役に立つのかと思う方もいるでしょう。

実はこの相殺、どの要素が入るかわからない場合に使うととても便利なんです
CMS(ContentManageSystem)を使用する際に役立つことがあります。

WordPressやWiki投稿サイトなどでは、投稿者が自由に要素を組むことができます。
その際にすべての要素にそれぞれmargin-top, margin-bottomを入れておけば、
多い方の余白が相互の距離感を踏襲するので、
いちいち要素感の距離を計算して指定する必要がなくなります

h2{/* pの後にh2が来たときは相互間の余白は20pxに統合 */margin-top:20px;margin-bottom:10px;}p{margin-top:10px;margin-bottom:10px;}

そういったサイトをコーディングする際は、
是非Marginの相殺テクニックを使用してみてください！

3. おまけの応用編(疑似要素 × Negative Margin)

デザインデータを貰って、

さぁCSS書くぞー！

......あれ？
測ったとおりに数値を入れたのになんか要素間の余白めっちゃ空いてない......？
といった経験はないでしょうか？

ピンとこない方は、
下記例を御覧くださいまし

Marginの無い状態での要素間の挙動

理想

現実

おわかりいただけただろうか......

marginを指定していないにもかかわらず要素間に微妙な空きが開いてしまっています。

原因はline-height(行間)があるからかもしれません......

これではデザインデータの余白を正しく測ることもできず、
デザインの精度が落ちてしまう事態に.....

そこで下記の記事で使用するテクニックがとてもわかりやすく、
役に立つので紹介します

https://yuyakinoshita.com/blog/2020/01/20/line-height-crop/

記事に記載のある通り、見出しに擬似要素を使用する場合は
上手くline-heightを削ることができないどころか、
装飾に悪影響を及ぼす可能性もあるので注意が必要です
段落パーツで使用すると、測った通りの余白でデザインの再現ができるので
一石二鳥なテクニックですよ
疑似要素を使い出したCSSユーザーにはぜひ実践してほしいテクニックです！

以上がMarginを使いこなすための技でした

少しでもMarginの特性を理解していただけたら幸いです