こんにちわ
sakitoです！
今回はAdobe XDを使っている際に
Adobe XDでテキストの行間のサイズってどうやって測るの？？
Adobe XDでは文字間のサイズは単位なしになっていて、
コーディングする時にline-heightでどう指定すればいいの？？
Adobe XDにおけるline-heightの計算方法とかあるの？
ちなみに自分がXDを使っていてそれをコーディングする際に疑問に思った部分です（笑）
今回はこんなお悩みを解決していきますのでよろしくお願いいたします
目次
数値 / 文字サイズで求められる
結論からいいます
指定されている数値を文字サイズで割ってあげる、これだけでOKです。
実際にイメージしやすいように画像で説明していきますね
XDでline-heightを計算してみる
数値が24に指定されている添付画像のテキストの場合を例に計算してみましょう
計算式は24/36＝0.6になります
これをline-heightで指定するので実際のコードは
- .class{
- line-height: 0.6;
- }
知ってさえいれば簡単ですよね！
実はこの方法を知るまでぼくは数値をそのままline-heightにpxをつけて指定してしまっていました。。（笑）
まとめ
簡単な内容になりますが知らない方は多かったのじゃないでしょうか？？
letter-spacingはどうやるの？？
という方もいると思うのですがそれはこちらの記事でご紹介しますね！
あわせて読みたい
【Adobe XD】 letter-spacingの計算方法について
こんにちわ sakitoです！ 今回はAdobe XDを使っている際に Adobe XDでテキストの文字間のサイズってどうやって測るの？？ Adobe XDでは文字間のサイズは単位なしになっ...
コメント