BLOG

Photoshop とか XD の文字間を「letter-spacing」にするには?

| HTML / CSS

昔はあんまり気にしてなかったけど最近はとくに、文字間とかの指定が多くなってきました。
文字間について、PhotoshopとかXDで指定してある数値をCSSである「letter-spacing」にどう置き換えるのかということろ

Photoshopだとここにあるやつ

XDだとここにあるやつ

AVとかVAとかかいてるところの数値ですね
50とか100とかありますがこれを「letter-spacing」で指定するにはどうしたらいいかってこと

// 50の場合
// 50 / 1000 em
  letter-spacing: 0.05em;

// 100の場合
// 100 / 1000 em
  letter-spacing: 0.10em;

とまぁ、今感じざっくりいうと指定されてる数値を1000で割って単位をemにするって感じですね。
簡単に出せるんですが、基本ベースいくつで、任意の場所はいくつって教えてもらえないと
結構、これ大変ですよね。
文字サイズや、行間もいっしょですけど全部の文字をいちいち全部確認してたら、ほんとにもう、時間がいくらあってもたらんです。

RECENT POSTS

我が家の植物たち

カスタムフィールドを含む複数の条件でソートをする【WordPress】

脱jQuery!$.ajax使わない書き方

検索用のフォームを設置する【wordpress】

docker-composeをつかってWEBサーバーをたてる

カスタムフィールドを検索範囲にいれる【ACF】

WordPressに大量に投稿をインポートする【CSV】

iOSのsafariでbackground-attachmentが使えないので対策【CSSのみ】

一周回ってapple 純正メモって使いやすい

使わないとかない!flexでの間隔の設定が簡単にできるgap!

CATEGORY

POPULAR POSTS

PAGE TOP