【AdobeXD】line-heightの値を算出する方法!

AdobeXD】line-heightの値を算出する方法を紹介!

takato(@n8takato)です!

XDでline-heightの値を算出する方法を知りたい

この記事は上記の課題に向けて作成しています。

XDデータからコーディングする際行間のサイズを算出する必要があります。

「line-height」に値を設定することでデザイン通りの行間になります。

この記事では行間サイズを算出する簡単な方法を紹介します。

この記事を読むメリット

  • XDで「line-height」の値を算出する簡単な方法がわかる

この記事を書いた人

この記事を書いた僕はこんな人です!

  • 都内制作会社でwebデザイナーとして勤務
  • webデザイナー歴2年目のひよっこ
  • web制作現場で学んだことを発信している人

XDに関する他の記事はこちら

あわせて読みたい
【簡単】XDでアウトライン化する方法を紹介! XDでアウトライン化する方法を知りたい この記事は上記の課題に向けて作成しています。 XDのデザインデータを渡す場合アウトライン化する必要があります。 アウトライン...
あわせて読みたい
【2022年版】AdobeXDで文字を縦書きにする方法を紹介! XDで文字を縦書きにする方法を知りたい。 この記事は上記の課題に向けて作成しております。 現時点ではXDのデフォルト機能で文字を縦書きにする方法はありません。 その...
目次

XDでline-heightの値を算出する方法

早速XDで「line-height」の値を算出する方法を紹介します。

値の算出方法は下記の通りです。

値の算出方法

  • 行送りの値÷フォントサイズ

行送りの値

「行送り」とはXD上の行間のサイズです。

文字を選択した状態で右側メニューから確認することが出来ます。

「行送りの値」はテキストを選択した状態で画面右側に表示されます。
XDの行送りの値

※行送りはあくまでXD上での行間の値です。[line-height]の値とは異なります。

フォントサイズ

「フォントサイズ」とはXD上のフォントサイズです。

こちらも文字を選択した状態で右側メニューから確認することが出来ます。

「フォントサイズ」もテキストを選択した状態で画面右側に表示されます。
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データからコーディングする際文字の間隔を算出する必要があります...
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次