TAK

恥ずかしながら2年ほど前に未経験でこの業界に入ったときはCSSの基本のきすらよく知らなくて全く理解できなかったところなんですが、marginとpaddingの%指定は【左右だけでなく上下も】親要素の横幅を基準とした相対単位です。ですから、上下の値に%を指定しても親要素の縦幅を基準にはできません…

上下を%で指定することはあるの？と前聞かれたことがありますが、リキッドデザイン(ブラウザの横幅に応じてサイトの表示サイズを流動的に変えるデザイン)を組むときは上下の値も%で指定します。

例えば画像を黄金比でトリミングしたいって時はラッパー(<figure><img></figure>でいうfigure)にpadding-top:61.8%;を指定して、中身のimgはabsoluteで配置し、ラッパーを埋めるようにimgの横縦を調整すればどのデバイスから見ても黄金比で保つことができますね。

object-fitはとても便利なプロパティなのですが、IEは未対応なのでIEでも使えるようにobject-fit-imagesというJSプラグインを利用します。説明サイトにも載っています。個人的にはプラグインを導入してでも使いたいプロパティです。

また、marginにはpaddingと違って「相殺」と「ネガティブマージン」という2つの有名な特徴があります。相殺はサルワカさんの記事でも説明されていましたが、要素Aのmargin-bottomと、次に隣接した要素Bのmargin-topが並ぶと大きい値のmarginが優先されて小さいmarginが潰されるという事案です。

marginの相殺は左右のmarginでは発生せず、また例外的にfloatのかかった要素、親要素にoverflow:hiddenもしくはborder,paddingが加えられた要素でも上下のmarginの相殺が起こりません。こういうこともあって全体的にmarginの上下はどちらか一つに統一するというのが個人的な暗黙のルールです。

「ネガティブマージン」は値にマイナス値を指定することで余白を設けるのではなく逆に詰めるテクニックです。流行りのブロークングリッドレイアウトなんかで要素を重ねるときに使いますね。

margin-top:-64px;とretativeのtop:-64px;やtransform:translateY(-64px);の違いは64px詰めて動かすか、元あった位置を基準に要素を64px縦に移動させるかの違いです。relativeやtranslateで移動させると元々要素があるはずだった範囲に余白が空いたままになります。

ネガティブマージンのテクとして別の方がツイートしていたコンテナを突き破って要素を画面いっぱいに広げるcalc(50% - 50vw)があります。これは以前にも僕もツイートしました（https://twitter.com/tak_dcxi/status/1138821953857261568?s=20 …）

正確にはcalc((100% - 100vw) / 2)です。仕組みとしては親要素(100%)の幅から画面いっぱい(100vw)を引くと画面の端から親要素までの隙間をネガティブマージンによって引き延ばすことができるので、それを左右のマージンに適応するからcalc(100% - 100vw)を2等分してcalc(50% - 50vw)って感じです。

理屈は簡単なんですが説明が下手ですいません…。別の方のツイートには無かったので補足なのですが、画面いっぱいまでつきやぶった要素の中身はコンテナ幅で揃えたいって時は引いた数値分だけパディングで余白を作ればいいです。paddingの左右にcalc(50vw - 50%)を指定すれば完璧です。

ただこのやり方だと横スクロールバーを生み出すのでbodyなどにoverflow-x:hidden;を指定しておきましょう。 個人的には背景だけ広げたい場合には疑似要素で背景作ってabsoluteで相対配置後のwidth:100vw;left:calc(50% - 50vw);で指定しています。仕組みはleft:50%;transform:translateX(-50%);と同じ