takato（@n8takato）です！
XDでline-heightの値を算出する方法を知りたい
この記事は上記の課題に向けて作成しています。
XDデータからコーディングする際行間のサイズを算出する必要があります。
「line-height」に値を設定することでデザイン通りの行間になります。
この記事では行間サイズを算出する簡単な方法を紹介します。
この記事を読むメリット
- XDで「line-height」の値を算出する簡単な方法がわかる
この記事を書いた人
この記事を書いた僕はこんな人です！
- 都内制作会社でwebデザイナー・webディレクターとして勤務
- webデザイナー3年、webディレクター1年目
- web制作現場で学んだことを発信している人
XDに関する他の記事はこちら
あわせて読みたい
【簡単】XDでアウトライン化する方法を紹介！
XDでアウトライン化する方法を知りたい この記事は上記の課題に向けて作成しています。 XDのデザインデータを渡す場合アウトライン化する必要があります。 アウトライン...
あわせて読みたい
【2024年版】AdobeXDで縦書きにする方法を紹介！
XDで文字を縦書きにする方法を知りたい。 この記事は上記の課題に向けて作成しております。 現時点ではXDのデフォルト機能で文字を縦書きにする方法はありません。 その...
目次
XDでline-heightの値を算出する方法
早速XDで「line-height」の値を算出する方法を紹介します。
値の算出方法は下記の通りです。
値の算出方法
- 「行送りの値」÷「フォントサイズ」
行送りの値
「行送り」とはXD上の行間のサイズです。
文字を選択した状態で右側メニューから確認することが出来ます。
※行送りはあくまでXD上での行間の値です。[line-height]の値とは異なります。
フォントサイズ
「フォントサイズ」とはXD上のフォントサイズです。
こちらも文字を選択した状態で右側メニューから確認することが出来ます。
「行送りの値」÷「フォントサイズ」で計算する
それぞれの値を元に割り算します。
仮にそれぞれの値が下記の通りだったとします。
- 「行送りの値」・・・・・30
- 「フォントサイズ」・・・18
この場合算出する「line-height」の値は「30 ÷ 18 = 1.6666…」です。
つまりコーディングの「line-height」の値は約1.6になるということです。
XDでline-heightの値は簡単に算出出来る
最後にまとめです。
- 「行送りの値」÷「フォントサイズ」で「line-height」の値を算出することが出来る
- 「行送りの値」はXD上での行間の値であるため、「line-height」の値を算出する必要がある
XDでは行間だけでなく文字の間隔（letter-spacing）の値も算出出来ます。
文字の間隔の算出方法はこちらの記事を参考にしてください。
あわせて読みたい
【AdobeXD】letter-spacingの値を算出する方法！
XDでletter-spacingの値を算出する方法を知りたい この記事は上記の課題に向けて作成しています。 XDデータからコーディングする際文字の間隔を算出する必要があります...