先週は、a-blog cmsの脆弱性対応をしました

先週は、a-blog cms に重大な脆弱性が見つかったことで、その対応をしていました。
下記が詳細な内容です！もしまだ未対応の方は下記を参照ください

弊社では、基本的には、上記記事にある、「影響を受けるバージョン」以下のドメインを、最新版までオンラインアップデートしましょうという方針で脆弱性対応をしました。全てパッチバージョンのアップデートでした。

さて、今回は、関数に関して勉強しようと思います。

Q.下記は何を表すでしょうか？
left: calc(50% - 150px);

A.これは、幅が300pxの要素を親要素の中央に配置される(左端を親要素の中央から150px左へずらす)ことを意味します。
ある要素を、親要素の横軸中央に配置したいときは、position:absolute;している場合にはmargin:0 auto;や flexによる中央配置ができず、css内の計算によって数値を算出する必要があります。
right: calc(50% + 150px);(右端を親要素の中央から150px右へずらす)でも同じ事ができます。

私の場合、親要素のグローバルナビゲーションがレスポンシブで、それをホバーしたときに出てくる子要素のナビゲーションは固定値の場合があり、子要素のナビゲーションを親要素の中央配置したい場合に使用しました（文字にするとややこしい）。
図にすると以下です。

calc、どんなときに使う？

具体的に、どんなときに使えるのかを調べてみました。

用途	具体的なcalc()の例	使い方
幅の計算	width: calc(100% - 50px);	親要素の幅から固定値を引く
中央配置	margin-left: calc(50% - 150px);	中央寄せ
フォントサイズ	font-size: calc(1rem + 1vw);	画面幅に応じた文字サイズ
グリッド調整	width: calc(33.33% - 10px);	カラムの幅調整
位置調整	left: calc(50% - 200px);	中央に要素を配置

など、色んなところで使えるようですね
ちなみに、親要素と子要素の幅に合わせた中央配置について、以下にまとめました。
子要素が可変のときは、calcでの完璧な中央配置は難しいので、
left: 50%;
transform: translateX(-50%);
で中央配置がおすすめです。

親の幅	子の幅	最適な中央配置方法
可変	可変	left: 50%; transform: translateX(-50%);
可変	300px 固定	left: calc(50% - 150px);
固定	可変	left: 50%; transform: translateX(-50%);

実践してみる

a-blog cmsのUTSUWAテーマで、ナビゲーションの子要素を中央配置してみようと思います。
あ、そういえば、UTSUWAテーマがイメチェンしていますね！
いつも見慣れたサイトでもメインビジュアルが変わるとがらりと印象が変わりますね。

余談はさておき、

UTSUWAのグローバルナビゲーションをhoverすると、子ナビゲーションが出現しますが、以下のようになっています。

この子ナビゲーションを親ナビゲーションの真ん中に表示させたいとき、どうすればいいかを考えてみます。

今回の場合、
.global-nav-item > .global-nav-list（子ナビゲーション）は
position: absolute;　されています。

なので、display:flex;での中央配置やmargin:0 auto;は使えません。
そうなると、子要素が可変なのか固定なのか？で最適な中央配置方法を検討していきます。
.global-nav-item > .global-nav-list　のwidthをみてみます。

.global-nav-item > .global-nav-listは、min-width: 14rem;でした。
min-width の場合、子要素の幅が 14rem以上になる可能性があり、正確な中央配置ができなくなります。なので、子要素は可変と判断します。（width: 14rem;なら、left: calc(50% - 7rem); で中央配置可能）
なので、この場合の最適な中央配置方法は、
left: 50%;
transform: translateX(-50%);
です。

さいごに

グローバルナビゲーションの構造に関しては以前、記事に書きましたのでそちらをご参考にどうぞ。
今回calcについて勉強し、すこーしだけ関数への苦手意識が減ったかもと思いました。
中央配置で悩まず、要素を思い通りに配置できるように頑張ります