要素のpaddingを可変にしてセンタリングする

基本的にコンテンツのセンタリングはmarginで行っていたけど、
「absoluteで展開した幅100%の要素の中に、さらにコンテンツをセンタリングして配置したい」といったとき、わざわざ入れ子にするのは面倒くさい。
そういう時はcalc関数を使って、左右のpaddingを可変にすると手数が少なくてすんだ。むやみにhtmlも入れ子にしないですむ。

具体的には

padding: 上 calc( ( 100% - コンテンツ幅(px) ) / 2 ) 下;

でウインドウ幅に関係なく、コンテンツの中央配置を、左右のpaddingで行える。
absoluteの要素で幅がおかしかったら100vwの方がいいかもしれない。
安易に、入れ子にした要素へwidth: ---px; margin: 0 auto;とか設定するのも面倒だし、
幅100%のメガメニューを展開したときとかに使うと地味に捗る。
あとはコンテンツエリアに背景色が違うセクションを交互に並べる時とか、セクションをmarginでセンタリングしていたがこれなら入れ子も一つ減らせる。

developer.mozilla.org

about

能力的にスライムなのを自覚したので、記録としてブログをはじめることにした。

• 年始にペラっと目標立ててそのままなのも面白くないので、経過観測すれば軌道修正や継続するきっかけになりそう。
• 無理やりにでも記録しておけば客観的に見えてくるものがありそう。
• ウン=ガリヌバット=ぺ=モヘロ

人間が生きていてレベルが上がるファンファーレが鳴ることはないので、ぼーっとしていると本当にぼーっと時間が過ぎてしまうので良くない。バグです。

めっちゃ格好いいアーマーを装着して発光するのが目標。
ドラクエならゾーマが一番好き。