2024.09.24 コーディング
【CSS】vw、emをcalc()関数で記述する書き方
こんにちは。すっかり秋めいて過ごしやすい気温になりました。
一瞬の秋を楽しみましょう。明日には冬ですきっと。。
さて、今までvwやemを使用したい時、計算ツールを使用しておりました。
（参考：一括pxからvw計算機、px単位からem単位への変換）
計算ツールにpxの数値を入力して、単位変換して、CSSファイルにコピペして…
正直手間がかかってめんどくさい
しかも後々見返した時に、「13.333vwって何pxだったっけ？！」と分からなくなったり、、
効率いい方法はないか？
一々計算せず、かつ、元のpx数値を残した書き方をご紹介します。
この式に当てはめていきます。
➀まずは変数を設定します。今回はPC幅1280px、SP幅375pxを基準値としました。
:root{
–vw-large: 1280; /* PC */
–vw-small: 375; /* SP */
}
【補足】CSS変数は最初に「–」ハイフンを２つつけて定義します。
➁vwを使用したい部分に下記を入れてください
calc((100vw / var(–vw-large)) * ●●) /* PC */
calc((100vw / var(–vw-small)) * ●●) /* SP */
●●と書かれている部分に、vwに変換したい元のpxの数値を入力してください。
例）要素の幅を50pxを基準としたvwに設定したい場合
<div class=”box”>BOX</div>
<style>
.box{
width:calc((100vw / var(–vw-large)) * 50); /* PC */
}
@media screen and (max-width:576px){
.box{
width:calc((100vw / var(–vw-small)) * 50); /* SP */
}
}
</style>
完成！
「em」をpxの数値を残しながらcalc()関数で記述する方法
今回は基準フォントサイズを16pxとします。
html {
font-size : 10px;
}
body{
font-size: 1.6rem;
}
計算式
px ÷ 16 * 1.6rem = em
➀この式に当てはめるだけ！
例）要素の幅を50pxを基準としたemに設定したい場合
<div class=”box”>BOX</div>
<style>
.box{
width:calc(50/16 * 1.6rem);
}
</style>
完成！
これなら計算の手間が省けて、後々見返した時にデザインが何px基準で作られていたかもすぐ分かります。
以上になります。
