ラッパー等の空間の取り方で最近学んだことのご紹介です。
サイト制作ではページ毎にコンテンツ幅が様々です。
スペースを固定幅で指定していると、画面サイズの変化でズレが生じます。
私がまさにそれで、無駄なスペーシングやその場しのぎのラッパーが増えたりしていました。
参考としたサイトでは、
基準はヘッダーのLogoを基準(ピンク線)としてArticle部分を揃えたい、という内容。
そこで以下を取り入れてレイアウトしていく。
1.ビューポート単位
2.calc（）関数
3.max（）比較関数
4.CSS変数
上記を軸としてスペースを動的な値として指定してコンテンツを整列します。
動的パディング=（ビューポート幅 - ラッパー幅）/ 2
としてスペース幅の値を求めます。
例
❖Logo（ピンク線）にArticle部分を揃える
padding-leftの値を取得したい
ビューポート：１３００ｐｘ
ラッパー：１１００ｐｘ(内:水平方向のパディング、左右に各16px)
上記から
padding-left=(1300px - 1100px) / 2
⇓ビューポートを100vwに置き換えて
padding-left: calc((100vw - 1100px) / 2)
↓更に水平方向のパディング考慮する
padding-left: calc((100vw - calc(1100px - 32px)) / 2)
⇓⇓
これで『ロゴ』(ピンク線)と『Article title』のアタマが揃いましたが、モバイルで『Article title』のパディングがゼロになりズレ発生。
ここでmax()関数を用います。
最小値を指定することでモバイル表示でもコンテンツを整列させます。
max(最小値, （ビューポート幅 - ラッパー幅）/ 2)
⇓
最小値16pxを指定
max(16px, calc( ( 100vw - calc(1100px - 32px) ) / 2 ) )
画面幅が大きくなると動的に変化。
最後に様々な場面で使えるようにcss変数を使用。
例
:root {
--wrapper: 1100px;
--wrapper-padding: 16px;
--space: max(
16px,
calc((100vw - calc(var(--wrapper) - var(--wrapper-padding) * 2)) / 2)
);
}
.article {
padding-left: var(--space);
}
などとする。
またデバイスによって【100vw】でズレが生じるので【100％】に置き換えるとのこと。
抜け・粗相もあると思いますが自分ノートまでに概要としてまとめてみました。
普段これらの要素をあまり使っていなかったので、こんなに便利なのかととても勉強になりました。そして何より面白い！
レイアウト全体に取り入れてデザインの幅を広げていきたいです。
◎おわりに
お気軽にご相談ください。
最後まで読んでいただきありがとうございました('・ω・')ゞ
