style01

コーダーのための計算機

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

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

px→em

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

px→rem

対象のフォントサイズ（px） ÷ htmlのフォントサイズ（px） → rem
対象のフォントサイズ
px
÷
htmlのフォントサイズ
px
→
font-size:rem;
※小数第２位で四捨五入
※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:;
※小数第２位で四捨五入
例えば「フォントサイズ：16px 、行送り：24px」の場合は、 行送りの数値：24 ÷ フォントサイズ：16 ＝ 1.5 となるので、line-height : 1.5 と書く。

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

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