コーダーのための計算機
とりえあず２で割ってくれる電卓
割る２したいもの
÷
2
→
{{ divisionNumTotal }}
※小数第２位で四捨五入
px→em
em指定したい要素のフォントサイズ（px）÷ 親となる要素のフォントサイズ（px） → em
em指定したい要素のフォントサイズ
px
÷
親となる要素のフォントサイズ
px
→
font-size:{{ emTotal }}em;
※小数第２位で四捨五入
px→rem
対象のフォントサイズ（px） ÷ htmlのフォントサイズ（px） → rem
対象のフォントサイズ
px
÷
htmlのフォントサイズ
px
→
font-size:{{ remTotal }}rem;
※小数第２位で四捨五入
※fontをrem指定するならhtmlにfont-size:62.5%;つけた方が楽です。
bodyやhtml要素でfont-sizeを62.5%にしておくと基準が16pxの62.5% → 1rem=10pxになる。
bodyやhtml要素でfont-sizeを62.5%にしておくと基準が16pxの62.5% → 1rem=10pxになる。
html{
font-size:62.5%;
}
//↑基準が1rem→10px;になる
p{
font-size: 1.6rem;
}
//↑pのfont-sizeが16pxになる
Photoshopの行送り → line-height
行送りの数値（px）÷ フォントサイズ（px） → 行送り数値
行送りの数値
px
÷
フォントサイズ
px
→
line-height:{{ lhTotal }};
※小数第２位で四捨五入
例えば「フォントサイズ：16px 、行送り：24px」の場合は、 行送りの数値：24 ÷ フォントサイズ：16 ＝ 1.5 となるので、line-height : 1.5 と書く。
文字の上余白または下余白
{( フォントサイズ（px）x フォントのline-height ) - フォントサイズ（px）} / 2→ 文字の上余白または下余白(px)
{(
フォントサイズ（px）
px
x
フォントのline-height
) -
フォントサイズ（px）
px
} / 2
→
文字の上余白または下余白{{ lh2Total }}px;
※小数第２位で四捨五入
使用フォントやブラウザ、OSによって異なります。
Photoshopのトラッキング → letter-spacing
トラッキング数値 ÷ 1000 → トラッキング数値（em）
トラッキング数値
÷
1000
→
letter-spacing:{{ lsTotal }}em;