コーダーのための計算機
とりえあず2で割ってくれる電卓
割る2したいもの
÷
2
→
{{ divisionNumTotal }}
※小数第2位で四捨五入
px→em
em指定したい要素のフォントサイズ(px)÷ 親となる要素のフォントサイズ(px) → em
em指定したい要素のフォントサイズ
px
÷
親となる要素のフォントサイズ
px
→
font-size:{{ emTotal }}em;
※小数第2位で四捨五入
px→rem
対象のフォントサイズ(px) ÷ htmlのフォントサイズ(px) → rem
対象のフォントサイズ
px
÷
htmlのフォントサイズ
px
→
font-size:{{ remTotal }}rem;
※小数第2位で四捨五入
※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 }};
※小数第2位で四捨五入
例えば「フォントサイズ: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;
※小数第2位で四捨五入
使用フォントやブラウザ、OSによって異なります。
Photoshopのトラッキング → letter-spacing
トラッキング数値 ÷ 1000 → トラッキング数値(em)
トラッキング数値
÷
1000
→
letter-spacing:{{ lsTotal }}em;