style01

コーダーのための計算機

とりえあず2で割ってくれる電卓

割る2したいもの
÷
2
※小数第2位で四捨五入

px→em

em指定したい要素のフォントサイズ(px)÷ 親となる要素のフォントサイズ(px) → em
em指定したい要素のフォントサイズ
px
÷
親となる要素のフォントサイズ
px
font-size:em;
※小数第2位で四捨五入

px→rem

対象のフォントサイズ(px) ÷ htmlのフォントサイズ(px) → rem
対象のフォントサイズ
px
÷
htmlのフォントサイズ
px
font-size:rem;
※小数第2位で四捨五入
※fontをrem指定するならhtmlにfont-size:62.5%;つけた方が楽です。
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:;
※小数第2位で四捨五入
例えば「フォントサイズ:16px 、行送り:24px」の場合は、 行送りの数値:24 ÷ フォントサイズ:16 = 1.5 となるので、line-height : 1.5 と書く。

Photoshopのトラッキング → letter-spacing

トラッキング数値 ÷ 1000 → トラッキング数値(em)
トラッキング数値
÷
1000
letter-spacing:em;