XDのデザインカンプから必要な値を取得するためには？
1、各項目の数値の表示方法
カンプ内の画像やテキストをクリックすると右側に、各項目の数値が表示される。
ここから得られる数値は以下の通り。
- font-family （⓵）→ 游ゴシック体
- font-weight （⓵）→ Bold
- font-size （⓶）→ 24px
- line-height （⓶⓷）→ 1.7（41px ÷ 24px）
- letter-spacing （⓶⓸）→ 0px（24px × 0）*
- color （⓹）→ #333333（⓹をクリックするとコピーできる） + width (w)→ 182px + height (H) → 24px
*letter-spacingについて
⓸の値が文字間隔（トラッキング）をさす。
今回は⓸の値が0でしたが、そうじゃない場合にどうしたらletter-spacingを計算できるのかをメモ。
（例）⓶のFont-sizeが16px、⓸のAVが75の場合
トラッキング数値 ÷ 1000で出た数値に'em'をつける。
つまり75÷1,000=0.075em となる。
この数値をそのまま使うか、pxに直す場合は16px × 0.75=1.2px とする。
2、余白の測り方
余白を測りたい対象を選択した状態で、Altキーを押しながら他の対象の上にマウスを移動すれば、画面上に余白の値が表示される。