パターンの先頭のクラスにwidth:100%; と書くと、特定の条件(※)で右端に3remの余白ができます。これを避けるにはそもそもwidthを書かないか、autoにします。
※特定の条件
- ブロックタイプ「グループ」で、幅は「全幅」
- ブロックはすべて box-sizing:border-box;
- TT4の時の話なので他のテーマでは違うかもしれません。試してません。すいません。
- そもそも、セクションのトップに縦横を書くものではない、という意見もあるかと思いますが、過去に深手を負い、傷が癒えるまでは書きたい人もいるとお考え下さい。あと、意地になって100svwなどと書くとfirefoxは無事ですが、chrome系は横スクロールーバーが出てしまいます。100svwは縦スクロールバーの幅を除外していないようです。
以下実例です。
画像
このパターンのcss(検証用にざっくり作ったのでお見苦しいところはご容赦ください💦)
/* ↓ここ */
.lp-campaign { width: 100%; height: 50svh; background: #00ff00;
display: flex; flex-direction: column; justify-content: center; align-items: center; }
.campaign-inner { width: 100%; height: auto; background: #00aa00;
display: flex; flex-direction: column; justify-content: center; align-items: center; }
.campaign-inner h1 { font-size: 3rem; font-weight: 800; color: white; background: #005500; padding: 2rem; }
ご参考で、この時の、cssの構造が以下のようになっています。
- トップ：wp-site-blocks ⇒wpが作ったクラス。幅はviewpointサイズ。
- 2階層目：entry-contentなど ⇒wpが作った複数のクラス。この中の .has-global-padding が以下のようなことをする。
※--wp--style--root--padding-○○ は1.5rem。（他の環境では違うかもしれません）
- 3階層目：自分の設定したクラスなど ⇒全幅にすると、ここに、 .alignfull(全幅) ができるが、これが以下のようなことをする。
2階層めでつけたpaddingを、3階層めでwpがマイナスmarginをつけて全幅に変換しています。この3階層目に自分が作ったパターンの先頭があります。それで、この現象が起きるわけですが、この原理を表現すると次のようになるのでは、と思っています。「100%とすると、親のcontent-boxを採るので縮む。autoはmarginを適用する前の自分のboder-boxを採るので広がる。」(すいません。ここは自信ないです💦)
★★★付録★★★
このせいで一日溶けたので、怒りのあまり投稿しました。ってか、「あ、autoにしたら治ったわ」で、終わりでもよかったのですが「こうなったら徹底的にやってやる」と、検証用のコードまで作ってしまいました。ご興味があれば、いろいろ遊んでみてください。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>alignfull: width 100% vs auto 再現 12/21④回目</title>
<style>
:root{
--padL: 24px;
--padR: 24px;
}
body{
margin:0;
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
background:#f7f7f7;
}
/* 親（WPの entry-content + has-global-padding 相当） */
.entry{
padding-left: var(--padL);
padding-right: var(--padR);
background:#e9ffe9;
border:4px solid #0a8f00;
width: 90svw;
margin-inline: auto;
}
/* 比較対象 */
.w100{ width:100%; }
.wauto{ width:auto; }
/* 子（WPの .has-global-padding > .alignfull 相当） */
.alignfull{
margin-left: calc(var(--padL) * -1);
margin-right: calc(var(--padR) * -1);
background:#00ff00;
border:4px solid #006400;
/* padding:32px 0; */
margin-block: 3rem;
}
.box{
background:#0b4d0b;
color:#fff;
border:4px solid #022b02;
width: 100%;
margin-block: 3rem;
text-align:center;
font-weight:700;
}
/* 見た目で差が分かるように */
.hint{
margin: 0 auto;
padding: 12px 24px;
color:#063f06;
font-size:14px;
}
</style>
</head>
<body>
<div class="entry">
<div class="hint">
親(.entry)は左右 padding 24px。子(.alignfull)は左右 margin -24px（WPの alignfull っぽい挙動）。実験4回目。ちょい修正
</div>
<div class="alignfull w100">
<div class="box">子（alignfull） + <b>width:100%</b>（← 48px 足りなくなる）</div>
</div>
<div class="alignfull wauto">
<div class="box">子（alignfull） + <b>width:auto</b>（← margin が計算に効いてフルに見える）</div>
</div>
</div>
</body>
</html>